.productMedia{
    width: 100%;
    height:auto;
    min-height: 300px;
    /* margin-bottom: 1.25rem; */
	display:block;
}
.productMedia *{
	float:none;
}


.painting-gallery{
    --gallery-width: 100%;
    --gallery-height: calc(100vh - 140px);
    --controllOpenerImage: url("data:image/svg+xml,%3C?xml%20version='1.0'%20encoding='UTF-8'?%3E%3Csvg%20id='a'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20574.31%20497.69'%3E%3Cpath%20d='M16.38,494.85c-9.23,0-15.38-6.15-15.38-15.38V16.38C1,7.15,7.15,1,16.38,1h124.62c6.15,0,13.85,3.08,18.46,7.69l178.46,224.62c6.15,7.69,6.15,20,0,29.23l-180,224.62c-4.62,6.15-12.31,9.23-20,9.23l-121.54-1.54Z'%20style='stroke:%23fff;%20stroke-miterlimit:10;%20stroke-width:4%;'%3E%3C/path%3E%3Cpath%20d='M568.69,233.31L388.69,10.23c-7.69-9.23-21.54-12.31-32.31-3.08l-35.38,29.23c-10.77,7.69-12.31,23.08-3.08,32.31l146.15,180-146.15,181.54c-7.69,9.23-6.15,24.62,3.08,32.31l35.38,29.23c10.77,7.69,23.08,6.15,32.31-3.08l180-224.62c6.15-12.31,6.15-23.08,0-30.77Z'%20style='stroke:%23fff;%20stroke-miterlimit:10;%20stroke-width:4%;'%3E%3C/path%3E%3C/svg%3E") no-repeat  center;
    width: var(--gallery-width);
    height: var(--gallery-height);
    min-height: 300px;
    border: 1px solid #ebe8e8;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    user-select: none; /* Disables text selection */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For Internet Explorer/Edge */
    -moz-user-select: none;
    overflow:hidden;
    background-color: #fffffd;
    transition: height 0.3s ease;
    clear: both;
}
.painting-gallery.fullScreen{
    background-color:#000;
    border: none;
    
}
.painting-gallery > .stage{
    width: var(--gallery-width);
    height: var(--gallery-height);
    position: absolute;
    overflow: hidden;
    z-index: 1;
    top: 0;
    left: 0;
}
.painting-gallery.fullScreen > .stage,
.painting-gallery.fullScreen .stage li{
	height:100%;
}
.painting-gallery .evetOverlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent/* rgba(100, 23, 23, 0.5)*/;
    justify-content: center;
    align-items: center;
    z-index: 900;
}


.painting-gallery .stage ul{
   
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    width: auto;
    height: 100%;
    white-space: nowrap;
    position: relative;
}
.painting-gallery .stage li{
    display: inline-block;
    width: 100%;
    height: var(--gallery-height);
    margin: 0 5px 0 0;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    overflow: hidden;
    float: none;
    
    justify-content: center;
    align-items: center;
    
}
.painting-gallery.fullScreen .stage li A{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    }
.painting-gallery .stage li img{
    width: 100%; /* Adjust width to fit the container */
    height: auto; /* Adjust height to fit the container */
    margin: 0 auto;
    display: block;
    position: relative;
    }
.painting-gallery .oriGalcontrols{
	position:absolute;
	bottom: 0;
    left: 0;
	
	display:block;
    height: 1%;
    width: 100%;
   /*  background-color: rgb(204 206 209 / 55%); */
    
    z-index: 1100;
}
.painting-gallery .oriGalcontrols .openToggler{
    width:4em;
    height: 4em;
    position: absolute;
    top: -4em;
    left: calc(50% + 55px);
    background-color: transparent;
    background: var(--controllOpenerImage);
    background-size: 60%;
    border: none;
    rotate: -90deg;
    cursor: pointer;
    opacity: .7;
    
}
.painting-gallery .oriGalcontrols > .controlStage{

    --controlStageHeight : max(1300% , 90px);
    width: calc(100% - 130px);
    height: var(--controlStageHeight);
   
    display: block;
    background-color: rgb(46 46 47 / 55%);
    padding: 0 1px;
    box-sizing: border-box;
    position: absolute ;
    backdrop-filter: blur(3px);
    bottom: calc(var(--controlStageHeight) * -1) ;
    transition: bottom 0.4s ease-in-out;
}

.painting-gallery .oriGalcontrols.open .controlStage {
    bottom:0;

}
.painting-gallery .oriGalcontrols.open  .openToggler{
    rotate: 90deg;
    opacity: 1;
}
.painting-gallery .zoomControls{
    --zcHeight:min(300px , max(46vh, 200px));
    --zcWidth:50px;
    --zcSliderWidth: calc(var(--zcHeight) - 80px) ;
    --zcSliderOffset: calc(var(--zcSliderWidth) / 2  - var(--zcWidth) / 2);
    position: absolute;
    top: calc(50% - var(--zcHeight) / 2 );
    left: 2%;
    width:  var(--zcWidth);
    height:var( --zcHeight);
    background-color: #81808055;
    z-index: 1005;
    border-radius: 25px;
    backdrop-filter: blur(3px);
    border: 1px solid #f0e9e988;
    opacity: 0;
    z-index: 800;
    transition: opacity 1.4s;
}
.painting-gallery.zoomedIn .evetOverlay{
    cursor: grab;
}
.painting-gallery.zoomedIn .zoomControls { 
    opacity: 1;
    z-index: 1005;
    }


.painting-gallery.hover:not(.isMobile) .zoomControls {
    opacity: 1;
    z-index: 1005;
}

.painting-gallery .zoomControls input[type="range"]{
    -webkit-appearance: none;
    appearance: none;
    position:   absolute;
    top:15px;   
    left: 25px;
    margin: 0;
    padding: 0;
    height: 50px;
    width:var(--zcSliderWidth) !important;
    min-width: var(--zcSliderWidth) !important;;
    background:#faf8f833;
    outline: orange;
    opacity: 0.7;
    transition: opacity 0.2s;
    cursor: pointer;
   
    direction: rtl;
   transform: rotate(90deg) ;
   transform-origin: left center;
  


}
.painting-gallery .zoomControls  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
   
    width: 25px;
    height: 60px;
    background:black;
    cursor: pointer;
    border-radius: 0;
    background: linear-gradient(to left, rgb(8, 8, 8), rgb(8, 8, 8), rgb(8, 8, 8), rgb(8, 8, 8),
                            rgb(50,50, 50), rgb(8, 8, 8), rgb(50, 50, 50), rgb(8, 8, 8), rgb(50, 50, 50),
                            rgb(8, 8, 8), rgb(8, 8, 8), rgb(8, 8, 8));
    box-shadow: 0 0 0 2px #f0e9e999;
    border-radius: 5px;
}






.painting-gallery .zoomControls  input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    width: 25px;
    height: 60px;
    background:black;
    cursor: pointer;
    border-radius: 0;
    background: linear-gradient(to left, rgb(8, 8, 8), rgb(8, 8, 8), rgb(8, 8, 8), rgb(8, 8, 8),
                            rgb(50,50, 50), rgb(8, 8, 8), rgb(50, 50, 50), rgb(8, 8, 8), rgb(50, 50, 50),
                            rgb(8, 8, 8), rgb(8, 8, 8), rgb(8, 8, 8));
    box-shadow: 0 0 0 2px #f0e9e999;
    border-radius: 5px;
} 
.painting-gallery .zoomControls button.p{top:0;  border-top-left-radius: 25px;    border-top-right-radius: 25px;}
.painting-gallery .zoomControls button.m{bottom: 0;border-bottom-left-radius: 25px;    border-bottom-right-radius: 25px;}
.painting-gallery .zoomControls button{
    width: 50px;
    height: 38px;
    box-sizing: border-box;
    border: 0px solid #f0e9e9;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 1005;
    font-size: 2em;
    transition: opacity 0.2s;
    left: 0px;
    display: block;
}
.painting-gallery .zoomControls button:hover{
    background: #f0e9e9AA;
    
}


.outerThumbnails{
    width: 100%;
    height: 170px;
    position: relative;
    display: block;
    clear: both;
}
.oriGalcontrols .thumbs_container  {
    height: 65%;
    margin: 1%  ;
    width: 98%;
}
 .thumbs_container{
    display: block;
    bottom: 0;
    height: 86px;
    width:100%;
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    z-index: 1000;
    list-style: none;
    margin: 20px 0;
}
 .thumbs_container ul.thumbnails{
    display: block;
    bottom: 0;
    height: 100%;
    width:auto;
    align-items: left;
    z-index: 1000;
    list-style: none;
    margin: 0 0;
    padding: 0;
    white-space: nowrap;
    z-index: 5;
    overflow: hidden;
    overflow-x: auto;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none; /* For Firefox */
    box-sizing: border-box;
    position: relative;
}
.thumbs_container  ul.thumbnails li{
    display: inline-block;
    width: auto;
    height:100%;
    margin: 0 5px;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    border: 1px solid #FFF;
    float: none;
    filter: contrast(0.35) brightness(1.6);
    transition: filter 0.3s ease;
}
.fullScreen .thumbs_container  ul.thumbnails li{
    filter: contrast(0.55) brightness(0.7);
    border: 1px solid #000;
}
.fullScreen .thumbs_container  ul.thumbnails li.selected{
    border-color: #FFF;
}
.thumbs_container  ul.thumbnails li:first-child{
    margin-left: 0;
    
}
.thumbs_container  ul.thumbnails li.selected,
.thumbs_container  ul.thumbnails li:hover{
    filter: contrast(1) brightness(1);
    border: 1px solid #000;
}
.thumbs_container  ul.thumbnails li img{
    cursor: pointer;
    width: auto; /* Adjust width to fit the container */
    height: 100%; /* Adjust height to fit the container */
    margin: 0 auto;
    display: block;
    position: relative;
}
 .thumbs_container  button{
    background: linear-gradient(to right, rgba(250, 250, 250, 0.4) 20%, rgba(250, 250, 250, 0) 100%);
    border: none;
    color: #000;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin: 0.5% 0 ;
    transition: color 0.3s ease;
    width: 5%;
    height: 95%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: none;
    font-size: 1.2em;
    font-weight: bold;
    text-align:left;
    font-weight:bold;
    -webkit-text-stroke: 1px white; /* For Safari and Chrome */
    /* text-stroke: 1px white; For other browsers */
    box-sizing: content-box;
	cursor:pointer;
    
    
    
}
.thumbs_container button.post{
    background: linear-gradient(to left, rgba(250, 250, 250, 0.4) 20%, rgba(250, 250, 250, 0) 100%);
    left: auto;
    right: 0;
    text-align:right;
}


   

.outerThumbnails .oriGalPrevNext{
    position: absolute;
    right: 10px;
    bottom: 0;
    border: 0px solid #000;
}
.oriGalPrevNext{
    display: block;
    float: right;
    width: 5em;
    border: 0px solid #000;
    position: relative;
}
.oriGalPrevNext button{
    font-size: 2.5em;
    text-align: center;
    text-indent: -2.5px;
    line-height: 1.1;
    color: #26313a;
    cursor: pointer;
    background: none;
    border:none;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin: 0;
    padding: 0;
}
.oriGalPrevNext button:disabled{
    color: #ccc;
    cursor: default;
}
.oriGalPrevNext button.prev{ float: left;}
.oriGalPrevNext button.next{ float: right;}

.fullScreenController {
    position: absolute;
    bottom: 2em;
    right: 2em;
    width: 3em;
    height: 3em;
    background-color: #afacac99;
    z-index: 1200;
    transition: background-color 0.3s ease ; /* Use transform for better performance */
}
.fullScreenController:hover {
   
    background-color: #afacac88;
}

.painting-gallery.fullScreen .fullScreenController::after {
    background: url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 860.37 849.16"><path d="M244.24,604.92v244.24h-75.94v-168.3H0v-75.94h244.24Z"/><path d="M244.24,0v244.24H0v-75.94h168.3V0h75.94Z"/><path d="M692.07,0v168.3h168.3v75.94h-244.24V0h75.94Z"/><path d="M860.37,604.92v75.94h-168.3v168.3h-75.94v-244.24h244.24Z"/></svg>') no-repeat center ;
    background-size: 70%;
}
.fullScreenController::after {
    content: '';
    color: #FFF;
    font-size: 1.5em;
    text-align: center;
    line-height: 3em;
    display: block;
    cursor: pointer;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 96 960 960" width="100%"><path d="M200 856V663h60v133h133v60H200Zm0-367V296h193v60H260v133h-60Zm367 367v-60h133V663h60v193H567Zm133-367V356H567v-60h193v193h-60Z" stroke="white" stroke-width="2"/></svg>') no-repeat center center;
    width: 100%;
    height: 100%;
    
}

.fullScreenController::before {
    content: " ";
    display: block;
    width: 20%;
    height: 20%;
    position: absolute;
    top:40.3%;
    left: 40.4%;
    border: 0.15em solid #272727;
    box-sizing: border-box;
   
}

@keyframes scaleUpDown {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
}

.fullScreenController:hover::after {
    animation: scaleUpDown 0.4s ease-in-out ; /* Infinite loop for continuous scaling */
}
body.fullScreen{
    overflow: hidden;
    
}
body.fullScreen .fullScreenStage{
    width: 100vw;
    display: block;
    height:100vh;
    top:0;
    left:0;
    background-color: #000;
    z-index: 10000;
    position: fixed;
}
.OriscrollObserver{
    position: absolute;
    left: 0;
    top: 125px;
    height: 3px;
    width: 100%;
    background-color: #7c7a7a;
    user-select: none; /* Disables text selection */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For Internet Explorer/Edge */
    -moz-user-select: none; /* For Firefox */
	padding:0;
	box-sizing:border-box;
    display: block;
}
.OriscrollObserver .thumb{
    position: absolute;
    left: 0;
    top: -7px;
    height: 7px;
    width: 0;
    background-color: #030303;
    user-select: none; /* Disables text selection */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For Internet Explorer/Edge */
    -moz-user-select: none; /* For Firefox */
    cursor: pointer;
    border: solid #FFF;
    border-width: 5px 0;
    display: block;
	box-sizing:unset;
	
}
.OriscrollObserver .thumb::after{
    content: " ";
    position: absolute;
    left: 0;
    top:-30px;
    height: 20px;
    width: 100%;
    background-color:transparent;
}
.outerThumbnails .imagesCounter{
    width: auto ;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 10px;
}
.imagesCounter line{
    width: 50px;
    height: 2px;
    display: inline-block;
    background-color: #3f3f3f;
    margin: calc(0.5em - 3px) 0.2em;
}
.resourcesBox label{
    user-select: none; /* Disables text selection */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For Internet Explorer/Edge */
    -moz-user-select: none; /* For Firefox */
}
.sold .painting-gallery:not(.fullScreen)  .evetOverlay,
.sold .productMedia::after
{
    background: url(https://www.we-artonline.com/images/sold.png) no-repeat -27px 100px ;
    background-size: 220px  auto;
    @media screen and (max-width: 768px) {
        background-size: 110px auto;
        background-position: -13px 50px;
        
    }
   
}
.sold .productMedia::after{
    position: absolute;
    width: 40px;
    height: 100px;
   
    left: -25px;
    top: 101px;
    content: " ";
    z-index: 1;
    background-position: 0 0;
    @media screen and (max-width: 768px) {
        top: 50px;
        left: -12px;
    }
}
/***********************************************************************************************************************/



.prod_title {
  margin-top: 20px;
  margin-bottom: 40px;
  font-size: 1.125rem;
  font-weight: 600;
  width:100%;
  & h1{
	font-weight:600;
	display: inline;
	& span{
		font-size: 2.375rem;
		line-height: 1.1;
	}
	& .ts{
		font-size: 1.4rem;
		font-weight: 400;
		margin: 0 0.25em;
		vertical-align: bottom;
		line-height: 1.5;
	}
  }
}

.artist-art{
	padding-bottom: 7px;
	font-size: 0.875rem;
	text-decoration: underline;
	padding: 0 0 7px 0;
	font-weight: 600;
	width:100%;
	text-transform: uppercase;
	& a{
		color:#000;
	}
}

.styles-art{
	font-size: 0.875rem;
	padding: 7px 0;
	font-weight: 500;
	width: 100%;
	text-transform: uppercase;
	& a{
		color:#000;
		text-decoration: none;
	}
}

.size-art{
	padding: 2px 0;
	font-weight: 500;
	width: 100%;
	text-transform: uppercase;
}


.price-icons-container{
	width:100%;
	& .price-art-block{
		display: flex;
			gap: 10px;
			align-items: flex-end;
		& .price-art{
			font-size: 2.375rem;
			font-weight: 700;
			text-transform: uppercase;
		}
		& .currency-dropdown-product{
			padding: 0px 0px 6px 0px;
			margin:0;
			position: relative;
			& .currency-selected-product{
				font-size: 1rem;
				text-decoration: underline;
				cursor:pointer;
				font-weight: 600;
			}
		}
	}
	& .icons-container{
		font-weight: 700;
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 0px;
		text-transform: uppercase;
		& .icon-item{
			display: inline-flex;
			align-items: center;
			font-size: 0.75rem;
			padding: 5px;
			text-align: center;
			width: auto;
			& .icons-1{
				border: 1px solid black;
				border-radius: 50%;
				padding: 1px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				font-weight: 700;
				margin-right: 5px;
			}
			& .icons-2{
				border: 1px solid black;
				border-radius: 50%;
				padding: 3px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 7px;
				font-weight: 700;
				margin-right: 5px;
			}
			& .icons-3, & .icons-4{
				margin-right: 5px;
				display: inline-flex;
				align-items: center;
				font-size: 0.875rem;
			}
		}
	}
	& .actionButtons{
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		margin: 20px 0;
		gap: 10px;
		align-items: flex-start;
		height: auto;
		width: 100%;
		text-transform: uppercase;
		& > *{
			flex: 1 1 0;
			box-sizing: border-box;
			background: #eceeee;
			height: 43px;
			 --element-height: 30px;
			
		}
		@media screen and (max-width: 1050px) and (min-width: 805px), screen and (max-width: 500px) {
			flex-direction: column;
			& > *{
				flex: 0 0 auto;
				width: 100%;
			}
		}
		& .buttonFlipper { 
			padding: 0;
			margin: 0;
			--element-height: 43px;
			--button-bg-color: #000000;
			--button-text-color: white;
			--button-hover-bg-color: #000;
			--button-hover-text-color: #FFF;
			--border-inner: 1px solid #FFF;
			--border-inner-hover: 1px solid #FFF;
			--border-radius-outer: none;
			--border-radius-outer: none;
			--border-outer: none;
			width: 100%;
			& i{
				color: #FFF;
				font-size: 1.5em;
				margin: 0 0 0 0.5em  ;
			}
			font-family: inherit;
			font-size: 1rem;
		
		}
		& .like-container {
			position: relative;
			display: inline-block;
			width: 100%;
			height: 43px;
			border: 1px solid #000;
			border-radius: 30px;
			overflow: hidden;
			background: #f9f9f9;
			cursor: pointer;
			user-select: none;
			font-size: 1rem;
			font-weight: 400;
			letter-spacing: -0.015em;
			
			& user-likeheckbox {
				position: absolute;
				top: 55%;
				right: -2px;
				transform: translateY(-50%);
				z-index: 3;
				--width: 1.5rem;
				pointer-events: none; /* Prevent direct clicking on checkbox */
			}
			& .likeAntiClickMask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				cursor: pointer;
			}
			& .likeCurtain {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 200%;
				transition: transform 0.4s ease-in-out;
				z-index: 1;
				display: flex;
				flex-direction: column;
			}
			& .curtain-content {
				height: 100%;
				display: flex;
				flex-direction: column;
			}
			& .add-text, .remove-text {
				height: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				text-align: center;
				box-sizing: border-box;
				padding-right: 30px;
				
			}
			& .add-text {
				background: #FFF;
			}

			& .remove-text {
				background: rgb(232, 253, 232);
			}
			&:not(.liked) .likeCurtain {
				transform: translateY(0%); /* Show "Add" text */
			}

			&.liked .likeCurtain {
				transform: translateY(-50%); /* Show "Remove" text */
			}

			&:hover .likeCurtain {
				transition: transform 0.2s ease-in-out;
			}

			&:not(.liked):hover .likeCurtain {
				transform: translateY(-5%); /* Slight peek of remove text */
			}

			&.liked:hover .likeCurtain {
				transform: translateY(-45%); /* Slight peek of add text */
			}

			&:active {
				transform: scale(0.98);
				transition: transform 0.1s ease;
			}

			&:not(.liked) {
				border-color: #070707;
			}

			&.liked {
				border-color: #0a0a0a;
			}

			
			transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
			

		}
		
	}
}

.slider-artist-title {
	width:inherit;
	flex-grow:1;
	text-align:left;
}
.slider-style-artist {
	display: flex;
	justify-content:space-between;
	align-items:center;
}



.paintingGrid{
    width: 100%;
    display: grid;
    gap: 1rem 1rem;
    grid-template-columns: 3fr 2fr ;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
    'breadcrumbs breadcrumbs'
    'media title'
    'media cart'
    'media share'
    'media other'   
    'description resources';
    box-sizing: border-box;
    mask-repeat: auto-fill;
    margin: 0;
    
}
.gItem:nth-child(1){
    grid-area: breadcrumbs;
} 
 
.gItem:nth-child(2){
    grid-area: title;
    align-self: start;
}   
.gItem:nth-child(3){
    grid-area: media;
}
.gItem:nth-child(4){
    grid-area: cart;
    align-self: start;
}
.gItem:nth-child(5){
    grid-area: description;
}
.gItem:nth-child(6){
    grid-area: resources;
}
.gItem:nth-child(7){
    grid-area: share;
    align-self: start;
}
.gItem:nth-child(8){
    grid-area: other;   
    align-self: start;
}

@media screen and (max-width: 800px) {
    .paintingGrid{
        grid-template-columns: 100%;
        grid-template-areas: 
        'breadcrumbs'
        'title'
        'media'
        'cart'
        'other'
        'description'       
        'resources'
        'share'
        ;   
    } 
  
  	.gItem:nth-child(8){
        min-height: 10px;
    }
}   

.gItem{
    min-height: 3px;
    box-sizing: border-box;
    position: relative;
}

/* painting resources box */
.resourcesBox{
    --resourceBoxLableHeight: 60px;
   
    width: 100%;
    
    height: auto;
    box-sizing: border-box;
    margin: 0;
    display: block;
    position: relative;
    border: 1px solid black;
	& .attr-row{
		padding: 5px 0;
		border-bottom: solid 1px #ddd;
		width: 100%;
		float:left;
		& .attr-category{
			padding: 3px 0;
			font-weight: 600;
			width: 40%;
			float:left;
		}
		& .attr-style{
			padding: 3px 0;
			width: 60%;
			float:left;
			& a{
				color: black;
				text-decoration: none;
			}
		}
	}
}

.prod_text {
  line-height: 1.7;
  margin-top: 10px;
}

.contentCube{
    width: 100%;   
    box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    display: block;
}
.resourcesBox input.selectRadio{
    display: none;
}

.resourcesBox label{
    display: list-item;
    width: 100%;
    /*min-height:  var(--resourceBoxLableHeight);*/
    height:  var(--resourceBoxLableHeight);
    border: 1px solid black;
    border-width: 1px 0 0;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: Left;
    padding: 0 1rem;
    list-style-type: none; 
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
}
.resourcesBox .selectRadio:checked ~ label{
    padding: 0 2.8rem;
}

.resourcesBox .content{
    padding: 0 1rem;
}
.resourcesBox  .selectRadio:checked ~ label::before {
        content: "\2022";
        font-size: 2.5rem;
        color: black; 
        position: absolute;
        left: 1rem;
        top: 46%;
        transform: translateY(-50%); /* Centers it vertically */
}
.resourcesBox .selectRadio:checked ~  .stage{
    height: var( --resourceBoxHeight);
    transition: height 0.5s ease-in-out;
}
.resourcesBox .contentCube .stage{
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;

}

.sold .painting-gallery:not(.fullScreen)  .evetOverlay{
    background: url(https://www.we-artonline.com/images/sold.png) no-repeat left bottom ;
    background-size: 40%;
}

@media screen and (max-width: 800px) { 
  	#about .stage {
    	text-align:center;  
    } 
}
.currency-dropdown-product {
  padding-bottom: 6px;
}
.currency-list-product {
  position: absolute;
  top: 100%;
  left: -2px;
  overflow-y: auto;
  background-color: white;
  box-shadow: rgba(50, 50, 50, 0.5) 0px 0px 5px 2px;
  border: none;
  z-index: 1000;
  padding: 6px 7px 6px 1px;
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.bordered-box {
  padding: 0px 20px 7px 20px;
  border: 3px dotted black;
  border-radius: 25px;
  position: relative;
  display: inline-flex;
  align-items: center;
  text-align: center;
}
.arrow {
  font-size: 26px;
  line-height: 1;
  padding-left: 5px;
}
#scrollTo {
  margin-top: 20px;
}
.social-button img {
  max-width: none !important;
  max-height: none !important;
  width: 100%;
  translate: 0 0;
  transition: translate 0.5s;
}

.currency-list-product.active {
  opacity: 0.9;
}
.currency-item-product {
  cursor: pointer;
  font-size: 12px;
  text-transform: capitalize;
  font-weight: 600;
}

.custom_select1{
    position: relative;
    display: inline-block;
    font-size: 1rem;
    box-sizing: border-box;
    cursor:pointer;
    & > select{

      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: #f2f2f2;
      border: 1px solid transparent;
      border-radius: 20px;
      padding: 10px 35px 10px 15px;
      font-weight: bold;
      font-size: 1em;
      cursor: pointer;
      outline: none;
    }
    & > select:focus {
        border-color: #000;
    }
    &::after {
      content: "▼";
      font-size: 0.9em;
      color: #000;
      position: absolute;
      right: 0.9em;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }
    & option{
        padding: 0.8em;
        font-size: 0.9em;
		cursor:pointer;
      &:checked {
          background: #323333;   /* blue highlight */
          color: #fff;
        }
      &:hover {
        background: #ddd;
      }
}
}

.ImageShowRoom{
  margin: 1rem 0;
  & h5{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    
  }
  & label{
    text-align: middle;
    & i{
      font-size: 0.75rem;
      margin: 0 1.2em 0.2em  0 ;
     
    }
  }
  & .custom_select1{
      margin: 0 2em;
  }
  & .carousel{
    grid-auto-columns: 33%;
    @media screen and (max-width: 1000px) { grid-auto-columns: 50%; };
    @media screen and (max-width: 500px) { grid-auto-columns: 100%; };
    gap: 0.5rem;
    padding:0  0.1rem;
    & li{
      background-color: #323333;
      aspect-ratio: 1.4 / 1;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
	  
	  overflow: hidden;
	  position:relative;
	  & .sim-paintartwork{
		  z-index: 20;
		  width: 30%;
		  height: auto;
		  left: 35%;
		  top: 10%;
		  position: absolute;
		  & a{
			  color: black;
			  text-decoration: none;
			 & img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				max-width: 100%;
				max-height: 100%;
			 }
		  }
	  }
	  & .sim-roomimage{
		  & img{
			  transition: all .2s ease-in-out;
		      max-width: 100%;
              max-height: 100%;
		  }
	  }
	  & .sim-images{
		  border: solid 1px #ddd !important;
		  display: none;
		  width: 100%;
		  & .sim-paintartwork-image{
			  z-index: 20;
			  width: 20%;
			  height: auto;
			  left: 35%;
			  top: 4%;
			  box-shadow: 3px 4px 7px 0px rgba(0, 0, 0, 0.3);
			  position: absolute;
		  }
		  & .sim-room-image{
			  
		  }
		  
	  }
    }
    
  }
}

.footer-breadcrumbs-container{
	padding: 30px 0px;
	display: flex;
    flex-wrap: wrap;
    gap: 0px;
	width: 100%;
	& .flex-card-custom{
		flex: 1;
		min-width: 300px;
		max-width: 33%;
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 20px;
		border-left: 2px solid #000;
		box-sizing: border-box;
		& ul{
			text-align: left;
			list-style-type: none;
			margin: 0;
			padding: 0;
			& li{
				float: none;
				padding: 2px 0px;
				& a{
					padding-right: 3px;
					color: black;
					text-decoration: none;
				}
			}
		}
	}
}

.artist-container{
	background-color: rgba(242,242,242,1);
	padding: 30px 0;
	width: 100%;
	& .artist-image{
		aspect-ratio: 1/1.0;
		border-radius: 50%;
		overflow: hidden;
		text-align: center;
		width: 11.1111%;
		margin: auto;
		& img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			max-width: 100%;
			max-height: 100%;
			vertical-align: middle;
			border: none;
		}
	}
	@media (max-width: 768px) {
		& .artist-image{
			width: 30%;
		}
	}
	& .artist-desc-block{
		width: 100%;
		display: flex;
		& .artist-desc-list{
			width: 45%;
			& .artist-title{
				margin: 3px 0;
				font-size: 2.5em;
				font-weight: 600;
			}
			@media (max-width: 768px) {
				& .artist-title{
					padding-top: 15px;
					font-size: 2.3em;
				}
			}
			& .artist-city{
				margin: 3px 0;
			}
			& .artist-styles{
				margin: 3px 0;
				font-weight: 600;
			}
			& .artist-profile{
				padding: 20px 0;
				width: 100%;
				& .artist-profile-title{
					font-weight: 600;
					width: 100%;
					text-transform: uppercase;
				}
				& .artist-highlights{
					margin: 3px 0;
					width: 100%;
					text-transform: uppercase;
					& p{
						margin: 3px 0;
						& .icon-star-fill{
							width: 14px;
							aspect-ratio: 1 / 1;
							padding-right: 7px;
						}
					}
					
				}
			}
		}
		& .biography-container{
			padding: 10px;
			width: 55%;
			& .biography{
				font-weight: 600;
				text-transform: uppercase;
				margin-top:16px;
				margin-bottom:16px;
			}
			& .more-content-artist{
				
			}
			& .readmore-container{
				cursor: pointer;
				font-size: 0.9rem;
				padding: 10px 0 0 0;
				font-weight: 700;
				& .artist_read_more{
					color: black;
					text-decoration: none;
					text-transform: uppercase;
				}
			}
		}
	}
	@media (max-width: 768px) {
	  & .artist-desc-block{
		flex-direction: column; 
		& .artist-desc-list{
			width: 100%;
		}
		& .biography-container{
			width:calc(100% - 20px);
		}
	  }
	}
}



.resourcesBox{
    --resourceBoxLableHeight: 60px;
    --resourceBoxHeight: 340px; /* adjust/override per section as needed */
   
    width: 100%;
    
    height: auto;
    box-sizing: border-box;
    margin: 0;
    display: block;
    position: relative;
    border: 1px solid black;
	& .attr-row{
		padding: 5px 0;
		border-bottom: solid 1px #ddd;
		width: 100%;
		float:left;
		& .attr-category{
			padding: 3px 0;
			font-weight: 600;
			width: 40%;
			float:left;
		}
		& .attr-style{
			padding: 3px 0;
			width: 60%;
			float:left;
			& a{
				color: black;
				text-decoration: none;
			}
		}
	}
	&  input.selectRadio{
	    display: none;
	}
	& label{
	    display: list-item;
	    width: 100%;
	    /min-height:  var(--resourceBoxLableHeight);/
	    height:  var(--resourceBoxLableHeight);
	    border: 1px solid black;
	    border-width: 1px 0 0;
	    box-sizing: border-box;
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	    justify-content: Left;
	    padding: 0 1rem;
	    list-style-type: none; 
	    font-size: 1.2rem;
	    font-weight: bold;
	    position: relative;
	}
	& .selectRadio:checked ~ label{
	    padding: 0 2.8rem;
	}
	& .content{
	    padding: 0 1rem;
	}
	& .selectRadio:checked ~  .stage{
	    height: var(--resourceBoxHeight);
	    transition: height 0.5s ease-in-out;
	}
	& .contentCube .stage{
	    height: 0;
	    overflow: hidden;
	    transition: height 0.5s ease-in-out;
	}
}
.SocialBrand{
    font-size: 14px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    width: auto;
    gap: 5px;

    & .brandLogo { display: none; }

    & > a {
        width: 2em;
        height: 2em;
        overflow: hidden;
        gap: 0.2em;
        flex-grow: 0;

        & img {
            max-width: none !important;
            max-height: none !important;
            width: 100%;
            height: auto;
            transform: translateY(-51%);
            transition: transform 0.3s ease-in-out;
        }

        &:hover img {
            transform: translateY(0);
            transition: transform 0.3s ease-in-out;
        }
    }

    /* Down to Up variation */
    &.downUp > a img {
        transform: translateY(0);
    }

    &.downUp > a:hover img {
        transform: translateY(-51%);
    }

    & h4 {
        width: auto;
        text-transform: uppercase;
        font-weight: 600 !important;
    }

    @media screen and (max-width: 768px) {
        font-size: 1rem;
        padding-top: 0px !important;
        padding-bottom: 20px !important;

        & h4 {
            position: relative;
            width: 0;
            height: 0;
            white-space: nowrap;
            top: -3.5rem;
            left: 0.5em;
        }
    }
}
.full-width-content:nth-child(2n) {background-color: var(--background-full-alternate);}
.full-width-content:last-child {
  background-color: #fff;
}

.PageCarouselPaintArtWorks{
	& .carousel_header{
		& span{
			display: inline-block;
			padding-bottom: 10px;
		}
	}
}

.social-share-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 4px;
  justify-items: center;
  align-items: center;

  grid-template-areas:
	"social-header-left social-header-right"
	"social-icons social-pinterest";
}
.social-share-container > * {
  display: flex;
  justify-content: center; 
  align-items: center;    
}
@media (max-width: 768px) {
  .social-share-container {
	grid-template-columns: 1fr; /* одна колонка */
	grid-template-rows: auto auto auto auto; /* четыре строки */
	grid-template-areas:
	  "social-header-left"
	  "social-icons"
	  "social-header-right"
	  "social-pinterest";
  }
}

.social-header-left  { 
	grid-area: social-header-left;
	padding: 0 0 10px 0;
	font-weight:600;
	font-size:1rem;
}
.social-header-right { 
	grid-area: social-header-right;
	padding: 0 0 10px 0;
	font-weight:600;
	font-size:1rem;
}
.social-icons { grid-area: social-icons;}

.social-pinterest  { 
	grid-area: social-pinterest; 
	& .animated-submit{
		border: solid 1px rgba(0,0,0,1);
		color: rgba(0,0,0,1);
		border-radius: 25px;
		cursor:pointer;
		overflow: hidden;
		font-weight:600;
		width: auto;
		height: 40px;
		display: flex !important;
		justify-content: center;
		align-items: center;
		gap: 10px;
		& .submit-holder{
			color: rgba(0,0,0,1);
			cursor:pointer;
			translate: 0 0;
			transition: translate 0.2s;
			height: 40px;
			max-width:140px;
			font-weight:600;
			& .pinterest-1{
				padding: 0 5px;
				height: 40px;
				width:100%;
				display: flex;
				justify-content: left;
				align-items: center;
				gap: 5px;
				& a{
					color: rgba(0,0,0,1);
					text-decoration: none;
					& img{
						width: 30px;
						max-width: 100%;
						max-height: 100%;
						vertical-align: middle;
						border: none;
					}
				}
			}
			& .pinterest-2{
				padding: 0 5px;
				height: 40px;
				width:100%;
				display: flex;
				justify-content: left;
				align-items: center;
				gap: 5px;
				background-color: rgba(187,0,0,1);
				color: rgba(255,255,255,1);
				& a{
					color: rgba(255,255,255,1);
					text-decoration: none;
					& img{
						width: 30px;
						max-width: 100%;
						max-height: 100%;
						vertical-align: middle;
						border: none;
					}
				}
			}
		}
	}
}
.animated-submit .submit-holder:hover {
  translate: 0 -100%;
  transition: translate 0.2s;
}

.discover-container{
	width: calc(100% - 40px);
	cursor:pointer;
	& div{
		margin: 0 auto;
	}
}