.clear{clear: both;}
.flex-centered-left {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 5px;
}
.d-none {
	display:none;
}

@media (min-width: 992px) {
	.gallery-img-lg { transition: all .2s ease-in-out; }
}

@media (min-width: 992px) {
	.gallery-img-lg:hover {  
		scale:1.2; 
	}
}


.buttonFlipper.preCart {
	--element-height: 40px;
	--button-bg-color: #000;
	--button-hover-bg-color: #000;
	--border-inner-hover: 1px solid #fff;
	font-size: 1.2rem;
	width: 100%;
	cursor:pointer;
  }

.icon-x-circle {
  --icon-size: 26px; 
  --icon-color: black;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  background: no-repeat center / contain
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8 4.646 10.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>');
  color: var(--icon-color); 
}
span.icon-x-circle {
  --icon-size: 26px; 
  --icon-color: black;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  background: no-repeat center / contain
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8 4.646 10.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>');
  color: var(--icon-color);
  cursor:pointer;  
}

.buttonFlipper{
    --element-height: 60px;
    
    --button-bg-color: #00000055;
    --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;
    --border-radius-inner: calc(var(--element-height) / 2);
    
    width: 300px;
    border: var(--border-outer);    
    border-radius: var(--border-radius-outer);
    position: relative;
    display: inline-block;
    height: var(--element-height);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: transparent;

    &  *{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
     & > span{
        background: var(--button-bg-color);
        color: var(--button-text-color);
        border: var(--border-inner);
        border-radius: var(--border-radius-inner);
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        transition: transform 0.3s ease;
        &::before {
            background: var(--button-hover-bg-color);
            color: var(--button-hover-text-color);
            border-radius: var(--border-radius-inner);
            border: var(--border-inner-hover);
            position: absolute;
            content: attr(data-text);
            top: calc(100% + 1px); 
            left: -1px; 
            width: calc(100% + 1px); 
            height: calc(100% + 1px); 
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
            box-sizing: border-box;
        }

    }
    & > input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }
    
    /* Hover effect */
    &:focus > span,
    &:hover > span {
        transform: translateY(-100%);
        &::before {
            transform: translateY(0);
        }
    }
}

.buttonFlipper.myCustomButton{
     --element-height: 30px;
    width: 150px;
    --button-bg-color: #d82626;
     
    --button-hover-bg-color: #0b520e;
    --border-inner-hover: 1px solid #f80b0b;
    
}

/* Universal icon system using pseudo-elements */
/* [class*="icon-"], */
.bi {
    --cart-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l.84 4.479 9.144-.459L13.89 4zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
    --arrow-circle-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z'/%3E%3C/svg%3E");
    --chevron-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-up' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/></svg>");
    --circle-fill: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-circle-fill' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/></svg>");
    --plus: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
    --dash: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/></svg>");
    --check-lg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-lg' viewBox='0 0 16 16'><path d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/></svg>");
    --arrow-90deg-right:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-90deg-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M14.854 4.854a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 4H3.5A2.5 2.5 0 0 0 1 6.5v8a.5.5 0 0 0 1 0v-8A1.5 1.5 0 0 1 3.5 5h9.793l-3.147 3.146a.5.5 0 0 0 .708.708z'/></svg>") ;
    --send: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-send' viewBox='0 0 16 16'><path d='M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z'/></svg>");
    --file-lock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-file-lock' viewBox='0 0 16 16'><path d='M8 5a1 1 0 0 1 1 1v1H7V6a1 1 0 0 1 1-1m2 2.076V6a2 2 0 1 0-4 0v1.076c-.54.166-1 .597-1 1.224v2.4c0 .816.781 1.3 1.5 1.3h3c.719 0 1.5-.484 1.5-1.3V8.3c0-.627-.46-1.058-1-1.224M6.105 8.125A.64.64 0 0 1 6.5 8h3a.64.64 0 0 1 .395.125c.085.068.105.133.105.175v2.4c0 .042-.02.107-.105.175A.64.64 0 0 1 9.5 11h-3a.64.64 0 0 1-.395-.125C6.02 10.807 6 10.742 6 10.7V8.3c0-.042.02-.107.105-.175'/><path d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1'/></svg>");
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    color: inherit;
    &::before {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: currentColor;
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    };
    &.bi-cart3::before{mask-image: var(--cart-path);-webkit-mask-image: var(--cart-path);};
    &.bi-arrow-left-circle::before {mask-image: var(--arrow-circle-left);-webkit-mask-image: var(--arrow-circle-left);};
    &.bi-arrow-right-circle::before {mask-image: var(--arrow-circle-left);-webkit-mask-image: var(--arrow-circle-left);transform: scaleX(-1);}
    &.bi-chevron-up::before {mask-image: var(--chevron-up);-webkit-mask-image: var(--chevron-up);};
    &.bi-circle-fill::before {mask-image: var(--circle-fill);-webkit-mask-image: var(--circle-fill);};
    &.bi-plus::before {mask-image: var(--plus);-webkit-mask-image: var(--plus);};
    &.bi-dash::before {mask-image: var(--dash);-webkit-mask-image: var(--dash);};
    &.bi-check-lg::before {mask-image: var(--check-lg);-webkit-mask-image: var(--check-lg);};
    &.bi-arrow-90deg-right::before {mask-image: var(--arrow-90deg-right);-webkit-mask-image: var(--arrow-90deg-right);};
    &.bi-arrow-90deg-left::before {mask-image: var(--arrow-90deg-right);-webkit-mask-image: var(--arrow-90deg-right);transform: scaleX(-1);};
    &.bi-send::before {mask-image: var(--send);-webkit-mask-image: var(--send);};
    &.bi-file-lock::before {mask-image: var(--file-lock);-webkit-mask-image: var(--file-lock);};
}

user-likeheckbox {
	--width: 28px;
	--padding: 5px 10px;

	--inactive-fill-color: none;
	--inactive-strock-color: #000;
	--inactive-strok-width: 1px;

	--active-strok-width: 1px;
	--active-strock-color: #000;
	--active-fill-color: #000;

}

@media screen and (max-width: 750px) {
	user-likeboxcounter{
		--width:24px;
		
		--padding: 0px 0px 0 0;
		--inactive-fill-color:none;
		--inactive-strock-color:#000;
		--inactive-strok-width:1px;
		
		--inactive-indicator-visiblility: hidden;
		--inactive-indicator-bg-color: #EEE;

		--active-strok-width:1px;
		--active-strock-color:#000;
		--active-fill-color:#000;

		--active-indicator-bg-color:rgba(187, 0, 0, 1);
		
		--indicator-top:-6px;
		--indicator-right:-12px;
		--indicator-min-size:1rem;
		--indicator-font-size: 0.6em ;
		--indicator-font-family:  Arial, Helvetica, sans-serif;	
	}
}
.hidden {
  display: none;
}