.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
	padding: 0.375em 2.5em 0.375em 1.25em;
    background-color: transparent;
    color: inherit;
    font-size: var(--typo-font-size-default);
    border-radius: var(--typo-border-radius);
    border: solid 1px currentColor;
    line-height: 1.5;
    position: relative;
	margin: 0 0.5em 0.5em 0;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover {
	background-color: var(--typo-color-blue);
	color: inherit;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	background-color: var(--typo-color-light-grey);
	padding: calc(var(--typo-gap) * 2);
	border-radius: var(--typo-border-radius);
	border: 1px solid var(--typo-color-light-grey);
	overflow: hidden;
}
.woocommerce ul.products li.product a img {
	margin: calc(var(--typo-gap) * -2);
	margin-bottom: var(--typo-gap);
	width: calc(100% + (var(--typo-gap) * 4)); 
	max-width: none;
}


.wc-block-components-button:not(.is-link) {
	background-color: var(--typo-color-blue);
	border-radius: var(--typo-border-radius);
	cursor: pointer;
}


.woocommerce-product-gallery__wrapper {
	border-radius: var(--typo-border-radius);
	border: 1px solid var(--typo-color-grey);
	overflow: hidden;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background-color: transparent;
	color: inherit;
	border: 1px solid currentcolor;
}
.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover {
	background-color: var(--typo-color-blue);
	color: inherit;
	border: 1px solid currentcolor;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
	font-size: var(--typo-font-size-h4);
	color: var(--typo-color-blue);
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
	font-size: var(--typo-font-size-h2);
	color: var(--typo-color-blue);
}

.related.products {
	border-top: 1px solid #cacaca;
	padding-top: var(--typo-section-gap);
	margin-top: var(--typo-section-gap);
}

@media screen and (min-width:60em){
	.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
		float: left;
		 width: 28%;
	}
	.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
	  float: right;
	  width: 68%;
	  clear: none;
	}
}