/*******************************************************************************
********************************************************************************
PRODUCT
********************************************************************************
*******************************************************************************/
.cerade__product
{

}
/* Blur title background */
.product__title__filter
{
  backdrop-filter: var(--cerade-blur);
}

/*******************************************************************************
FEATURED IMAGE
*******************************************************************************/
.cerade__product .woocommerce-product-gallery
{
	margin-bottom: 0px !important;
}

/*******************************************************************************
CONFIGURTOR
*******************************************************************************/

/*******************************************************************************
Bugfixes
*******************************************************************************/
/* Hide price after variation is selected on configurable products */
.cerade__product__configurable .woocommerce-variation.single_variation
{
	display: none !important;
}
/*******************************************************************************
Variations - layout
*******************************************************************************/
/* Remove bottom spacing after variation selector */
.cerade__product table.variations
{
	margin-bottom: 0px !important;
}
/* Flexify table rows and add spacing */
.cerade__product table.variations tr
{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 20px;
}
/* Widen titles and content because of flex */
.cerade__product table.variations th.label,
.cerade__product table.variations td.value
{
	width: 100%;
}
/*******************************************************************************
Variations - titles
*******************************************************************************/
/* Make variation title look like an accordion */
.cerade__product table.variations th.label
{
	display: flex;
	justify-content: space-between;
	background-color: var(--cerade-color-white);
	border-radius: 50px;
	padding: 10px;
	text-align: left;
	line-height: 24px !important;
}
.cerade__product table.variations th.label .cerade__product__variation__order__number
{
	display: inline-block;
	height: 35px;
	width: 35px;
	margin-right: 10px;
	background: var(--cerade-color-orange-light);
	border-radius: 100px;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 18px;
	font-weight: 900;
	line-height: 35px;
	text-align: center;
	color: var(--cerade-color-white);
}
.cerade__product table.variations th.label label
{
	font-family: 'Open Sans', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--cerade-color-orange-light) !important;
	line-height: 1.5em !important;
}

/* Make variation title behave like an accordion */
.cerade__product table.variations tr.active th.label
{
	background-color: var(--cerade-color-orange-light);
}
.cerade__product table.variations tr.active th.label .cerade__product__variation__order__number
{
	background: var(--cerade-color-white);
	color: var(--cerade-color-orange-light);
}
.cerade__product table.variations tr.active th.label label
{
	color: var(--cerade-color-white) !important;
}

/*******************************************************************************
Variations - content
*******************************************************************************/
/* Make the variation content look like an accordion */
.cerade__product table.variations tr td.value
{
	display: none;
	margin: 0px 20px;
	padding: 20px !important;
	background: var(--cerade-color-white);
	border-radius: 0px 0px 10px 10px;
}

/* Make the variation content behave like an accordion */
.cerade__product table.variations tr.active td.value
{
	display: flex;
}

/* Align variation items */
.cerade__product table.variations tr td.value ul.single-product-variable-items
{
	padding-left: 0px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

/* Hide disabled items instead of setting visibility to hidden */
.cerade__product table.variations tr td.value ul.single-product-variable-items li.disabled
{
	display: none;
}

/* Round-up variation buttons */
.cerade__product table.variations tr td.value ul.single-product-variable-items li.button-variable-item
{
	height: auto !important;
	border-radius: 100px !important;
	padding: 10px 10px !important;
	margin: 0px !important;
	cursor: pointer !important;
}

/* Reduce height of variation button text */
.cerade__product table.variations tr td.value ul.single-product-variable-items li.button-variable-item .variable-item-span
{
	line-height: 1.5em !important;
}

/* Remmove padding around images */

/* Round-up variation colors */
.cerade__product table.variations tr td.value ul.single-product-variable-items li.color-variable-item,
.cerade__product table.variations tr td.value ul.single-product-variable-items li.color-variable-item .variable-item-span-color
{
	border-radius: 100px !important;
}

/* Change background color of variation colors so white pops-out */
.cerade__product table.variations tr td.value ul.single-product-variable-items li.color-variable-item,
.cerade__product table.variations tr td.value ul.single-product-variable-items li.image-variable-item
{
	background-color: #fafafa !important;
	padding: 0px !important;
}

/* Remove reset link and give them breathing space*/
.cerade__product table.variations tr td.value a.reset_variations
{
	display: none !important;
}

/*******************************************************************************
Configurations
*******************************************************************************/
/*******************************************************************************
Configurations - tooltips
*******************************************************************************/
.cerade__product .wcpa_tooltip_icon
{
	width: 18px;
	height: 18px;
	margin: 0px;
	margin-left: 5px;
	padding: 8px;
	background: var(--cerade-color-orange-light);
	border: 0px;
	border-radius: 100px;
	color: var(--cerade-color-gray-light);
	font-size: 14px;
	font-weight: 700;
}
/*******************************************************************************
Configurations - layout
*******************************************************************************/
.cerade__product .wcpa_form_outer
{
	margin: 0px !important;
}

@media screen and (max-width: 768px)
{
	.cerade__product .wcpa_row
	{
		flex-direction: column;
	}

	.cerade__product .wcpa_row .wcpa_field_wrap
	{
		width: 100% !important;
		padding: 0px !important;
	}
}

/*******************************************************************************
Configurations - titles
*******************************************************************************/
/* Make the configuration title look like an accordion */
.cerade__product .wcpa_section
{
	margin-bottom: 20px !important;
}
.cerade__product .wcpa_section_head
{
	background-color: var(--cerade-color-white) !important;
	color: var(--cerade-color-orange-light) !important;
	padding: 10px !important;
	border-radius: 50px !important;
	pointer-events: none !important;
}
.cerade__product .wcpa_section_head .wcpa_sec_title .cerade__product__configuration__order__number
{
	display: inline-block;
	height: 35px;
	width: 35px;
	margin-right: 10px;
	background: var(--cerade-color-orange-light);
	border-radius: 100px;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 18px;
	font-weight: 900;
	line-height: 35px;
	text-align: center;
	color: var(--cerade-color-white);
}
.cerade__product .wcpa_section_head .wcpa_sec_title
{
	font-family: 'Open Sans', sans-serif !important;
	color: var(--cerade-color-orange-light) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.5em !important;
}
.cerade__product .wcpa_section.wcpa_accordion_open .wcpa_section_head
{
	background-color: var(--cerade-color-orange-light) !important;
	color: var(--cerade-color-white) !important;
}
.cerade__product .wcpa_section.wcpa_accordion_open .wcpa_section_head .cerade__product__configuration__order__number
{
	background: var(--cerade-color-white) !important;
	color: var(--cerade-color-orange-light) !important;
}
.cerade__product .wcpa_section.wcpa_accordion_open .wcpa_section_head .wcpa_sec_title
{
	color: var(--cerade-color-white) !important;
}

/* Hide default plugin open and close icons until JS can remove it */
.cerade__product .wcpa_section_head .wcpa_toggle
{
	display: none !important;
}

/*******************************************************************************
Configurations - content
*******************************************************************************/
.cerade__product .wcpa_section_body
{
	margin: 0px 20px;
	padding: 20px !important;
	background: var(--cerade-color-white);
	border-radius: 0px 0px 10px 10px;
}

/* Hidden fields should not have margin or borders */
.cerade__product .wcpa_section_body .wcpa_type_hidden
{
	margin-bottom: 0px !important;
}
.cerade__product .wcpa_section_body .wcpa_type_hidden input
{
	border: 0px !important;
}

/* Repossition label */
.cerade__product .wcpa_section_body .wcpa_type_number label
{
	margin-left: 15px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 14px !important;
	line-height: 21px !important;
	font-weight: 500 !important;
	color: var(--cerade-color-black) !important;
}

/* Style input */
.cerade__product .wcpa_section_body .wcpa_type_number input
{
	padding: 10px 15px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 500 !important;
	background-image: url('https://cerade.hr/wp-content/themes/cerade/assets/public/icons/ui/measurement-unit-centimeters.svg');
	background-size: 20px;
	background-position: center right 15px;
	background-repeat: no-repeat;
	border-radius: 100px !important;
}

/* Style error */
.cerade__product .wcpa_section_body .wcpa_field_error
{
	margin-left: 15px !important;
}
.cerade__product .wcpa_section_body .wcpa_field_error p
{
	font-family: 'Roboto', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--cerade-color-orange-dark) !important;
	line-height: 21px !important;
}

/*******************************************************************************
Configurations - dimension sketches
*******************************************************************************/
.cerade__product__configurator__dimensions__additional__content .wcpa_field
{
	padding: 10px !important;
	margin-bottom: 25px !important;
	background: #f1f1f1 !important;
	border-radius: 10px !important;
	font-weight: 500 !important;
}
.cerade__product__configurator__dimensions__additional__content .wcpa_field img
{
	margin-bottom: 10px !important;
	border-radius: 10px !important;
}
/*******************************************************************************
Configurations - checkboxes
*******************************************************************************/
/* Widen label so price can go on the right side */
.cerade__product .wcpa_checkbox label
{
	width: 100%;
}

/* Reorder items so the price can go on right */
.cerade__product .wcpa_checkbox label input
{
	order: 1;
}
.cerade__product .wcpa_checkbox label .wcpa_check
{
	order: 2;
}
.cerade__product .wcpa_checkbox label span:not(.wcpa_check, .wcpa_tooltip_icon, .wcpa_option_price)
{
	order: 3;
}
.cerade__product .wcpa_checkbox label .wcpa_tooltip_icon
{
	order: 4;
}
.cerade__product .wcpa_checkbox label .wcpa_option_price
{
	order: 5;
	margin-left: auto;
	margin-right: 0px;
}

/*******************************************************************************
PRICE
*******************************************************************************/
/*******************************************************************************
Product addons
*******************************************************************************/
/* Hide unnecessary text*/
.cerade__product .wcpa_price_summary h4
/* .cerade__product .wcpa_price_summary .wcpa_total span:not(.wcpa_price_outer, .wcpa_price_outer span) */
{
	display: none;
}

/* Make content vertical, reduce spacing and hide divider line */
.cerade__product .wcpa_price_summary .wcpa_total
{
	flex-direction: column !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 5px;
	padding: 0px;
	margin: 0px;
	margin-bottom: 20px !important;
	border-top: 0px !important;
}

/* Define price description text */
.cerade__product .wcpa_price_summary .wcpa_total > span:not(.wcpa_price_outer)
{
	font-family: 'Roboto', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 14px !important;
	color: var(--cerade-color-gray-darker) !important;
}
/* Define price */
.cerade__product .wcpa_price_summary .wcpa_total .wcpa_price_outer
{
	font-family: 'Roboto', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 18px !important;
	color: var(--cerade-color-black) !important;
}

/*******************************************************************************
Regular price
*******************************************************************************/
.cerade__product .price
{
	display: inline-block;
	margin-bottom: 20px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 18px !important;
	color: var(--cerade-color-black) !important;
}

/*******************************************************************************
ADD TO CART
*******************************************************************************/
/* Vertically align quantity selector */
.cerade__product .quantity
{
	display: flex;
	align-items: center;
}

/* Override global quantity selector colors */
.cerade__product .quantity .qty-btn
{
	background-color: var(--cerade-color-white) !important;
}
.cerade__product .quantity input
{
	background: transparent !important;
}
.cerade__product .quantity .qty-btn:hover
{
	background-color: var(--cerade-color-black) !important;
	color: var(--cerade-color-white) !important;
}
/*******************************************************************************
ADDITIONAL INFO
*******************************************************************************/
/*******************************************************************************
Tabs
*******************************************************************************/
/* Make tabs look like tabs */
.cerade__product .cerade__product__additional_info .wc-tabs
{
	margin: 0px 0px 10px 0px !important;
	padding: 0px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px;
	justify-content: flex-start !important;
}
.cerade__product .cerade__product__additional_info .wc-tabs li
{
	margin: 0px !important;
	border: 0px !important;
	border-radius: 100px !important;
}

/* Handle hover colors */
.cerade__product .cerade__product__additional_info .wc-tabs li:hover a
{
	border-radius: 100px;
	background: var(--cerade-color-black) !important;
	color: var(--cerade-color-white) !important;
}

/*******************************************************************************
Panel
*******************************************************************************/
/* Make tab panels looks like tab panels */
.cerade__product .cerade__product__additional_info .wc-tab
{
	background: var(--cerade-color-white) !important;
	padding: 20px !important;
	border: 0px !important;
}