:root {
	--product-grid-width: 1280px;
	--product-grid-width-when-sidebar: 896px;
	--product-grid-item-min-width: 0.95; /* Arvot 0-1 väliltä. Mitä pienempi arvo sitä enemmän grid-item kutistuu ennen kuin palstoitus muuttuu */
	--product-grid-column-gap: 3%;
	--product-grid-row-gap: 2em;
	--product-grid-image-aspect-ratio: 1/1;
	--product-grid-image-border: 1px solid #dadada !important;
	
	--on-sale-background: #ffcb00;
	--on-sale-color: #000000;
} 


/***************************************************************************/


.wc-block-mini-cart__badge {
	color: #fff;
	font-size: 0.9em;
	font-weight: 600;
	top: 0.25rem;
}
.woocommerce div.product {
  margin-block-start: 0;
}
.woocommerce.wc-block-catalog-sorting select.orderby {
  font-size: inherit;
  background: #fff;
  border: 1px solid #999;
  padding: 0.5em;
}
.woocommerce div.product form.cart table.variations th.label {
	vertical-align: top;
	padding-top: 0.67rem;
}
.wc-block-components-product-image {
	border: var(--product-grid-image-border);
	aspect-ratio: var(--product-grid-image-aspect-ratio);
}
.wc-block-components-product-image img {
	aspect-ratio: var(--product-grid-image-aspect-ratio);
}
.woocommerce-account .wp-block-post-title, .woocommerce-account main .woocommerce, .woocommerce-cart .wp-block-post-title, .woocommerce-cart main .woocommerce, .woocommerce-checkout .wp-block-post-title, .woocommerce-checkout main .woocommerce {
	max-width: var(--wp--style--global--wide-size);
}
.wp-block-woocommerce-checkout {
	padding-top: 0;
}


/*************** PRODUCT-PAGE ***************/
.woocommerce .wp-block-woocommerce-product-image-gallery {
	max-width: 90vw;
}
.woocommerce div.product div.images .flex-control-thumbs {
	margin: 0.25em 0 0;
	display: grid;
	gap: 0.25em;
	grid-template-columns: repeat(auto-fill, minmax(min(5em, 100%), 1fr));
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: inherit;
}
.woocommerce .quantity input[type="number"] {
	width: 6em;
}
.woocommerce-tabs {
	padding-top: 0;
}
.woocommerce-Tabs-panel {
	padding-top: 0.5em;
	margin-left: 0;
}


/*************** ON SALE ***************/
.woocommerce span.onsale, .editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right, .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right::before {
	background-color: var(--on-sale-background);
	color: var(--on-sale-color);
	min-height: 3.5em;
	min-width: 3.5em;
	padding: .202em;
	font-size: 0.9em;
	font-weight: 700;
	top: -.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border-radius: 100%;
}
.product.sale {
	position: relative;
}
.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right, .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
	visibility: hidden;
}
.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right, .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right::before {
	content: "Ale!";
	position: absolute;
	z-index: 9;
	top: -1.25em;
	right: -1.25em;
	visibility: visible;
}


/*************** PRODUCT-GRID ***************/
.product {
  display: grid;
}
.wc-block-product-template__responsive {
  gap: var(--product-grid-row-gap) var(--product-grid-column-gap);
}
.wc-block-product-template__responsive.columns-2 {
	--product-grid-min-width-calc: calc((var(--product-grid-width) * 0.5 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(50% - var(--product-grid-column-gap))),1fr));
}
.wc-block-product-template__responsive.columns-3 {
	--product-grid-min-width-calc: calc((var(--product-grid-width) * 0.333333 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(33.33333% - var(--product-grid-column-gap))),1fr));
}
.wc-block-product-template__responsive.columns-4 {
	--product-grid-min-width-calc: calc((var(--product-grid-width) * 0.25 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(25% - var(--product-grid-column-gap))),1fr));
}
.wc-block-product-template__responsive.columns-5 {
	--product-grid-min-width-calc: calc((var(--product-grid-width) * 0.2 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(20% - var(--product-grid-column-gap))),1fr));
}
.wc-block-product-template__responsive.columns-6 {
	--product-grid-min-width-calc: calc((var(--product-grid-width) * 0.166667 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(16.66667% - var(--product-grid-column-gap))),1fr));
}

body:has(.woo-sidebar) .wc-block-product-template__responsive.columns-2 {
	--product-grid-min-width-calc: calc((var(--product-grid-width-when-sidebar) * 0.5 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(50% - var(--product-grid-column-gap))),1fr));
}
body:has(.woo-sidebar) .wc-block-product-template__responsive.columns-3 {
	--product-grid-min-width-calc: calc((var(--product-grid-width-when-sidebar) * 0.333333 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(33.33333% - var(--product-grid-column-gap))),1fr));
}
body:has(.woo-sidebar) .wc-block-product-template__responsive.columns-4 {
	--product-grid-min-width-calc: calc((var(--product-grid-width-when-sidebar) * 0.25 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(25% - var(--product-grid-column-gap))),1fr));
}
body:has(.woo-sidebar) .wc-block-product-template__responsive.columns-5 {
	--product-grid-min-width-calc: calc((var(--product-grid-width-when-sidebar) * 0.2 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(20% - var(--product-grid-column-gap))),1fr));
}
body:has(.woo-sidebar) .wc-block-product-template__responsive.columns-6 {
	--product-grid-min-width-calc: calc((var(--product-grid-width-when-sidebar) * 0.166667 - var(--product-grid-column-gap)) * var(--product-grid-item-min-width));
	grid-template-columns: repeat(auto-fill,minmax(max(var(--product-grid-min-width-calc),calc(16.66667% - var(--product-grid-column-gap))),1fr));
}