:root {
  interpolate-size: allow-keywords;
}

/* benefits */

.cro-benefits { 
	display: flex; flex-direction: column;
	.cro-icons:before { width: 100%; height: 100%; }
}
.cro-benefit-icon:empty { display: none; }
.elementor-widget-cro-benefits:not(.cro-benefits-inline-yes) .cro-benefits .cro-benefit { display: flex; }
.elementor-widget-cro-benefits.cro-benefits-inline-yes .cro-benefits {
	display: flex;
	flex-direction: column;
	.cro-benefit {
		flex: 1 1;
		flex-direction: row;
		div { display: inline; }
	}
}


/* faqs */

.cro-faq-list {
	display: flex;
	flex-direction: column;
	.cro-faq-item {
		overflow: hidden;
		border-width: 0;
		summary {
			display: flex; flex-direction: row;
			span { display: block; flex-grow:1; }
			i { align-self:center; font-size:14px; width: 14px; text-align:center; }
		}
		&[open] { .cro-faq-open { display: none; } }
		&:not([open]) { .cro-faq-close { display: none; } }
	}
}

.cro-faq-item::details-content { 
	block-size: 0;
	transition: block-size 300ms, content-visibility 300ms;
	transition-behavior: allow-discrete;
}
.cro-faq-item[open]::details-content {
	block-size: auto;
}


.cro-shipping-gauge {
	display: flex;
	flex-direction: column;
	& > span {
		margin-bottom: 10px;
	}
	progress {
		display: flex;
		width: 100%;
		height: 20px;
		border-radius: 10px;
		&::-webkit-progress-bar { background:#eee; border-radius: 10px; }
		&::-webkit-progress-value { background: #00ce1b; border-radius: 10px; }
	}
	.amount {
		font-weight: 600;
	}
	.cro-shipping-gauge-inner {
		display: flex;
		position: relative;
	}
	i {
		position: absolute;
		/* bottom: 0; */
		left: calc(attr(data-progress type(<percentage>)) - 8px);
		background: #fff;
		border-radius: 30px;
		scale: 2;
		align-self: center;
	}
	i:before {
		width: 100%;
		height: 100%;
	}
}

.jec-shipping-countdown {
	padding: 5px;
}

.cro-opening-times {
	display: flex;
    flex-direction: column;
	& > div {
		display: flex;
		border-bottom: 1px solid #eee;
        padding-bottom: 5px;
		span + span {
			flex-grow: 1;
			text-align: right;
		}
	}
}


.cro-price {
	align-content: center;
    flex-wrap: wrap;
	display: flex;
	align-items: baseline;
	del, del span {
		text-decoration: line-through;
	}
}


.cro-search form {
	display: flex;
	flex-direction: row;
	button { cursor: pointer; }
}


.cro-user-menu {
	display: flex;
	cursor: pointer;
}
.cro-user-menu.with-dropdown {
	[data-role="dropdown"] { font-size: 14px; }
    &:not(:hover) .cro-user-menu-dropdown {display:none!important;}
    .cro-user-menu-sleeve {
		position: relative;
		.cro-user-menu-dropdown {
			position: absolute;
			display: inline-block;
			z-index: 999;
			 padding-top: 10px;
			ul {
				display: flex;
				flex-direction: column;
				padding: 8px 0; margin: 0;
				background: #000;
				border: 1px solid #ccc;
				gap: 4px;
				li {
					display: block;
					a {
						display: block;
						padding: 0 12px;
						min-width: 130px;
						font-size:  90%;
						color: #fff;
					}
					a:hover {
						text-decoration: underline;
					}
				}
				li:not(:first-of-type) {
					border-top: 0;
				}
			}
		}
	}    
}
/* .cro-user-menu-face {
	flex-wrap: nowrap;
    display: flex;
	i { display: flex; align-items: center; }
}
.cro-user-menu-face > * { display: block; direction: ltr; }
.cro-user-menu.with-dropdown.right-handed a { text-align: right; } */


.cro-variations-selector {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 0;
	padding: 1px;
	figure {
		display: flex;
		align-items: center;
		gap: 10px;
		
		img { width: 32px; }	
		figcaption {
			display: flex;
    		flex-grow: 1;
		}
		/* figcaption:before {
			content: '';
			width: 12px; height: 12px;
			background-color: transparent;
			border: 1px solid #000;
			display: inline-block;
			border-radius: 20px;
			margin-right: 5px;
			position: relative;
			top: 1px;
		} */
	}
	.cro-variation-title {
		flex-grow: 1;
	}
	.cro-variations-selector-item {
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 8px;
		margin:0;
		background: #eee;
		text-align: left;
		&:hover { background: #dedede; cursor:pointer; }
	}
	.cro-variations-selector-item.cro-variation-selected {
		background: #B7F3FF;
		border: 1px solid #47D7E5;
		figure figcaption:before {
			background: #47D7E5;
			border-color: #47D7E5;
		}
	}

	&.grid-mode figcaption {
		flex-direction: column;
		align-items: center;
		gap: 3px;
		&:before { margin-right:0; }
	}
}

.cro-variations-selector.grid-mode {
    flex-direction: row;
    flex-wrap: wrap;
	gap: 10px;
	button {
		flex: 0 0 calc(33.333% - 10px);
		figure {
			display: flex;
			flex-direction: column;
		}
	}
}



/* hide traditional variation picker when variation selector widget is shown */
body:has(.cro-variations-selector) .variations {
	display:none!important;
}

.cro-savings:empty { display:none!important; }
.cro-savings { background-size: contain; }
.elementor-widget-cro-savings .elementor-widget-container { display: flex; }

.cro-savings-align-center  .elementor-widget-container {justify-content: center; }
.cro-savings-align-right   .elementor-widget-container { justify-content: right; }
.cro-savings-align-stretch .elementor-widget-container .cro-savings { flex-grow: 1; }



.cro-icons {
    display: inline-flex; /* Changed from inline-block for better centering */
    align-items: center;
    justify-content: center;
    width: 1em;   
    height: 1em;
    vertical-align: middle;
    margin-top: -2px;
}

/* 2. Fix the Pseudo-element */
[class^="cro-icons-"]:before, 
[class*=" cro-icons-"]:before {
    content: "";
    display: inline-block; /* Crucial: allows width/height to work */
    width: 1em;            /* Inherits size from the parent .custom-svg */
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}





/* megamenu-list */
.cro-megamenu-list {
    display: flex; flex-wrap: wrap;
    .cro-megamenu-slice {
		width: 100%;
        position: relative;
        h3 { position: absolute; }
        ul { margin-top: 15px; }
    }

	--base-width: calc(100% / var(--columns, 4));
    --gap-modifier: calc((var(--columns, 4) - 1) / var(--columns, 4));
	.cro-megamenu-slice {
		flex: 0 0 calc(var(--base-width) - (var(--gap, 0px) * var(--gap-modifier)));
		.cro-megamenu-header, ul { margin: 0; }
		.cro-megamenu-header, li { line-height: 1; }
		a {  display: block; }
	}
}

@media (max-width: 992px) {
	.cro-megamenu-list {
		--base-width: calc(100% / var(--columns-t, 4));
		--gap-modifier: calc((var(--columns-t, 4) - 1) / var(--columns-t, 4));
		.cro-megamenu-slice { flex: 0 0 calc(var(--base-width) - (var(--gap, 0px) * var(--gap-modifier))); }
	}
}
@media (max-width: 768px) {
	.cro-megamenu-list {
		--base-width: calc(100% / var(--columns-m, 4));
		--gap-modifier: calc((var(--columns-m, 4) - 1) / var(--columns-m, 4));
		.cro-megamenu-slice { flex: 0 0 calc(var(--base-width) - (var(--gap, 0px) * var(--gap-modifier))); }
	}
}





.elementor-widget-cro-buy-it-now .elementor-widget-container { display: flex; * { text-align: center;} }
.cro-bin-button-align-center  .elementor-widget-container {justify-content: center; }
.cro-bin-button-align-right   .elementor-widget-container { justify-content: right; }
.cro-bin-button-align-justify .elementor-widget-container .jcro-bin-button { flex-grow: 1; }
.jcro-bin-wrapper:has(.out-of-stock):has(.jcro-bin-button-notify) {
   .jcro-bin-button { display: none; }
   .jcro-bin-button-notify { display: inline-block!important; }
}


.jcro-next-day-delivery {
	display: block;
}