.woocommerce,
.page-template-woocommerce-default {

	&.archive,
	&.post-type-archive-product,
	&.single-product {

		.site-content {
			@include s-r-10(padding-top);
			@include s-r-17(padding-bottom);
			max-width: var(--global--wide-content-width);
			margin-left: auto;
			margin-right: auto;
		}
	}
}

// Page Headings
.page.woocommerce-page {

	.wc-block-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-link {
		background: transparent;
	}

	.entry-header {
		@include s-r-9(padding-bottom);
	}
}

// Grid Layout Sidebar
.wc-block-components-sidebar-layout {
	margin: 0;

	@include breakpoint(md) {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: 3rem;
		grid-template-rows: auto;
	}
}

.wc-block-components-sidebar-layout .wc-block-components-main {
	margin: 0;
	padding-right: 0;
	width: 100%;

	@include breakpoint(md) {
		grid-column-start: 1;
		grid-column-end: 7;
	}
}

.wc-block-components-sidebar {
	background: var(--wp--custom--color--background-secondary);
	border-radius: var(--global--border-radius-xs);
	margin: 0;
	@include s-r-7(padding);
	width: 100%;
	height: fit-content;

	@include breakpoint(md) {
		margin-top: 0;
		grid-column-start: 7;
		grid-column-end: 13;
	}

	.wc-block-components-totals-wrapper {

		.wc-block-components-order-summary {
			h2 {
				padding: 0;
			}
		}
	}
}

.wc-block-components-shipping-calculator-address,
.wc-block-components-form,
.wc-block-components-form .wc-block-components-select,
.wc-block-components-select {

	.wc-block-components-text-input {
		@include s-r-4(margin-top);

		&.is-active {
			label {
				transform: translateY(4px) scale(.6);
			}
		}

		&.has-error {
			@include s-r-7(margin-bottom);
			outline: none;

			input:focus {
				outline: none;
				outline-offset: 0;
			}
		}
	}
}

.wc-block-components-text-input.has-error input:focus {
	outline: none;
	outline-offset: 0;
}

// WooCommerce forms
.woocommerce-page .wc-block-components-form .wc-block-components-checkout-step {
	padding-right: 0;
}

.wc-block-components-shipping-calculator-address .wc-block-components-text-input label, 
.wc-block-components-totals-coupon__form .wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input label {
	position: absolute;
	transform: translateY(1.25rem);
	line-height: var(--global--line-height-reset);
	color: var(--wp--custom--color--font-secondary);
	margin: 0 0 0 1.25rem;
	max-width: calc(100% - 32px);
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input,
.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-text-input,
.wc-block-components-form .wc-block-components-select {

	input[type=email],
	input[type=number],
	input[type=tel],
	input[type=text],
	input[type=url],
	.components-custom-select-control__button,
	.components-combobox-control__input {
		font-size: var(--global--font-size--body-m) !important;
		border-radius: var(--global--border-radius-xxs);
		border: 1px solid var(--global--color--form-border);
		line-height: var(--wp--custom--line-height--body);
		color: var(--wp--custom--color--font-secondary);
		font-family: inherit;
		margin: 0;
		box-sizing: border-box;
		height: 3.5rem;
		min-height: 0;
	}

	&.has-error {
		input,
		input:active,
		input:focus,
		input:hover {
			border-color: var(--global--color--error);
		}

		label {
			color: var(--global--color--error);
		}

		p {
			line-height: var(--global--line-height-reset);
			font-size: var(--global--font-size--body-xxs) !important;
			margin: 0;
			@include s-r-1(padding-top);
		}
	}

	&.is-active input[type="tel"],
	&.is-active input[type="url"],
	&.is-active input[type="text"],
	&.is-active input[type="number"],
	&.is-active input[type="email"] {
		padding: 1rem 0 0 1.25rem;
		border: 1px solid var(--global--color--form-border-active);
	}

	&.is-active label {
		transform: translateY(10px) scale(0.7);
		color: var(--wp--custom--color--font-tertiary);
	}
}

.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	height: 3.5rem;
}

.wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list, .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-form-token-field__suggestions-list {
	margin-top: 3.5rem;
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	display: none;
}

.wc-block-components-radio-control__option {
	display: flex;
}

.wc-block-components-radio-control__option,
.wc-block-components-checkbox {

	.wc-block-components-radio-control__input[type="radio"],
	.wc-block-components-checkbox__input[type="checkbox"] {
		position: relative;
		-webkit-appearance: none;
		border: 1px solid var(--global--color--form-border);
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		outline: 0;
		left: 0;
		top: 0;
		transform: none;

		&:focus {
			border-color: var(--global--color--form-border-active);
			box-shadow: 0 0 0 4px var(--global--color--form-glow);
			background: var(--global--color--form-border-active);
		}

		&:checked {
			border-color: var(--global--color--form-border-active);
			background: var(--global--color--form-border-active);
			fill: var(--global--color--form-select-fill);
			color: var(--global--color--form-select-fill);
		}

		&:not(:checked) + .wc-block-components-checkbox__mark {
			display: none;
		}
	}
}

.wc-block-checkout__payment-method .wc-block-components-radio-control__option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:first-child,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:last-child {
	padding-bottom: 0;
}

.wc-block-components-country-input {
	margin-top: 0;
	height: 3.75rem;
}

// Select input
.wc-block-components-form .wc-block-components-select,
.wc-block-components-select,
.components-custom-select-control {
	@include s-r-4(margin-top);
	height: 3.75rem;

	label.components-custom-select-control__label {
		font-size: var(--global--font-size--body-m) !important;
	}

	.components-custom-select-control__button {
		font-size: var(--global--font-size--body-m) !important;
		height: 3.75rem;
		padding: 1rem 0 0 1.25rem;
		line-height: var(--wp--custom--line-height--body);
		border: 1px solid var(--global--color--form-border);

		&:after {
			content: "";
			position: absolute;
			display: block;
			z-index: 100;
			right: var(--space-10);
			top: var(--space-02);
			bottom: var(--space-02);
			height: calc(100% - 16px);
			width: 1px;
			background: var(--global--color--form-border);
		}

		.components-custom-select-control__button-icon {
			box-sizing: border-box;
			height: 7px;
			width: 7px;
			border-style: solid;
			border-color: #000000;
			border-width: 0px 1px 1px 0px;
			transform: rotate(45deg);
			transition: border-width 150ms ease-in-out;
			top: calc(50% - 4px);
			right: 27px;

			path {
				display: none;
			}
		}

		&:hover {
			font-size: var(--global--font-size--body-m) !important;
			line-height: var(--wp--custom--line-height--body);
			transform: none;
		}

		&:focus,
		&:active,
		&:hover {
			font-size: var(--global--font-size--body-m) !important;
			line-height: var(--wp--custom--line-height--body);
			transform: none;
			height: 3.75rem;
			color: var(--wp--custom--color--font-secondary);
			padding: var(--space-04) 0 0 1.25rem;
		}
	}

	.components-custom-select-control__menu {
		padding: 0;
		margin: 0;
		font-size: var(--global--font-size--body-xs) !important;
		border-color: var(--global--color--form-border);

		.components-custom-select-control__item {
			padding: var(--space-02) 1.25rem;
		}
	}
}

.wc-block-checkout__form {

	.wc-block-components-checkout-step__container {

		.components-custom-select-control {
			margin-top: 0;
		}

		.wc-block-components-address-form {
			
			label.components-custom-select-control__label {
				line-height: var(--global--line-height-reset);
			}
		}

		.wc-block-components-state-input {
			
			label.components-custom-select-control__label {
				color: var(--wp--custom--color--font-secondary);
				line-height: var(--wp--custom--line-height--body);
			}
		}
	}
}


// Product block select menu
.woocommerce-ordering,
.wc-block-components-sort-select {
	display: flex;
	flex-direction: row-reverse;
	@include s-r-8(margin-bottom);
	position: relative;

	&:before {
		content:"";
		position: absolute;
		box-sizing: border-box;
		height: 7px;
		width: 7px;
		border-style: solid;
		border-color: #000000;
		border-width: 0px 1px 1px 0px;
		transform: rotate(45deg);
		transition: border-width 150ms ease-in-out;
		top: calc(50% - 4px);
		right: 1.688rem;
	}

	&:after {
		content: "";
		position: absolute;
		display: block;
		z-index: 100;
		right: var(--space-10);
		top: var(--space-02);
		bottom: var(--space-02);
		height: calc(100% - 1rem);
		width: 1px;
		background: var(--global--color--form-border);
	}

	.orderby,
	.wc-block-sort-select__select {
		height: var(--space-08);
		min-width: 12.5rem;
		background: var(--global--color--form-background);
		border: 1px solid var(--global--color--form-border);
		padding: var(--space-02) 87px var(--space-02) 1.25rem;

		&:active,
		&:focus {
			outline: none;
		}

		label {
			font-size: var(--global--font-size--body-m) !important;
			line-height: var(--wp--custom--line-height--body);
		}
	}
}

.form-round {

	.wc-block-components-totals-coupon__form .wc-block-components-text-input,
	.wc-block-components-form .wc-block-components-text-input,
	.wc-block-components-text-input,
	.wc-block-components-form .wc-block-components-select,
	.components-custom-select-control {
	
		input[type=email],
		input[type=number],
		input[type=tel],
		input[type=text],
		input[type=url],
		.components-custom-select-control__button {
			border-radius: var(--global--border-radius-round);
		}
	}
}

.wc-block-components-sort-select__select {
	padding: 0;
	border: none;
	border-radius: 0;

	@media (min-width: 80em) {
		padding: 0;
	}
}

.wc-block-components-validation-error {
	font-size: var(--global--font-size--body-xxs) !important;
	color: var(--global--color--error);
	max-width: 100%;
	position: absolute;
	top: calc(100% - 1px);
	white-space: normal;
}

.wc-block-components-product-metadata {

	&__description>p,
	.wc-block-components-product-metadata__variation-data {
		margin: 0;
		padding: 0;
	}
}

.wc-block-components-totals-item {
	@include s-r-6(margin-top);
}

.is-large .wc-block-components-sidebar {
	.wc-block-components-panel,
	.wc-block-components-totals-item {
		padding: 0;
	}
}

.wc-block-components-panel {

	&__button {
		padding: 0;

		&:hover {
			-webkit-transform: none;
			transform: none;
		}
	}

	&__content {
		padding-bottom: 0;
	}
}

// Sale Badges
.onsale,
.wc-block-components-sale-badge,
.wc-block-components-product-sale-badge {
	width: auto;
	border: 0;
	padding: 5px 12px;
	border-radius: var(--global--border-radius-s);
	line-height: var(--global--line-height-reset);
	text-transform: none;
	font-weight: normal;
}

.onsale,
.wc-block-components-product-sale-badge {
	position: absolute;
	z-index: 100;
	margin: 0;
	border-radius: var(--global--border-radius-s);
	color: var(--global--color--product-badge-color);
	background: var(--global--color--product-badge-background);
}

.wc-block-components-sale-badge {
	@include s-r-1(margin-top);
	background: none;
	border: 1px solid var(--global--color--product-badge-color);
}

.onsale {
	left: var(--space-04);
	top: var(--space-04);
}

.wc-block-components-product-image {

	.wc-block-components-product-sale-badge {
		&--align-left {
			left: var(--space-04);
			top: var(--space-04);
		}
		&--align-center {
			top: var(--space-04);
		}
		&--align-right {
			right: var(--space-04);
			top: var(--space-04);
		}
	}
}

// WC buttons
.wc-block-components-button:not(.is-link) {
	font-weight: normal;
	font-size: var(--global--font-size--body-m) !important;
	padding: 18px 20px;
}

// Notification wrappers
.woocommerce-page .entry-content .woocommerce-message,
.woocommerce-message,
.wc-block-components-notices .wc-block-components-notices__notice {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	display: flex;
	align-items: center;
	@include s-r-6(padding);
	border-radius: var(--global--border-radius-xxs);
	background: var(--global--color--notification-background);
	color: var(--global--color--notification);
	border: 1px solid var(--global--color--notification-border);

	@include breakpoint(sm) {
		@include s-r-9(margin-bottom);
	}
		
	&.woocommerce-error {
		background: var(--global--color--error-background);
		color: var(--global--color--error);
		border: 1px solid var(--global--color--error-border);
	}

	.components-notice__content {
		max-width:calc(100% - 2rem);
	}

	.components-notice__dismiss {

		&.has-icon {
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			min-height: auto;
			background: #000000;
			color: #ffffff;
			fill: #ffffff;
			border-radius: var(--global--border-radius-round);

			svg {
				max-width: 12px;
			}
		}
	}
}
.woocommerce-page .entry-content .woocommerce-message,
.woocommerce-message {
	margin-bottom: var(--space-04);

	@include breakpoint(sm) {
		margin-bottom: 0;
	}

	@include breakpoint(xl) {
		margin-left: auto;
		margin-right: auto;
	}

	a {
		@include s-r-2(margin-right);
	}
}

.woocommerce-notices-wrapper,
.woocommerce-notice {
	@include s-r-6(margin-bottom);

		div,
		ul {
		
		&.woocommerce-message {
			color: var(--global--color--notification);
			background: var(--global--color--notification-background);
			border: 1px solid var(--global--color--notification-border);
		}

		&.woocommerce-error {
			background: var(--global--color--error-background);
			color: var(--global--color--error);
			border: 1px solid var(--global--color--error-border);
		}

		a {
			@include s-r-2(margin-right);
		}
	}
}

.woocommerce-notice,
.woocommerce-notices-wrapper div,
.woocommerce-notices-wrapper ul {
	display: block;
	@include s-r-4(padding);
	@include s-r-6(margin-bottom);
	border-radius: var(--global--border-radius-xxs);
	list-style: none;
}

.woocommerce-notice--success {
	background: var(--global--color--success-background);
	color: var(--global--color--success);
	border: 1px solid var(--global--color--success-border);
}

.wp-block-ainoblocks-card {

	.woocommerce-notices-wrapper {
		@include s-r-6(margin-top);
	}
}

// Star Ratings Blog grid
.wc-block-grid__product-rating {
	font-size: 0.875rem;

	.star-rating,
	.wc-block-grid__product-rating__stars {
		margin: 0;

		span {
			max-height: 22px;
			letter-spacing: 1px;
		}

		&:before,
		span:before {
			content: '\2605\2605\2605\2605\2605';
			font-size: 0.875rem;
			letter-spacing: 1px;
		}
	}
}

// Woo Products Pagination
.wc-block-components-pagination {
	button {
		&:hover {
			transform: none;
		}
	}
}

// Coupon code form
.wc-block-components-sidebar {
	.wc-block-components-totals-coupon {

		&__content {
			@include s-r-6(padding-bottom);
		}
	
		&__form {
			margin-bottom: 0;
		}
	}
}

// Order Received
.woocommerce-order-overview {
	list-style: none;
	@include s-r-6(margin-bottom);
	background: var(--wp--custom--color--background-secondary);
	border-radius: var(--global--border-radius-xs);
	@include s-r-7(padding);
}

.woocommerce-order-details {
	background: var(--wp--custom--color--background-secondary);
	border-radius: var(--global--border-radius-xs);
	@include s-r-7(padding);
	@include s-r-6(margin-top);

	.woocommerce-table {
		margin-bottom: 0;

		thead th,
		td,
		th {
			padding-left: 0;
			padding-right: 0;
		}

		tr {
			border-bottom: 1px solid var(--global--color--border);
		}

		tr:last-child {
			border-bottom: none;
		}
	}
}

.woocommerce-customer-details {
	@include s-r-6(margin-top);
	background: var(--wp--custom--color--background-secondary);
	border-radius: var(--global--border-radius-xs);
	@include s-r-7(padding);

	address {
		@include s-r-2(margin-top);
	}
}