/*
 * WooHoo product UI.
 *
 * Single-product stylesheet: attribute swatches, the sticky add-to-cart bar and
 * light gallery alignment. Loaded on product views only.
 *
 * Swatch values mirror the CommerceKit reference stylesheet plus the two live
 * Bimaco overrides that render image swatches as text buttons. See
 * docs/research/product-ui-implementation.md for the source of every value.
 */

/* -------------------------------------------------------------------------
 * Attribute swatches
 * ---------------------------------------------------------------------- */

.woohoo-swatches {
	display: none;
	margin: 0;
}

.woohoo-swatches-ready .woohoo-swatches {
	display: block;
}

/* Without JavaScript the native select stays visible and the swatches stay
   hidden, so a shopper can still choose an option and submit the form. */
.woohoo-swatches-ready .woohoo-native-select {
	display: none;
}

.single-product .summary .variations th,
.single-product .summary .variations td {
	display: block;
	width: 100%;
	font-size: 14px;
	line-height: 21px;
}

.single-product .summary .variations td {
	padding: 0;
}

.single-product .summary .variations td.value {
	padding-bottom: 16px;
}

.single-product .summary a.reset_variations {
	margin: 0 0 12px;
	color: #444;
	font-size: 13px;
	line-height: 19.5px;
	text-decoration: underline;
	text-decoration-thickness: 0.75px;
}

.single-product .summary table.variations {
	margin-bottom: 0;
}

.woohoo-swatches .woohoo-attribute-swatches {
	margin: 0;
	padding: 0;
}

.woohoo-swatches .woohoo-attribute-swatches-wrap {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.woohoo-swatches .woohoo-attribute-swatches-wrap legend {
	padding: 0;
	font-size: 0;
}

.woohoo-swatches .woohoo-swatch-title {
	display: none;
}

.woohoo-swatches .woohoo-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.woohoo-swatches .woohoo-attribute-swatch {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 0;
	vertical-align: top;
	list-style: none;
	line-height: 0;
}

.woohoo-swatches .woohoo-attribute-swatch > button {
	position: relative;
	display: block;
	font-weight: 400;
	text-decoration: none;
	outline: none;
	vertical-align: top;
}

.woohoo-swatches .woohoo-attribute-swatch > button:focus-visible {
	outline: 0.2rem solid #2491ff;
	outline-offset: 0;
}

.woohoo-swatches .woohoo-attribute-swatch > button .cross {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.4px), rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) calc(50% + 0.4px), rgba(0, 0, 0, 0) 100%);
}

.woohoo-swatches .woohoo-attribute-swatch > button.woohoo-swatch-disabled,
.woohoo-swatches .woohoo-attribute-swatch > button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.woohoo-swatches .woohoo-attribute-swatch > button.woohoo-swatch-disabled .cross,
.woohoo-swatches .woohoo-attribute-swatch > button:disabled .cross {
	display: block;
}

/* Text swatches. */
.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-button {
	margin: 0 5px 5px 0;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-button button {
	display: inline-block;
	min-width: 47px;
	min-height: 43px;
	padding: 0 12px;
	border: 1px solid #333;
	border-radius: 2px;
	background: #fff;
	color: #333;
	font-size: 14px;
	line-height: 43px;
	text-align: center;
	transition: background 0.2s;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-button button:not(.woohoo-swatch-disabled):not(.woohoo-swatch-selected):hover {
	background-color: #eee;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-button button.woohoo-swatch-selected {
	border-color: #111;
	background: #111;
	color: #fff;
}

/* Colour swatches. */
.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-color > button::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	border: 1px solid #ccc;
	border-radius: 50%;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-color > button:hover::before {
	border-color: #353c4e;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-color > button.woohoo-swatch-disabled:hover::before {
	border-color: #ccc;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-color > button.woohoo-swatch-selected::before {
	border: 1px solid #353c4e;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-color .color-div {
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	white-space: nowrap;
}

/* Image swatches, rendered as text buttons to match the live storefront. */
.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image {
	width: auto;
	min-width: 47px;
	height: 45px;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 47px;
	height: 45px;
	padding: 0 12px;
	border: 1px solid #333;
	border-radius: 2px;
	background-color: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 400;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	border: 1px solid #ccc;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button:not(.woohoo-swatch-disabled):hover::before,
.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button.woohoo-swatch-selected::before {
	border-color: #353c4e;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button img {
	display: none;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button::after {
	content: attr(data-attribute-text);
	white-space: nowrap;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button:hover:not(.woohoo-swatch-selected) {
	background-color: #f5f5f5;
}

.woohoo-swatches .woohoo-attribute-swatch.woohoo-swatch-image > button.woohoo-swatch-selected {
	border-color: #111;
	background-color: #111;
	color: #fff;
}

.woohoo-swatches .woohoo-attribute-swatch > button.woohoo-as-outofstock {
	opacity: 0.1;
	cursor: not-allowed;
}

.single-product .variations label {
	display: block;
	margin-bottom: 6px;
	color: #222;
	font-size: 12px;
	line-height: 18px;
}

/* Live's label and separator carry a near-black grey and tracking that the
 * generic body-text grey (#444, no letter-spacing) lacks. */
.single-product .variations .label strong {
	color: #222;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 18px;
	text-transform: uppercase;
}

.single-product .variations .woohoo-chosen-attribute-separator {
	color: #222;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Chosen-value text appended to the attribute label. */
.variations .woohoo-chosen-attribute {
	padding-left: 3px;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0;
	text-transform: none;
}

.variations .woohoo-chosen-attribute span {
	display: none;
}

/* -------------------------------------------------------------------------
 * Sticky add to cart
 *
 * The bar is rendered inside the real add-to-cart form so its button is a
 * second submit control of that same form. It is positioned fixed, which
 * requires that no ancestor of the form creates a containing block: the theme
 * must not apply transform, filter, perspective or will-change to
 * `.variations_form`, `.summary` or `.product`.
 * ---------------------------------------------------------------------- */

.woohoo-sticky-atc {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	visibility: hidden;
	background-color: #fff;
	box-shadow: 4px -5px 6px rgb(50 50 50 / 5%);
	transform: translateY(105%);
	transition: transform 0.3s ease, visibility 0.3s ease;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.woohoo-sticky-atc.is-visible {
	visibility: visible;
	transform: translateY(0);
}

/* From 993px live has no bottom bar; the tabs-row pill is the purchase control there. */
@media (min-width: 993px) {
	.woohoo-sticky-atc {
		display: none;
	}
}

/*
 * On every product page the menu bar (shell.css `.col-full-nav`) scrolls away
 * and only the product tabs row sticks, as on live. `.header-4` is excluded
 * because that header variant is never sticky in the first place
 * (storefront.css only enables `.col-full-nav` stickiness for
 * `.sticky-d`/default headers).
 */
@media (min-width: 993px) {
	body:not(.header-4).single-product .col-full-nav {
		position: relative;
	}
}

/* Without JavaScript the bar is not revealed at all; the real form is untouched. */
html:not(.woohoo-has-js) .woohoo-sticky-atc {
	display: none;
}

.woohoo-sticky-atc__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 1190px;
	margin: 0 auto;
	padding: 8px 16px;
	box-sizing: border-box;
}

.woohoo-sticky-atc__media {
	flex: 0 0 auto;
	line-height: 0;
}

.woohoo-sticky-atc__thumb {
	width: auto;
	max-height: 56px;
	border-radius: 2px;
}

.woohoo-sticky-atc__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: #444;
}

.woohoo-sticky-atc__title {
	overflow: hidden;
	color: #444;
	font-size: 14px;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.woohoo-sticky-atc__price {
	color: #111;
}

.woohoo-sticky-atc__price del {
	margin-right: 5px;
	opacity: 0.35;
}

.woohoo-sticky-atc__variation {
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.woohoo-sticky-atc__variation[hidden] {
	display: none;
}

.woohoo-sticky-atc__mobile-summary {
	display: none;
}

.woohoo-sticky-atc__action {
	flex: 0 0 auto;
	margin-left: auto;
}

.woohoo-sticky-atc__button {
	white-space: nowrap;
}

/* WooCommerce marks the button disabled until a variation is chosen, but here
 * it opens the picker sheet (product.js), so like live it never looks disabled. */
.woohoo-sticky-atc .single_add_to_cart_button.disabled {
	opacity: 1;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Purchase picker sheet
 *
 * Mobile: bottom sheet, slides up. Desktop: right-side slide-in panel.
 * Both mirror live's own open/close timing (CommerceKit: 0.35s desktop
 * slide, 0.25s mobile sheet, 0.5s backdrop fade).
 * ---------------------------------------------------------------------- */

.woohoo-sheet {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
}

.woohoo-sheet[hidden] {
	display: none;
}

.woohoo-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.woohoo-sheet.is-open .woohoo-sheet__backdrop {
	opacity: 1;
}

.woohoo-sheet__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 85vh;
	margin-top: auto;
	background: #fff;
	box-shadow: 5px 0 5px 0 rgb(27 31 35 / 10%);
	transform: translateY(100%);
	transition: transform 0.25s ease;
	padding: 1em 1em calc(1.5em + env(safe-area-inset-bottom, 0));
}

.woohoo-sheet.is-open .woohoo-sheet__panel {
	transform: translateY(0);
}

.woohoo-sheet__close {
	position: absolute;
	top: -60px;
	right: 0;
	display: inline-flex;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.woohoo-sheet__close svg {
	width: 2.5rem;
	height: 2.5rem;
}

.woohoo-sheet__inner {
	height: 100%;
	overflow-y: auto;
}

.woohoo-sheet__product {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	padding: 15px;
	background: #f8f8f8;
	font-size: 14px;
}

.woohoo-sheet__media img {
	display: block;
	max-width: 65px;
	max-height: none;
	margin-right: 15px;
	border-radius: 0;
}

.woohoo-sheet__price {
	display: block;
	margin-bottom: 3px;
	font-weight: bold;
}

.woohoo-sheet__price ins {
	font-weight: bold;
}

.woohoo-sheet__slot .variations {
	width: 100%;
}

/* A resolved variation's button stays at full strength in the sheet, also
 * while it adds (the spinner still shows), as on live. */
.woohoo-sheet__slot .woocommerce-variation-add-to-cart-enabled .single_add_to_cart_button {
	opacity: 1;
	transition: none;
}

body.woohoo-sheet-open {
	position: relative;
	overflow: hidden;
}

@media (min-width: 993px) {
	.woohoo-sheet__backdrop {
		background: rgb(52 53 55 / 40%);
	}

	.woohoo-sheet__panel {
		margin-top: 0;
		margin-left: auto;
		width: 420px;
		max-width: 100%;
		height: 100%;
		max-height: none;
		padding: 0;
		transform: translateX(100%);
		transition: transform 0.35s ease;
	}

	.woohoo-sheet.is-open .woohoo-sheet__panel {
		transform: translateX(0);
	}

	.woohoo-sheet__close {
		top: 4px;
		right: auto;
		left: -60px;
	}

	.woohoo-sheet__inner {
		padding: 1.5em;
	}

	.woohoo-sheet__product {
		align-items: normal;
		margin-bottom: 0;
		padding: 0;
		background: none;
		line-height: 1.4;
	}

	.woohoo-sheet__media {
		margin-right: 20px;
	}

	.woohoo-sheet__media img {
		max-width: 70px;
		margin-right: 0;
		margin-bottom: 20px;
	}

	.woohoo-sheet__price {
		margin: 3px 0;
	}

	.woohoo-sheet__slot .single_variation_wrap {
		padding-bottom: 2rem;
	}
}

/* -------------------------------------------------------------------------
 * Gallery alignment
 * ---------------------------------------------------------------------- */

/* Fewer thumbnails or dots than the row holds sit centred, as CommerceKit's
 * centerInsufficientSlides places them. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	justify-content: safe center;
	width: auto;
	margin: 0 -5px;
	padding: 10px 0 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 25%;
	width: 25%;
	margin: 0;
	padding: 0 5px;
	float: none;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	cursor: pointer;
	border-radius: 2px;
}

/* A single image keeps the empty thumbnail row under it. */
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
	padding-bottom: 10px;
}
@media (min-width: 771px) {
	.woocommerce-product-gallery {
		display: grid;
	}
	.woocommerce-product-gallery .flex-control-thumbs {
		align-items: flex-start;
	}
	.woocommerce-product-gallery .flex-control-thumbs img {
		display: block;
		aspect-ratio: auto 1;
		opacity: 0.4;
	}
	.woocommerce-product-gallery.is-started .flex-control-thumbs img.flex-active {
		opacity: 1;
	}
	.woocommerce-product-gallery .woohoo-thumbs-arrow {
		position: absolute;
		top: calc(50% - 21px);
		grid-row: 2 / 3;
		z-index: 3;
		padding: 0;
		border: 0;
		cursor: pointer;
	}
	.woocommerce-product-gallery .woohoo-thumbs-arrow--prev {
		left: 5px;
	}
	.woocommerce-product-gallery .woohoo-thumbs-arrow--next {
		right: 5px;
	}
	.woocommerce-product-gallery .woohoo-thumbs-arrow:disabled {
		visibility: hidden;
	}
	/* As on live, a single image shows an inert next arrow until the shopper's
	   first interaction. FlexSlider builds no arrows for one image, so the
	   wrapper draws it: ::before is the box, ::after the chevron. */
	.woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper {
		position: relative;
	}
	.woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::before {
		position: absolute;
		top: calc(50% - 21px);
		right: 10px;
		z-index: 3;
		content: "";
	}
	.woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::after {
		position: absolute;
		top: calc(50% - 11px);
		right: 20px;
		z-index: 3;
	}
}

.woocommerce-product-gallery .flex-direction-nav {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	grid-row: 1 / 2;
	align-items: center;
	z-index: 3;
	justify-content: space-between;
	margin: 0;
	padding: 0 10px;
	pointer-events: none;
	list-style: none;
}

.woocommerce-product-gallery .flex-direction-nav a,
.woocommerce-product-gallery .woohoo-thumbs-arrow,
.woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 4px;
	background: rgb(255 255 255 / 75%);
	font-size: 0;
	pointer-events: auto;
	transition: background 0.5s ease;
}

.woocommerce-product-gallery .flex-direction-nav a:hover,
.woocommerce-product-gallery .woohoo-thumbs-arrow:hover {
	background: #fff;
}

.woocommerce-product-gallery .flex-direction-nav a::before,
.woocommerce-product-gallery .woohoo-thumbs-arrow::before,
.woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::after {
	width: 22px;
	height: 22px;
	background: #111;
	content: "";
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 19L8 12L15 5' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next::before,
.woocommerce-product-gallery .woohoo-thumbs-arrow--next::before,
.woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::after {
	transform: scaleX(-1);
}

/* As on live, the arrow at the first or last slide is hidden rather than
 * looking like the active arrow. */
.woocommerce-product-gallery .flex-direction-nav .flex-disabled {
	opacity: 0;
	pointer-events: none;
}

/* A single image's arrow goes on the first interaction, when live's slider
 * starts and locks it (Swiper's watchOverflow). */
.woocommerce-product-gallery.is-locked .woocommerce-product-gallery__wrapper::before,
.woocommerce-product-gallery.is-locked .woocommerce-product-gallery__wrapper::after {
	display: none;
}

/*
 * A product's gallery can be a "3 cols, 1 col, 2 cols" or a "1 col, 2 cols,
 * 2 cols" grid (the WOOHOO_GALLERY_LAYOUT_META_KEY post meta, read by
 * woohoo_product_gallery_layout_class() in product.php). FlexSlider's JS
 * keeps running, so its inline `width`/`transform`/`float` styles stay in the
 * DOM and every property it sets is overridden here; the grid, not the slide
 * track, places the images. As on live, only the first six (3-1-2) or five
 * (1-2-2) images show until the "Load more" pill (product.js) expands the grid.
 */
.woohoo-gallery-more {
	display: none;
}

@media (min-width: 771px) {
	/* A grid has no thumbnail row, so a single image keeps no room for one. */
	.woohoo-gallery-grid .woocommerce-product-gallery {
		padding-bottom: 0;
	}

	.woohoo-gallery-grid .woocommerce-product-gallery .flex-viewport {
		height: auto !important;
		overflow: visible;
	}

	.woohoo-gallery-grid .woocommerce-product-gallery__wrapper {
		display: grid !important;
		gap: 10px;
		width: auto !important;
		transform: none !important;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__wrapper {
		grid-template-columns: repeat(6, 1fr);
	}

	.woohoo-gallery-grid-1-2-2 .woocommerce-product-gallery__wrapper {
		grid-template-columns: repeat(2, 1fr);
	}

	.woohoo-gallery-grid .woocommerce-product-gallery__image {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image {
		grid-column: span 3;
		order: 5;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(1) {
		grid-column: span 6;
		order: 4;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(2),
	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(3),
	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(4) {
		grid-column: span 2;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(2) {
		order: 1;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(3) {
		order: 2;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:nth-child(4) {
		order: 3;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery__image:last-child:nth-child(odd) {
		grid-column: span 6;
	}

	.woohoo-gallery-grid-1-2-2 .woocommerce-product-gallery__image:nth-child(1),
	.woohoo-gallery-grid-1-2-2 .woocommerce-product-gallery__image:last-child:nth-child(even) {
		grid-column: span 2;
	}

	.woohoo-gallery-grid-3-1-2 .woocommerce-product-gallery:not(.is-expanded) .woocommerce-product-gallery__image:nth-child(n+7),
	.woohoo-gallery-grid-1-2-2 .woocommerce-product-gallery:not(.is-expanded) .woocommerce-product-gallery__image:nth-child(n+6) {
		/* FlexSlider sets an inline `style="display: block"` on every slide, which
		 * only an !important rule outranks (the siblings above need it for their
		 * inline `width`/`float` too). */
		display: none !important;
	}

	.woohoo-gallery-more {
		display: block;
		position: absolute;
		bottom: 1rem;
		left: 50%;
		z-index: 2;
		padding: 10px 30px;
		border: 0;
		border-radius: 25px;
		background: #000;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		cursor: pointer;
		transform: translateX(-50%);
	}

	.woohoo-gallery-grid .woocommerce-product-gallery .flex-direction-nav,
	.woohoo-gallery-grid .woocommerce-product-gallery .flex-control-thumbs,
	.woohoo-gallery-grid .woocommerce-product-gallery .woohoo-thumbs-arrow {
		display: none;
	}
}

/* Gallery and summary sit in Shoptimizer's details wrapper: 2rem below them
 * before the tab row. From 993px the notices, the wrapper, the tab row and
 * the related and upsell sections carry the page frame themselves, so the
 * column that holds them spans the full width (the breadcrumb row is framed
 * by its own width). The toast product-ajax.js makes of the notices wrapper
 * keeps its own box. */
.single-product .product-details-wrapper {
	display: flow-root;
	padding-bottom: 2rem;
}
.single-product .product-details-wrapper > .woocommerce-product-gallery,
.single-product .product-details-wrapper > .images {
	position: relative;
	width: 60%;
	float: left;
	margin: 0;
}
.single-product .product-details-wrapper > .summary {
	width: 36%;
	float: right;
	margin-bottom: 0;
}
@media (min-width: 993px) {
	.single-product .site-content .col-full {
		max-width: inherit;
		margin: 0;
		padding: 0;
	}
	.single-product .product-details-wrapper,
	.single-product .related.products,
	.single-product .upsells.products {
		margin-right: auto;
		margin-left: auto;
		padding-right: 2.617924em;
		padding-left: 2.617924em;
	}
	.single-product .site-main > .woocommerce-notices-wrapper:not(.woohoo-pdp-toast) {
		max-width: calc(1190px + 5.2325em);
		margin-right: auto;
		margin-left: auto;
		padding-right: 2.617924em;
		padding-left: 2.617924em;
	}
	.woohoo-product-nav {
		padding-right: 2.617924em;
		padding-left: 2.617924em;
	}
	/* Beside a grid gallery the summary stays 30px below the top of the
	 * window while the gallery scrolls, as CommerceKit's grid layouts do.
	 * While the purchase sheet is open it stops sticking, as CommerceKit's
	 * drawer makes it: a sticky box is a stacking context, and the sheet
	 * inside it could not cover the tabs row or the reviews. */
	.woohoo-gallery-grid:not(.woohoo-sheet-open) .product-details-wrapper > .summary {
		position: sticky;
		top: 30px;
	}
}
@media (min-width: 993px) and (max-width: 1199px) {
	.single-product .product-details-wrapper > .woocommerce-product-gallery,
	.single-product .product-details-wrapper > .images {
		width: 50%;
	}
	.single-product .product-details-wrapper > .summary {
		width: 46%;
	}
}
.single-product .woocommerce-product-gallery__wrapper {
	margin: 0;
}
/* FlexSlider widens the slide track at once but sizes the slides 100ms later, so each gallery it builds
 * (and WooCommerce builds one on every variation choice and reset) would stack track-wide slides for that
 * moment and throw a scrolled page far down. Each slide starts at the size FlexSlider then gives it. */
.single-product .woocommerce-product-gallery .flex-viewport {
	container-type: inline-size;
}
.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
	float: left;
	width: 100cqw;
}
.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}
.single-product .woocommerce-product-gallery__trigger {
	display: none;
}
.single-product .summary .product_title {
	margin: 0 0 5.6px;
	padding-right: 60px;
	font-size: 34px;
	line-height: 1.2;
}
/* A unitless ratio, as on live, so the del/ins/bdi children below inherit a
 * line-height that scales with their own smaller font-size. */
.single-product .summary > .price {
	float: left;
	margin: 0 0 8px;
	font-size: clamp(1rem, 0.873rem + 0.4065vw, 1.125rem);
	line-height: 1.5;
}
.single-product .summary > .onsale {
	display: inline;
	position: static;
	float: none;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #ec008c;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
}
.single-product div.product {
	position: relative;
}
.single-product .product-details-wrapper > .summary > .ckit-badge_wrapper,
.single-product .woocommerce-product-gallery > .ckit-badge_wrapper {
	position: absolute;
	top: 10px;
	right: auto;
	bottom: auto;
	left: 10px;
	z-index: 5;
	width: auto;
	height: auto;
}
.single-product .summary > .sale-item.product-label {
	display: inline-block;
	position: relative;
	top: -1px;
	left: 0;
	min-width: 0;
	min-height: 0;
	margin-left: 10px;
	padding: 3px 7px;
	border-radius: 3px;
	background: #ec008c;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
}
/* The variable-product placeholder above is printed with a `hidden`
 * attribute (product.php); without this, the class selector's own `display`
 * would outrank the UA `[hidden]` rule and show an empty badge until
 * product.js's setBadge() fills it on the first variation pick. */
.single-product .summary > .sale-item.product-label[hidden] {
	display: none;
}
.woohoo-has-js .summary .woocommerce-variation-price {
	display: none;
}
.single-product .summary .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-rating {
	clear: both;
}
.single-product .summary .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description p {
	margin: 0;
	color: #444;
	font-size: 14px;
	line-height: 1.5;
}
.single-product .summary .woocommerce-product-details__short-description {
	padding-bottom: 8px;
}
.single-product .summary .woocommerce-product-rating {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
.single-product .summary .woocommerce-product-rating .star-rating {
	flex: 0 0 auto;
	float: none;
	margin: 0;
}
.single-product .summary .woocommerce-product-rating .woocommerce-review-link {
	flex: 0 0 auto;
	margin: 0;
	color: #333;
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
}
.bimaco-pdp-age {
	margin: 0.35em 0 0.75em;
	font-size: 0.95em;
}
.bimaco-pdp-compat {
	margin: 0.15em 0 0.75em;
	font-size: 0.95em;
}
.single-product .summary form.cart {
	margin: 12px 0 16px;
}
.single-product .summary .quantity {
	position: relative;
}
.single-product .summary .qty {
	width: 50px;
	height: 52px;
	padding: 0 0.4em;
	border: 1px solid #e2e2e2;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	background: #fff;
	text-align: center;
	-moz-appearance: textfield;
}
.single-product .summary .qty::-webkit-outer-spin-button,
.single-product .summary .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
.single-product .summary .yith-par-message.yith-par-message-product {
	display: inline-block;
	width: auto;
	max-width: 100%;
	margin: 10px 0 40px;
	padding: 10px 25px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.45;
}
.single-product .summary .yith-par-message img {
	display: block;
	float: left;
	width: 16px;
	height: auto;
	margin-right: 10px;
}
.single-product .summary .quantity-nav {
	position: absolute;
	z-index: 2;
	top: 0;
	right: -34px;
	bottom: 0;
	width: 35px;
	border: 1px solid #e2e2e2;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.single-product .summary .quantity-button {
	position: absolute;
	right: 0;
	left: 0;
	background: no-repeat center;
	cursor: pointer;
	user-select: none;
}
.single-product .summary .quantity-button.quantity-down {
	bottom: 0;
}
.single-product .summary .quantity-button:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	background: #333;
	transform: translate(-50%, -50%);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}
.single-product .summary .quantity-button.quantity-up:before {
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.7071 12.7071C14.3166 13.0976 13.6834 13.0976 13.2929 12.7071L10 9.41421L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071Z' fill='%234A5568'/%3E%3C/svg%3E");
}
.single-product .summary .quantity-button.quantity-down:before {
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289L10 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z' fill='%234A5568'/%3E%3C/svg%3E");
}
.single-product .summary .single_add_to_cart_button:not(.woohoo-sticky-atc__button) {
	min-height: 48px;
}
/* Holds the loading spinner (storefront.css) inside the button. */
.product form.cart .button,
.ajax_add_to_cart.add_to_cart_button {
	position: relative;
}
.product form.cart .button.added::before {
	position: relative;
	top: 4px;
	margin-right: 8px;
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}
/* WooCommerce's "view cart" link after an added product: the cart drawer
 * opens instead, as on live. */
.single_add_to_cart_button + .added_to_cart {
	display: none;
}
.single-product .cr-qna-search-block .cr-input-text {
	box-sizing: border-box;
	padding: 10px 36px;
	border: 1px solid #aaa;
	border-radius: 6px;
	font-size: 16px;
}
.single-product .cr-qna-search-block .cr-qna-ask-button {
	box-sizing: border-box;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid #ec008c;
	border-radius: 6px;
	background: #ec008c;
	box-shadow: none;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}
.single-product .cr-qna-search-block .cr-qna-ask-button:hover {
	border-color: #bb0872;
	background: #bb0872;
	color: #fff;
}
/* The plugin's "Dodaj recenziju" button ships with no brand styling. Its live
 * geometry is its own (it shares only the background colour with the Q&A ask
 * button): no border, 4px radius, 15px/600 text, 10px/20px padding, about
 * 40px tall from those alone. The extra `.single-product` ancestor outranks
 * the plugin's own chain (frontend.css .cr-all-reviews-shortcode
 * .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review, 0,4,0). */
.single-product .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review {
	box-sizing: border-box;
	margin: 0;
	padding: 10px 20px;
	border: 0 none;
	border-radius: 4px;
	background: #ec008c;
	box-shadow: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
}
.single-product .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review:hover {
	border-color: #bb0872;
	background: #bb0872;
	color: #fff;
}
/* The plugin's "Prikaži još recenzija" button keeps its own size, colours and
 * border width; it takes the 4px radius of the other review buttons and the
 * brand magenta, not the plugin's teal, as its hover and focus border. */
.single-product .cr-all-reviews-shortcode .cr-show-more-button {
	border-radius: 4px;
}
.single-product .cr-all-reviews-shortcode .cr-show-more-button:hover,
.single-product .cr-all-reviews-shortcode .cr-show-more-button:focus {
	border-color: #ec008c;
}
/* Ported from Shoptimizer's cusrev.css compatibility file: the selectors of
 * its 21 rules that match the [cusrev_all_reviews] shortcode the reviews tab
 * prints. The rest target CusRev's #reviews.cr-reviews-ajax-reviews template
 * and its older .comment-text review markup. This file loads after the
 * plugin's frontend.css, so the same selectors win the specificity tie as
 * they do on Shoptimizer. */
.cr-summaryBox-wrap .cr-histogramTable {
	font-size: 13px;
}
.cr-all-reviews-shortcode .cr-ajax-reviews-sort-div .cr-ajax-reviews-sort {
	background-color: #fff;
	border: 1px solid #ccc;
}
.cr-all-reviews-shortcode ol.commentlist ul.children {
	margin-left: 100px;
}
/*
 * The plugin's frontend.css gives each review's verified-owner check picto
 * z-index:10, above `.woohoo-product-nav`'s sticky z-index:8, so the picto
 * would paint over the tabs bar while a review scrolls under it. Live applies
 * the same unscoped override; it needs !important because the plugin's
 * selector chain includes an #reviews ID.
 */
.cr-avatar-check {
	z-index: 1 !important;
}
/*
 * The retained runtime's 'qna-pilot' module turns CusRev's Q&A tab into a
 * bordered card (its own .bimaco-qna-pilot wrapper and stylesheet draw it,
 * including the 600px step-down), moves the ask-question control below the
 * question list and hides the search box only while that list is empty. The
 * rules below are ported from its own qna-pilot.css, with :has() standing in
 * for the 'bimaco-qna-empty' class it adds via script, so this holds with or
 * without JavaScript.
 */
.single-product .bimaco-product-qa__list {
	display: grid;
	gap: 14px;
	margin: 0 0 26px;
}
.single-product .bimaco-product-qa__item {
	padding: 16px;
	border: 1px solid #ececf2;
	border-radius: 8px;
	background: #fff;
}
.single-product .bimaco-product-qa__item h3 {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
}
.single-product .bimaco-product-qa__notice {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #effaf1;
	color: #175f2b;
	font-weight: 700;
}
.single-product .bimaco-product-qa__notice--error {
	background: #fff3f4;
	color: #9b1c31;
}
.single-product .bimaco-product-qa__form {
	display: grid;
	gap: 12px;
	max-width: 620px;
}
.single-product .bimaco-product-qa__form p { margin: 0; }
.single-product .bimaco-product-qa__form label { display: block; margin-bottom: 5px; font-weight: 700; }
.single-product .bimaco-product-qa__form input,
.single-product .bimaco-product-qa__form textarea { width: 100%; border: 1px solid #d9d9e3; border-radius: 6px; }
.single-product .bimaco-product-qa__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.single-product #cr_qna > h2 {
	margin: 0 0 16px;
}
.single-product #cr_qna {
	display: flex;
	flex-direction: column;
}
.single-product #cr_qna > .cr-qna-list-block {
	order: 2;
}
.single-product #cr_qna > .cr-qna-search-block {
	order: 1;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 24px;
}
.single-product #cr_qna > .bimaco-qna-ask-block {
	order: 3;
}
.single-product #cr_qna .cr-qna-ask-button,
.single-product #cr_qna .cr-review-form-submit,
.single-product #cr_qna .cr-review-form-continue {
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid #ec008c;
	border-radius: 6px;
	background: #ec008c;
	color: #fff;
	font: inherit;
	font-weight: 700;
}
.single-product #cr_qna :is(button,a,input,textarea,[role=button]):focus-visible {
	outline: 3px solid #00aeef;
	outline-offset: 3px;
}
.single-product #cr_qna .bimaco-qna-privacy {
	margin: 16px 0;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
}
.single-product #cr_qna .cr-review-form-email input[readonly] {
	background: #f7f7f7;
	color: #555;
}
.single-product #cr_qna .bimaco-qna-ask-block {
	justify-content: space-between;
	margin: 24px 0 0;
	padding-top: 24px;
	border-top: 1px solid #e5e5e5;
}
.single-product #cr_qna .bimaco-qna-ask-block p {
	flex: 1 1 260px;
	margin: 0;
	line-height: 1.6;
}
.single-product #cr_qna.bimaco-qna-empty .bimaco-qna-ask-block {
	justify-content: flex-start;
	border: 0;
	padding: 0;
	margin-top: 20px;
}
.single-product #cr_qna:has(.cr-qna-list-empty) .cr-ajax-qna-search {
	display: none;
}
.single-product #cr_qna:has(.cr-qna-list-empty) > .cr-qna-search-block {
	justify-content: flex-start;
}
.single-product .cr-qna-block .cr-qna-list-block .cr-qna-list-empty {
	padding: 0;
	text-align: left;
	line-height: 1.6;
}
.single-product #cr_qna .cr-qna-ask-button {
	margin: 0;
	flex-shrink: 0;
}
.single-product .summary .woocommerce-variation-add-to-cart > .quantity,
.single-product .summary form.cart:not(.grouped_form) > .quantity,
.single-product .summary .woohoo-sheet__slot > .quantity {
	display: block;
	float: left;
	width: auto;
	margin: 0;
}
.single-product .summary .woocommerce-variation-add-to-cart > .single_add_to_cart_button,
.single-product .summary form.cart:not(.grouped_form) > .quantity + .single_add_to_cart_button,
.single-product .summary .woohoo-sheet__slot > .quantity + .single_add_to_cart_button {
	display: block;
	width: calc(100% - 90px);
	min-height: 52px;
	margin-left: 90px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 52px;
}
.single-product .summary form.cart .quantity:has(> input[type="hidden"]) + .single_add_to_cart_button {
	width: 100%;
	margin-left: 0;
}
.single-product .related-wrapper {
	clear: both;
	background: #fff;
}
.single-product .related-wrapper > .product_meta {
	position: relative;
	right: 50%;
	left: 50%;
	width: 100vw;
	max-width: 100%;
	margin-right: -50vw;
	margin-left: -50vw;
	padding: 0.85rem 0;
	border-top: 1px solid rgb(0 0 0 / 5%);
	font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem);
	text-align: center;
}
.single-product .product_meta .posted_in,
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .tagged_as {
	display: inline-block;
	margin: 0 8px;
	color: #111;
}
.single-product .product_meta .posted_in a,
.single-product .product_meta .tagged_as a {
	color: #555;
}
.single-product .product_meta .posted_in a:first-child,
.single-product .product_meta .tagged_as a:first-child,
.single-product .product_meta .sku_wrapper span {
	margin-left: 5px;
}
.single-product .woocommerce-tabs, .single-product .related, .single-product .upsells {
	clear: both;
}
.woohoo-product-nav {
	position: sticky;
	top: 0;
	z-index: 8;
	overflow: hidden;
	background: #fff linear-gradient(#eee, #eee) 0 100% / 100% 1px no-repeat;
}
.woohoo-product-nav ul {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0 auto;
	padding: 0;
	border: 0;
	list-style: none;
	font-size: 15px;
	line-height: 22.5px;
}
.woohoo-product-nav li {
	display: inline-flex;
	flex-shrink: 0;
	margin: 3px 0;
}
.woohoo-product-nav a {
	display: block;
	position: relative;
	white-space: nowrap;
	padding: 15px 10px 10px;
	color: #565656;
	font-size: 15px;
	font-weight: 400;
	line-height: 22.5px;
}
.woohoo-product-nav li.reviews_tab a {
	padding-right: 34px;
}
.woohoo-product-nav a:not(.button)::after {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	left: 10px;
	width: calc(100% - 20px);
	border-bottom: 4px solid #ec008c;
	visibility: hidden;
}
@media (min-width: 993px) {
	.woohoo-product-nav li:first-child a:not(.button) {
		padding-left: 0;
	}
	.woohoo-product-nav li:first-child a:not(.button)::after {
		left: 0;
		width: calc(100% - 10px);
	}
}
.woohoo-product-nav li.reviews_tab a::after {
	width: calc(100% - 44px);
}
.woohoo-product-nav li.reviews_tab a span {
	position: absolute;
	right: 8px;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.woohoo-product-nav li.active a:not(.button) {
	color: #111;
	-webkit-text-stroke: 0.2px;
}
.woohoo-product-nav li.active a:not(.button)::after {
	visibility: visible;
}
.woohoo-product-nav a:not(.button):hover {
	color: #ec008c;
}
.woohoo-product-nav li.woohoo-product-nav__purchase {
	margin: 9px 0 0 auto;
}
.woohoo-product-nav__purchase a.button {
	height: 35px;
	min-height: 35px;
	padding: 10.5px 17px;
	border-radius: 4px;
	background: #ec008c;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	opacity: 0;
	visibility: hidden;
}
/* Shown only while the tabs row is stuck to the top (product.js sets is-stuck). */
.woohoo-product-nav.is-stuck .woohoo-product-nav__purchase a.button {
	opacity: 1;
	visibility: visible;
}
.single-product .wc-tabs-wrapper {
	border-top: 1px solid #f5f5f5;
}
.single-product .wc-tabs-wrapper > section {
	padding: 24px 0;
}
.single-product #tab-description h2 {
	margin-bottom: 12px;
}
.single-product .woocommerce-tabs .wp-block-image {
	margin: 0 0 1.5em;
}
.single-product .woocommerce-tabs .wp-block-image.aligncenter {
	margin-right: auto;
	margin-left: auto;
}
/* 'Dodatne informacije' is bare WooCommerce core markup with no theme rules
 * of its own; these are live's desktop, tablet and mobile values. */
.single-product table.woocommerce-product-attributes {
	margin: 24px 0 0;
	font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem);
}
.single-product table.woocommerce-product-attributes th,
.single-product table.woocommerce-product-attributes td {
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}
.single-product table.woocommerce-product-attributes th {
	color: #111;
	font-weight: 600;
	min-width: 150px;
	text-align: left;
}
.single-product table.woocommerce-product-attributes td {
	text-align: right;
}
.single-product table.woocommerce-product-attributes tr:first-child th,
.single-product table.woocommerce-product-attributes tr:first-child td {
	padding-top: 0;
}
.single-product table.woocommerce-product-attributes tr:last-child th,
.single-product table.woocommerce-product-attributes tr:last-child td {
	border-bottom: 0;
}
.single-product table.woocommerce-product-attributes td p {
	margin: 0;
}
@media (min-width: 993px) {
	.single-product .wc-tabs-wrapper {
		padding: 0 2.617924em 2.617924em;
	}
	.single-product .wc-tabs-wrapper > section.woocommerce-Tabs-panel {
		max-width: 960px;
		margin-right: auto;
		margin-left: auto;
		padding: 24px 2.617924em;
	}
}
@media (min-width: 993px) and (max-width: 1279px) {
	.single-product .wc-tabs-wrapper > section.woocommerce-Tabs-panel {
		padding-right: 0;
		padding-left: 0;
	}
}
.woohoo-product-details [id],
.woohoo-product-anchor {
	scroll-margin-top: 90px;
}
@media (min-width: 993px) {
	.single-product .related-wrapper > section > h2 {
		padding-top: 3rem;
	}
	.single-product .upsells > h2,
	.single-product .related > h2 {
		margin-bottom: 28px;
	}
	.single-product ul.products li.product:not(.product-category) {
		padding-bottom: 40px;
	}
}
@media (max-width: 992px) {
	.single-product .related-wrapper > section {
		margin-right: -1em;
		margin-left: -1em;
		padding: 2rem 1em 1rem;
	}
	.single-product .related-wrapper > section + section {
		padding-top: 1rem;
	}
}
.single-product ul.products li.product .woocommerce-loop-product__title,
.single-product ul.products li.product h2.woocommerce-loop-product__title {
	margin-bottom: 0;
}
.single-product ul.products li.product .price {
	margin-bottom: 12px;
}
.summary .product-widget {
	clear: both;
	margin: 0 0 1rem;
	padding-top: 0.75rem;
	color: #111;
	font-size: 14px;
}
.summary .product-widget .widget p {
	margin-bottom: 0.5rem;
}
.summary .product-widget ul {
	margin: 5px 0 0;
}
.summary .product-widget ul li {
	position: relative;
	margin: 0 0 3px 22px;
	list-style: none;
	font-size: 13px;
	line-height: 1.45;
}
.summary .product-widget ul li::before {
	position: absolute;
	top: 2.5px;
	left: -22px;
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background: #333;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.summary .product-widget .widget fieldset p {
	margin-bottom: 0;
}
.summary .product-widget fieldset {
	margin-top: 0.5em;
	margin-bottom: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 1rem;
	border: 1px solid #e2e2e2;
	text-align: center;
}
.summary .product-widget fieldset legend {
	display: block;
	width: inherit;
	margin: 0 auto;
	padding: 10px;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.summary .product-widget img {
	max-width: 100%;
	height: auto;
}
@media (max-width: 992px) {
		/* The opened mobile search overlays the sticky header (shell.css), so
		   the header stays 61px tall with or without m-search-toggled and the
		   row keeps brand.css's closed-search offset in both states. */
		.woohoo.sticky-m .woohoo-product-nav {
		top: 60px;
	}
	.woohoo .woohoo-product-details [id], .woohoo .woohoo-product-anchor {
		scroll-margin-top: 184px;
	}
		.single-product .product-details-wrapper > .woocommerce-product-gallery,
		.single-product .product-details-wrapper > .images,
		.single-product .product-details-wrapper > .summary {
			width: 100%;
			float: none;
		}
		.single-product .product-details-wrapper > .woocommerce-product-gallery,
		.single-product .product-details-wrapper > .images {
			margin-bottom: 1rem;
		}
		.single-product .summary .product_title {
			font-size: 24px;
			padding-right: 0;
		}
		.single-product .product_meta .posted_in,
		.single-product .product_meta .sku_wrapper,
		.single-product .product_meta .tagged_as {
			display: block;
		}
	.woohoo-product-nav {
		margin: 0 -1em;
		border-top: 1px solid #eee;
	}
	.woohoo-product-nav ul {
		overflow-x: auto;
		padding: 0 5px;
		font-size: 14px;
		scrollbar-width: none;
	}
	.woohoo-product-nav a:not(.button) {
		padding: 15px 10px 10px;
		font-size: 14px;
		line-height: 21px;
	}
	.woohoo-product-nav li.reviews_tab {
		padding-right: 10px;
	}
	/*
	 * `li.` matches the specificity of `.woohoo-product-nav li{display:
	 * inline-flex}`, which a bare `.woohoo-product-nav__purchase` would lose to,
	 * leaving the pill over the fixed sticky bar on mobile.
	 */
	.woohoo-product-nav li.woohoo-product-nav__purchase {
		display: none;
	}
	.single-product .wc-tabs-wrapper {
		margin: 0 -1em;
		padding: 0 1em;
	}
	.single-product .woocommerce-tabs .entry-content {
		font-size: 14px;
	}
	.single-product .woocommerce-tabs .wp-block-image {
		margin-bottom: 1rem;
	}
}
/* Up to 770px the gallery runs edge to edge with pagination dots under the
 * image, in CommerceKit's row: one line of text tall, 5px below the image,
 * the dots 1em - 8px down it. A single image keeps the row empty. */
@media (max-width: 770px) {
	.single-product .product-details-wrapper > .woocommerce-product-gallery,
	.single-product .product-details-wrapper > .images {
		width: calc(100% + 2em);
		margin-right: -1em;
		margin-bottom: 10px;
		margin-left: -1em;
	}
	.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
		padding-bottom: calc(5px + 1.5em);
	}
	.single-product .woocommerce-product-gallery .flex-direction-nav,
	.single-product .woocommerce-product-gallery .woohoo-thumbs-arrow,
	.single-product .woocommerce-product-gallery--with-images:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__wrapper::after {
		display: none;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		height: 1.5em;
		margin: 5px 0 0;
		padding: calc(1em - 8px) 10px 0;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		flex: 0 0 15.5625px;
		width: 15.5625px;
		padding: 0 3.78125px;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs img {
		width: 8px;
		height: 8px;
		padding: 4px;
		border-radius: 50%;
		background: #000;
		opacity: 0.2;
	}
	.single-product .woocommerce-product-gallery.is-started .flex-control-thumbs img.flex-active {
		background: #555;
		opacity: 1;
	}
}
/* Below 993px the meta band also spans the page gutters, 1em of .site each:
 * 16px, and 15px at 768px and below. The band's own smaller font rules out
 * em. */
@media (min-width: 769px) and (max-width: 992px) {
	.single-product .related-wrapper > .product_meta {
		max-width: calc(100% + 32px);
	}
}
@media (max-width: 768px) {
	.single-product .related-wrapper > .product_meta {
		max-width: calc(100% + 30px);
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.woohoo-sticky-atc {
		transition: none;
	}

	.woohoo-swatches .woohoo-attribute-swatch button {
		transition: none;
	}

	.woohoo-sheet__backdrop,
	.woohoo-sheet__panel {
		transition: none;
	}
}

@media (max-width: 992px) {
	.woohoo-sticky-atc__mobile-summary:not([hidden]) {
		display: flex;
		align-items: baseline;
		gap: 8px 16px;
		width: 100%;
		padding: 0 0 12px;
		font-size: 14px;
		line-height: 1.35;
	}
	.woohoo-sticky-atc__mobile-summary [data-woohoo-mobile-variation-attrs] {
		flex: 1 1 auto;
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.woohoo-sticky-atc__mobile-summary [data-woohoo-mobile-variation-price] {
		flex: 0 0 auto;
		font-size: 16px;
		font-weight: 700;
		white-space: nowrap;
	}
	.woohoo-sticky-atc__media,
	.woohoo-sticky-atc__info {
		display: none;
	}
	.woohoo-sticky-atc__inner {
		flex-wrap: wrap;
		padding: 15px 16px;
	}
	.woohoo-sticky-atc__action,
	.woohoo-sticky-atc__button {
		width: 100%;
	}
	.woohoo-sticky-atc__button {
		border-radius: 4px;
		background: #ec008c;
		color: #fff;
		font-size: 16px;
	}
	/* The page ends 70px lower, so the bar never covers the copyright row. */
	.single-product:has(.woohoo-sticky-atc) {
		padding-bottom: 70px;
	}
}

@media (max-width: 600px) {
	.woohoo-sticky-atc__inner {
		gap: 0;
		padding: 15px 16px;
	}

	.woohoo-sticky-atc__media,
	.woohoo-sticky-atc__info {
		display: none;
	}

	.woohoo-sticky-atc__action,
	.woohoo-sticky-atc__button {
		width: 100%;
	}
}

.woohoo .cr-credits-div {
	display: none !important;
}
.bimaco-first-review-cta {
	margin-bottom: 16px;
	padding: 28px 20px;
	border-radius: 6px;
	background: #f9f9f9;
	text-align: center;
}
.bimaco-first-review-cta .bimaco-first-review-icon {
	margin-bottom: 10px;
	font-size: 36px;
	line-height: 1;
}
.bimaco-first-review-cta p {
	margin: 0 0 14px;
	color: #555;
	font-size: 15px;
	line-height: 1.5;
}
.bimaco-first-review-cta .bimaco-cta-btn {
	display: inline-block;
	padding: 10px 26px;
	border: 0;
	border-radius: 5px;
	background: #ec008c;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.bimaco-first-review-cta .bimaco-cta-btn:hover {
	background: #c90078;
}

/*
 * "Istaknuto" featured-review quote. The hidden source card
 * (inc/product.php woohoo_likelihood_render_pdp()) must never paint where it
 * is printed; assets/js/reviews.js clones it into .cr-all-reviews-shortcode.
 * Class names and values match live's own bimaco-likelihood-quote component.
 */
.bimaco-likelihood-quote--source,
[data-bimaco-likelihood-quote-source] {
	display: none !important;
}
.cr-all-reviews-shortcode > .bimaco-likelihood-quote[data-bimaco-likelihood-quote-live] {
	display: block;
	margin: 0;
	padding: 16px 4px 18px;
	border-bottom: 1px solid #eee;
	color: #1a1a1a;
	letter-spacing: 0;
	text-transform: none;
}
.bimaco-likelihood-quote__card {
	display: flex;
	max-width: 42em;
	gap: 14px;
	align-items: flex-start;
}
.bimaco-likelihood-quote__avatar {
	position: relative;
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #ccd1d4;
	color: #4d5d64;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}
.bimaco-likelihood-quote__check {
	position: absolute;
	right: -2px;
	bottom: -1px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #31856c;
}
.bimaco-likelihood-quote__body {
	flex: 1;
	min-width: 0;
}
.bimaco-likelihood-quote__kicker {
	margin: 0 0 2px;
	color: #767676;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
}
.bimaco-likelihood-quote__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
}
.bimaco-likelihood-quote__author {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
}
.bimaco-likelihood-quote__verified {
	color: #767676;
	font-size: 14px;
}
.bimaco-likelihood-quote__stars {
	display: flex;
	gap: 1px;
	margin: 0 0 8px;
	line-height: 0;
}
.bimaco-likelihood-quote__stars svg {
	display: block;
}
.bimaco-likelihood-quote__note {
	margin: 0 0 4px;
	color: #767676;
	font-size: 13px;
	line-height: 1.35;
}
.bimaco-likelihood-quote__text {
	margin: 0;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
@media (max-width: 480px) {
	.bimaco-likelihood-quote__avatar {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		font-size: 13px;
	}
	.bimaco-likelihood-quote__check {
		width: 16px;
		height: 16px;
	}
}

.single-product .summary {
	position: relative;
}
.single-product .summary p.stock {
	position: relative;
	clear: both;
	margin: 16px 0 0;
	padding: 13.6px 0 0;
	border-top: 1px solid #e2e2e2;
	font-size: 13px;
	line-height: 19.5px;
}
.single-product .summary .woocommerce-variation-availability p.stock {
	margin-top: 0;
	padding-bottom: 13.6px;
}
.single-product .summary p.stock.in-stock,
.single-product .summary p.stock.out-of-stock {
	font-weight: 400;
}
.single-product .summary p.stock.in-stock {
	color: #0f834d;
}
.single-product .summary p.stock.out-of-stock {
	color: #a61e00;
	font-weight: 700;
}
.single-product .summary p.stock.in-stock::before,
.single-product .summary p.stock.out-of-stock::before {
	position: relative;
	top: 3px;
	display: inline-flex;
	width: 15px;
	height: 15px;
	margin-right: 0.5rem;
	content: "";
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}
.single-product .summary p.stock.in-stock::before {
	background: #0f834d;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
}
.single-product .summary p.stock.out-of-stock::before {
	background: #a61e00;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A5568' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
}
.woohoo-product-prevnext {
	position: absolute;
	top: 12px;
	right: 0;
	z-index: 2;
	display: inline-flex;
}
.woohoo-product-prevnext a {
	position: relative;
	display: inline-flex;
	color: #333;
}
.woohoo-product-prevnext svg {
	width: 20px;
	height: 20px;
	stroke: #999;
}
.woohoo-product-prevnext a:hover svg {
	stroke: #666;
}
.woohoo-product-prevnext .tooltip {
	visibility: hidden;
	position: absolute;
	z-index: 2;
	right: 0;
	width: 120px;
	margin-top: 30px;
	opacity: 0;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
	font-size: 13px;
	text-align: center;
	transform: translateY(10px);
}
.woohoo-product-prevnext .tooltip img {
	display: block;
}
.woohoo-product-prevnext .title {
	display: block;
	padding: 0.5rem 0.75rem 0.25rem;
	font-size: 12px;
	line-height: 1.4;
}
.woohoo-product-prevnext .prevnext_price {
	display: block;
	padding-bottom: 10px;
	color: #444;
	font-size: 11px;
	line-height: 1.4;
}
.woohoo-product-prevnext a:hover .tooltip,
.woohoo-product-prevnext a:focus-visible .tooltip {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 992px) {
	.woohoo-product-prevnext {
		display: none;
	}
}
.single-product .bimaco-payment-methods {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 14px 0 4px;
	color: #4b5563;
	font-size: 13px;
	line-height: 1.5;
}
.single-product .bimaco-payment-methods > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.single-product .bimaco-payment-methods svg {
	flex: 0 0 22px;
	width: 22px;
	height: 16px;
}
.single-product .bimaco-payment-methods a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.single-product .bimaco-payment-methods a:hover,
.single-product .bimaco-payment-methods a:focus {
	color: #ec008c;
}
.single-product .bimaco-purchase-assurance {
	display: none;
}
@media (max-width: 992px) {
	.single-product .bimaco-purchase-assurance {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 16px;
		box-sizing: border-box;
		width: 100%;
		margin: 16px 0 8px;
		padding: 16px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		background: #f9fafb;
		font-family: inherit;
	}
	.single-product .bimaco-purchase-assurance__item {
		display: flex;
		align-items: flex-start;
		gap: 7px;
		min-width: 0;
		color: #1f2937;
		text-align: left;
		letter-spacing: 0;
	}
	.single-product .bimaco-purchase-assurance__item > span:last-child {
		min-width: 0;
	}
	.single-product .bimaco-purchase-assurance__mark {
		display: inline-flex;
		flex: 0 0 18px;
		width: 18px;
		height: 18px;
		margin-top: 1px;
		color: #00aeef;
		line-height: 1;
	}
	.single-product .bimaco-purchase-assurance__mark svg {
		display: block;
		width: 18px;
		height: 18px;
	}
	.single-product .bimaco-purchase-assurance__item strong,
	.single-product .bimaco-purchase-assurance__item small {
		display: block;
		overflow-wrap: break-word;
		letter-spacing: 0;
	}
	.single-product .bimaco-purchase-assurance__item strong {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
	}
	.single-product .bimaco-purchase-assurance__item small {
		margin-top: 3px;
		color: #4b5563;
		font-size: 12px;
		line-height: 1.4;
	}
	.single-product .product-widget {
		display: none;
	}
}