/* Color Circle */

.uyir-attribute .uyir-color-option{

width:28px;
height:28px;
border-radius:50%;
padding:0;
border:2px solid #ddd;
cursor:pointer;
position:relative;

}



.uyir-attribute .uyir-color-option:hover{

transform:scale(1.1);

}



.uyir-attribute .uyir-color-option.active{

border:2px solid #111;

}



.uyir-attribute .uyir-color-option.active:after{

content:"";
position:absolute;
inset:-5px;
border:1px solid #111;
border-radius:50%;

}



/* Size Button */

.uyir-attribute .uyir-option:not(.uyir-color-option){

padding:8px 16px;
border-radius:25px;
/*background:#fff;*/
border:1px solid #ddd;
font-size:13px;

}



/*.uyir-attribute .uyir-option.active{*/

/*background:#111;*/
/*color:#fff;*/

/*}*/

.product-image{
    position:relative;
    overflow:hidden;
}


.uyir-image-wrap{
    position:relative;
    overflow:hidden;
}


.uyir-image-wrap img{
    width:100%;
    display:block;
    transition:0.5s ease;
}


.uyir-hover-image{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;

}


.product-image:hover .uyir-main-image{

    opacity:0;

}


.product-image:hover .uyir-hover-image{

    opacity:1;

}
.uyir-shop-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    align-items:start;
}

.uyir-sidebar{
    position:sticky;
    top:100px;
    background:#fff;
    border:1px solid #eee;
    padding:20px;
    border-radius:10px;
}

.uyir-products ul.products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin:0;
    padding:0;
}

.uyir-products ul.products::before,
.uyir-products ul.products::after{
    display:none;
}

.uyir-products ul.products li.product{
    width:100%;
    margin:0;
    float:none;
}
.uyir-filter-box{
margin-bottom:35px;
}

.uyir-filter-box h4{
font-size:16px;
margin-bottom:15px;
}

.uyir-color-filter{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.uyir-filter-color{
width:28px;
height:28px;
border-radius:50%;
border:2px solid #ddd;
cursor:pointer;
}

.uyir-filter-color.active{
border:2px solid #000;
box-shadow:0 0 0 2px #fff inset;
}

.uyir-size-filter{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.uyir-filter-size{
padding:8px 14px;
border:1px solid #ddd;
background:#fff;
cursor:pointer;
border-radius:30px;
}

.uyir-filter-size.active{
background:#111;
color:#fff;
}

#uyir-price{
width:100%;
}

.uyir-price-value{
margin-top:10px;
font-weight:600;
}
/* ==========================================================================
   Product card - variations form
   ========================================================================== */

.uyir-variations-form {
	margin: 0;
	padding: 0;
}

.uyir-variation-box {
	margin: 10px 0;
}

.uyir-attribute {
	margin-bottom: 10px;
}

.uyir-attribute label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	margin-bottom: 6px;
}

.uyir-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Native <select> stays functional for keyboard/screen-reader users but is
   visually replaced by the swatch buttons. */
.uyir-native-select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Color Circle */

.uyir-attribute .uyir-color-option {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	padding: 0;
	border: 2px solid #ddd;
	cursor: pointer;
	position: relative;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.uyir-attribute .uyir-color-option:hover:not(:disabled) {
	transform: scale(1.1);
}

.uyir-attribute .uyir-color-option.active {
	border: 2px solid #111;
}

.uyir-attribute .uyir-color-option.active:after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid #111;
	border-radius: 50%;
}

/* Size Button */

.uyir-attribute .uyir-option:not(.uyir-color-option) {
	padding: 8px 16px;
	border-radius: 25px;
	background: #fff;
	border: 1px solid #ddd;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uyir-attribute .uyir-option.active:not(.uyir-color-option) {
	background: #111;
	color: #fff;
	border-color: #111;
}

/* Disabled / unavailable combinations */

.uyir-attribute .uyir-option.uyir-unavailable,
.uyir-attribute .uyir-option:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.uyir-attribute .uyir-color-option.uyir-unavailable::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(to top right, transparent 46%, #999 48%, #999 52%, transparent 54%);
}

/* Stock status */

.uyir-stock-status {
	font-size: 12px;
	margin: 6px 0;
	min-height: 16px;
}

.uyir-stock-status .in-stock {
	color: #2a7a2a;
}

.uyir-stock-status .out-of-stock {
	color: #c0392b;
}

/* Add to cart button */

.uyir-cart-btn {
	position: relative;
}

.uyir-cart-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.uyir-cart-btn.loading {
	color: transparent !important;
}

.uyir-cart-btn.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: uyir-spin 0.6s linear infinite;
}

@keyframes uyir-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Product image / hover swap
   ========================================================================== */

.product-image {
	position: relative;
	overflow: hidden;
}

.uyir-image-wrap {
	position: relative;
	overflow: hidden;
}

.uyir-image-wrap img {
	width: 100%;
	display: block;
	transition: 0.5s ease;
}

.uyir-hover-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
}

.product-image:hover .uyir-main-image {
	opacity: 0;
}

.product-image:hover .uyir-hover-image {
	opacity: 1;
}

/* ==========================================================================
   Shop layout
   ========================================================================== */

.uyir-shop-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	align-items: start;
}

.uyir-sidebar {
	position: sticky;
	top: 100px;
	background: #fff;
	border: 1px solid #eee;
	padding: 20px;
	border-radius: 10px;
}

.uyir-products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	margin: 0;
	padding: 0;
}

.uyir-products ul.products::before,
.uyir-products ul.products::after {
	display: none;
}

.uyir-products ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
}

/* ==========================================================================
   Sidebar filters
   ========================================================================== */

.uyir-filter-box {
	margin-bottom: 35px;
}

.uyir-filter-box h4 {
	font-size: 16px;
	margin-bottom: 15px;
}

.uyir-color-filter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.uyir-filter-color {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #ddd;
	cursor: pointer;
}

.uyir-filter-color.active {
	border: 2px solid #000;
	box-shadow: 0 0 0 2px #fff inset;
}

.uyir-size-filter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.uyir-filter-size {
	padding: 8px 14px;
	border: 1px solid #ddd;
/* 	background: #fff; */
	cursor: pointer;
	border-radius: 30px;
}

.uyir-filter-size.active {
	background: #111;
	color: #fff;
}

#uyir-price {
	width: 100%;
}

.uyir-price-value {
	margin-top: 10px;
	font-weight: 600;
}


/* ==========================================================================
   Product card - native synchronization structures layout implementation
   ========================================================================== */

.uyir-variations-form {
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
}

.uyir-variation-box {
	margin: 12px 0;
	display: block;
}

.uyir-attribute {
	margin-bottom: 12px;
	position: relative;
}

.uyir-attribute .uyir-attr-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
	margin-bottom: 6px;
}

.uyir-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

/* Native form inputs hidden from screen views but optimized fully for access loops */
.uyir-native-select,
select.native-select-element {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Color Circle Configuration Mapping Rules */
.uyir-attribute .uyir-color-option {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	padding: 0;
	border: 2px solid #e0e0e0;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.2s ease;
	outline: none;
}

.uyir-attribute .uyir-color-option:hover:not(.disabled):not(:disabled) {
	transform: scale(1.12);
	border-color: #999;
}

.uyir-attribute .uyir-color-option.active {
	border: 2px solid #000000;
}

.uyir-attribute .uyir-color-option.active::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid #000000;
	border-radius: 50%;
}

/* Sizing Swatch Visual Boxes Rules Layout */
.uyir-attribute .uyir-option:not(.uyir-color-option) {
	padding: 6px 14px;
	border-radius: 20px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	font-size: 12px;
	font-weight: 600;
	color: #333333;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	outline: none;
	min-width: 36px;
	text-align: center;
}

.uyir-attribute .uyir-option:not(.uyir-color-option):hover:not(.disabled):not(:disabled) {
	border-color: #888888;
	background: #fafafa;
}

.uyir-attribute .uyir-option.active:not(.uyir-color-option) {
	background: #111111;
	color: #ffffff;
	border-color: #111111;
}

/* System Exception States (Disabled / Cross-out Indicators) */
.uyir-attribute .uyir-option.uyir-unavailable,
.uyir-attribute .uyir-option.disabled,
.uyir-attribute .uyir-option:disabled {
	opacity: 0.25 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	transform: none !important;
}

.uyir-attribute .uyir-color-option.uyir-unavailable::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #000000;
	transform: rotate(-45deg);
}

/* Contextual Loop Messaging Fields */
.uyir-stock-status,
.woocommerce-variation.single_variation {
	font-size: 12px;
	font-weight: 500;
	margin: 8px 0;
	min-height: 18px;
}

.uyir-stock-status .in-stock,
.woocommerce-variation-availability .in-stock {
	color: #1e7e34;
}

.uyir-stock-status .out-of-stock,
.woocommerce-variation-availability .out-of-stock {
	color: #bd2130;
}

/* Custom Action Triggers / Spinners Layout Configurations */
.uyir-cart-btn {
	position: relative;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

.uyir-cart-btn.disabled,
.uyir-cart-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.uyir-cart-btn.loading {
	color: transparent !important;
}

.uyir-cart-btn.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: uyirCoreSpin 0.6s linear infinite;
}

@keyframes uyirCoreSpin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Product images interactions layer
   ========================================================================== */

.product-image {
	position: relative;
	overflow: hidden;
}

.uyir-image-wrap {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
}

.uyir-image-wrap img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.uyir-hover-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 2;
}

.product-image:hover .uyir-hover-image {
	opacity: 1;
}

/* ==========================================================================
   Global Store Arch Layout Definitions 
   ========================================================================== */

.uyir-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 30px;
	align-items: start;
}

.uyir-sidebar {
	position: sticky;
	top: 120px;
	background: #ffffff;
	border: 1px solid #f0f0f0;
	padding: 24px;
	border-radius: 8px;
}

.uyir-products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uyir-products ul.products::before,
.uyir-products ul.products::after {
	display: none !important;
}

.uyir-products ul.products li.product.uyir-product-card-li {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: block;
}

.woocommerce-js ul.products li.product h3

 {
	 color:#000;
}

/* ==========================================================================
   Media Responsiveness Grid Matrix View Adaptations 
   ========================================================================== */

@media (max-width: 1200px) {
	.uyir-products ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 991px) {
	.uyir-shop-layout {
		grid-template-columns: 1fr;
	}
	.uyir-sidebar {
		position: relative;
		top: 0;
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {
	.uyir-products ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
}

@media (max-width: 480px) {
	.uyir-products ul.products {
		grid-template-columns: 1fr;
	}
}
.uyir-sale-badge{
	position:absolute;
	left:20px;
	top:20px;
}
.woocommerce .elementor-1588 .elementor-element.elementor-element-1737121 form.cart .variations
 {
    width: 100%;
}
.uyir-shop-layout{
	padding:60px 0px;
}
.uyir-shop-layout .custom-product-card{
	background-color:transparent;
}
#uyir-collection-sec .custom-product-card a{
	color:#fff;
}
#uyir-collection-sec .uyir-attr-label{
	color:#fff;
}