/* =========================================================================
   Krieg - single product
   ========================================================================= */

/* -------------------------------------------------------- 5. Single product */

.k-product {
	display: grid;
	gap: var(--k-7);
	align-items: start;
}

@media (min-width: 1024px) {
	.k-product {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--k-9);
	}

	/* The buy box follows the gallery down the page. On a long product page
	   with a tall image stack the add-to-cart control would otherwise scroll
	   away and the shopper has to hunt back up for it. */
	.k-product__summary {
		position: sticky;
		top: calc(var(--k-header-h-stuck) + var(--k-5));
	}
}

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* The frame used to sit on the slide, but FlexSlider sizes slides itself:
   measured at 674px inside a 676px viewport, which left the border 1px short
   on the left and 3px short on the right. An off-centre box with a sliver of
   background showing down one side is exactly what reads as a broken border.

   The viewport's box is the gallery's own 676px and cannot drift, so the
   frame belongs to it. The slide keeps the rounded clip so the image corners
   still follow the frame. */
.woocommerce-product-gallery .flex-viewport {
	position: relative;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	background: var(--k-surface);
	box-shadow: var(--k-shadow-md);
	cursor: grab;
}

.woocommerce-product-gallery .flex-viewport:active {
	cursor: grabbing;
}

.woocommerce-product-gallery__image {
	overflow: hidden;
	background: var(--k-surface);
}

/* Before FlexSlider has built the viewport there is nothing to carry the
   frame, so the wrapper holds it for that first paint. */
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	background: var(--k-surface);
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

.woocommerce-product-gallery .flex-control-thumbs {
	list-style: none;
	margin: var(--k-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--k-4);
}

/* WooCommerce zeroes this strip's margin from the same four-class selector
   that sized the items, so the thumbnails sat flush against the bottom edge
   of the main image - measured at a 0px gap. */
body.woocommerce div.product div.images .flex-control-thumbs,
body.woocommerce-page div.product div.images .flex-control-thumbs {
	margin-top: var(--k-5);
	/* WooCommerce clips this strip. Anything a thumbnail does outside its own
	   box - a lift, a focus ring - is cut off at the edge, so the strip is
	   allowed to paint outside itself. */
	overflow: visible;
}

/* WooCommerce sizes these list items from a four-class selector:
   .woocommerce div.product div.images .flex-control-thumbs li { width: 25% }.
   That outranked the grid, so every 125px cell held a 31px thumbnail floating
   in whitespace - measured on an eleven-image gallery. The grid owns the
   track width; the item has to stop fighting it. */
body.woocommerce div.product div.images .flex-control-thumbs li,
body.woocommerce-page div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
	border: 2px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	cursor: pointer;
	opacity: 0.62;
	transition: opacity var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease),
		transform var(--k-base) var(--k-spring);
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--k-accent);
}

/* The lift is a hover affordance and nothing more. On the selected thumbnail
   it raised the tile 2px out of the row, and the strip's own overflow: hidden
   then sliced the top edge off - so the one border meant to say "you are
   here" was the only one drawn incomplete. Measured: row at y=720, active
   tile at y=718. */
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
	transform: translateY(-2px);
}

/* FlexSlider's previous/next arrows are off by default in WooCommerce, so
   a gallery of eleven images gave no sign of itself beyond the thumbnail
   strip - and on a phone, where the strip sits below the fold, no sign at
   all. They are switched on through woocommerce_single_product_carousel_options
   and drawn here as real buttons. They are shown at rest rather than on
   hover: an arrow that only appears once the pointer is already over the
   image tells nobody that the image can be stepped through, which is the
   one job it has.

   FlexSlider inserts this list as a sibling of .flex-viewport inside the
   gallery, which also contains the thumbnails - so "top: 50%" would centre
   the arrows on the gallery, not on the image. That assumption only held
   while the images were square: on an 837x556 gallery the arrows measured
   141px low. product.js moves the list inside the viewport instead, so the
   50% below means the image's own centre whatever shape it is. */
.woocommerce-product-gallery .flex-direction-nav {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	z-index: 4;
}

.woocommerce-product-gallery .flex-direction-nav li {
	margin: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--k-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--k-shadow-md);
	color: var(--k-ink);
	font-size: 0;
	text-indent: 0;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%);
	transition: opacity var(--k-base) var(--k-ease), background var(--k-fast) var(--k-ease);
}

/* The chevron is drawn from two borders so it needs no icon font. */
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
	left: var(--k-4);
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
	margin-left: 3px;
	transform: rotate(-135deg);
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
	right: var(--k-4);
}

.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
	margin-right: 3px;
	transform: rotate(45deg);
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: var(--k-white);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--k-4);
	right: var(--k-4);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--k-line);
	box-shadow: var(--k-shadow-md);
	display: grid;
	place-items: center;
	text-decoration: none;
	font-size: 0;
	transition: transform var(--k-base) var(--k-spring);
}

.woocommerce-product-gallery__trigger:hover {
	transform: scale(1.08);
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 13px;
	height: 13px;
	border: 1.6px solid var(--k-ink);
	border-radius: 50%;
}

.woocommerce-product-gallery__trigger::after {
	content: "";
	position: absolute;
	width: 6px;
	height: 1.6px;
	background: var(--k-ink);
	transform: rotate(45deg);
	bottom: 11px;
	right: 10px;
}

.k-product__summary .k-eyebrow {
	margin-bottom: var(--k-2);
}

.k-product__title {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0 0 var(--k-4);
	text-transform: none;
}

.k-product__summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--k-font-display);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--k-ink);
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: var(--k-3);
	flex-wrap: wrap;
	margin: 0 0 var(--k-4);
}

.woocommerce div.product p.price del {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--k-muted);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--k-accent);
}

.k-saveline {
	display: inline-flex;
	align-items: center;
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-white);
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
	padding: 7px 13px;
	border-radius: var(--k-radius-pill);
	line-height: 1.3;
	box-shadow: 0 3px 12px -5px rgba(21, 128, 61, 0.8);
}

.woocommerce-product-details__short-description {
	color: var(--k-ink-soft);
	font-size: var(--k-t-sm);
	padding-block: var(--k-4);
	border-top: 1px solid var(--k-line);
	border-bottom: 1px solid var(--k-line);
	margin-bottom: var(--k-5);
}

/* Availability status above the buy controls. WooCommerce's own bare stock
   paragraph is hidden in favour of this one so the fact is stated once,
   not twice. */

.k-pstock {
	display: inline-flex;
	align-items: center;
	gap: var(--k-2);
	font-size: var(--k-t-sm);
	font-weight: 600;
	margin: 0 0 var(--k-5);
	padding: 9px var(--k-4);
	border-radius: var(--k-radius-pill);
	line-height: 1.3;
}

.k-pstock .k-icon {
	flex: none;
}

.k-pstock--ok {
	color: var(--k-ok);
	background: var(--k-ok-soft);
}

.k-pstock--low {
	color: var(--k-warn);
	background: var(--k-warn-soft);
}

.k-pstock--out {
	color: var(--k-muted);
	background: var(--k-surface);
}

.woocommerce div.product form.cart p.stock,
.woocommerce div.product p.stock {
	display: none;
}

/* Delivery and support note under the buy controls. */

.k-pnote {
	display: flex;
	align-items: flex-start;
	gap: var(--k-3);
	margin-top: var(--k-4);
	padding: var(--k-4);
	border: 1px dashed var(--k-line-strong);
	border-radius: var(--k-radius);
	background: var(--k-paper);
}

.k-pnote .k-icon {
	flex: none;
	margin-top: 2px;
	color: var(--k-ink-soft);
}

.k-pnote p {
	margin: 0;
	font-size: var(--k-t-xs);
	line-height: 1.6;
	color: var(--k-muted);
}

.k-pnote a {
	display: inline-block;
	font-weight: 700;
	color: var(--k-accent);
	text-decoration: none;
	white-space: nowrap;
}

.k-pnote a:hover {
	text-decoration: underline;
}

/* Quantity + cart */

.woocommerce div.product form.cart {
	display: grid;
	gap: var(--k-3);
	margin-bottom: var(--k-5);
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

.k-buyrow {
	display: flex;
	gap: var(--k-3);
	align-items: stretch;
	flex-wrap: wrap;
}

.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	overflow: hidden;
	flex: none;
	transition: border-color var(--k-fast) var(--k-ease);
}

.quantity:focus-within {
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-ring);
}

/* A readonly quantity (sold individually, some grouped products) cannot be
   stepped, so the controls are hidden rather than left inert. */
.quantity:has(input[readonly]) .k-qtybtn {
	display: none;
}

.quantity .k-qtybtn {
	width: 44px;
	border: 0;
	background: var(--k-white);
	color: var(--k-ink);
	display: grid;
	place-items: center;
	transition: background var(--k-fast) var(--k-ease);
}

.quantity .k-qtybtn:hover {
	background: var(--k-surface);
}

.quantity input.qty {
	width: 52px;
	border: 0;
	border-inline: 1px solid var(--k-line);
	text-align: center;
	font-family: var(--k-font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	background: var(--k-white);
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	flex: 1 1 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-2);
	padding: 18px var(--k-6);
	border: 1px solid transparent;
	border-radius: var(--k-radius);
	box-shadow: 0 6px 18px -8px rgba(216, 35, 42, 0.6);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	color: var(--k-white);
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-accent);
}

.woocommerce div.product form.cart .button:active,
.woocommerce div.product .single_add_to_cart_button:active {
	transform: translateY(0);
}

.woocommerce div.product .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Variations */

.woocommerce div.product form.cart .variations {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 var(--k-3);
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	text-align: left;
	padding: 0;
	border: 0;
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
	margin-bottom: var(--k-2);
	display: block;
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	padding: 13px 40px 13px var(--k-4);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	background: var(--k-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2377777f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
		no-repeat right var(--k-4) center;
	font-size: var(--k-t-sm);
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--k-t-xs);
	color: var(--k-muted);
}

.woocommerce-variation-price {
	margin-bottom: var(--k-3);
}

/* Product meta + assurances */

.k-pmeta {
	margin: var(--k-5) 0 0;
	padding-top: var(--k-5);
	border-top: 1px solid var(--k-line);
	display: grid;
	gap: var(--k-2);
	font-size: var(--k-t-sm);
}

.k-pmeta__row {
	display: flex;
	gap: var(--k-3);
}

.k-pmeta dt {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-muted);
	min-width: 92px;
	padding-top: 2px;
}

.k-pmeta dd {
	margin: 0;
}

.k-pmeta a {
	text-decoration: none;
	border-bottom: 1px solid var(--k-line-strong);
}

.k-assure {
	list-style: none;
	margin: var(--k-5) 0 0;
	padding: var(--k-5);
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	display: grid;
	gap: var(--k-4);
}

.k-assure__item {
	display: flex;
	align-items: center;
	gap: var(--k-4);
	font-size: var(--k-t-sm);
}

.k-assure__item .k-icon {
	color: var(--k-white);
	flex: none;
	background: var(--k-grad-accent);
	border-radius: 50%;
	padding: 7px;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
}

.k-assure strong {
	display: block;
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
}

.k-assure em {
	font-style: normal;
	color: var(--k-muted);
	font-size: var(--k-t-xs);
}

/* Tabs */

.woocommerce-tabs {
	margin-top: clamp(var(--k-7), 5vw, var(--k-9));
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0 0 var(--k-6);
	padding: 0;
	display: flex;
	gap: var(--k-6);
	border-bottom: 1px solid var(--k-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--k-4) 0;
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--k-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--k-ink);
	border-bottom-color: var(--k-accent);
}

.woocommerce-tabs .panel {
	max-width: 80ch;
	font-size: var(--k-t-sm);
	color: var(--k-ink-soft);
}

.woocommerce-tabs .panel h2 {
	font-size: var(--k-t-h3);
	text-transform: none;
}

.shop_attributes {
	font-size: var(--k-t-sm);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
}

.shop_attributes th,
.shop_attributes td {
	padding: var(--k-3) var(--k-4);
	border-bottom: 1px solid var(--k-line);
	text-align: left;
}

.shop_attributes tr:last-child th,
.shop_attributes tr:last-child td {
	border-bottom: 0;
}

.shop_attributes th {
	background: var(--k-paper);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	width: 34%;
}

.shop_attributes td p {
	margin: 0;
}

/* Related / upsells */

.related,
.upsells,
.cross-sells {
	margin-top: clamp(var(--k-7), 5vw, var(--k-9));
}

.related > h2,
.upsells > h2,
.cross-sells > h2 {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin-bottom: var(--k-7);
}

/* Sticky mobile buy bar */

.k-stickybuy {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: var(--k-3);
	padding: var(--k-3) var(--k-gutter);
	padding-bottom: calc(var(--k-3) + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-top: 1px solid var(--k-line);
	box-shadow: 0 -10px 36px -14px rgba(14, 14, 17, 0.3);
	transform: translateY(110%);
	transition: transform var(--k-base) var(--k-ease);
}

.k-stickybuy.is-visible {
	transform: translateY(0);
}

@media (min-width: 1024px) {
	.k-stickybuy {
		display: none;
	}
}

.k-stickybuy__info {
	flex: 1;
	min-width: 0;
}

.k-stickybuy__name {
	font-size: var(--k-t-xs);
	font-weight: 600;
	color: var(--k-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.k-stickybuy__price {
	font-family: var(--k-font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.k-stickybuy__price del {
	font-weight: 400;
	font-size: var(--k-t-xs);
	color: var(--k-muted);
	margin-right: 4px;
}


/* ------------------------------------------- WooCommerce layout overrides */

/*
 * woocommerce-layout.css floats the gallery and summary at fixed percentage
 * widths. Those floats win over the theme's grid and produce a cramped
 * two-column product page at every width, phones included. Neutralising them
 * hands the layout back to .k-product.
 */
/*
 * The extra .k-single class is there to out-weigh WooCommerce's own
 * ".woocommerce div.product div.images" rule. Both sheets are loaded, and
 * matching its specificity would leave the result depending on load order,
 * which changes as soon as another plugin enqueues something.
 */
.woocommerce div.product.k-single div.images,
.woocommerce div.product.k-single div.summary,
.woocommerce div.product.k-single .woocommerce-product-gallery,
.woocommerce #content div.product.k-single div.images,
.woocommerce #content div.product.k-single div.summary {
	float: none;
	width: auto;
	margin-bottom: 0;
	max-width: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin-bottom: 0;
}

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	float: none;
	width: auto;
}

/* WooCommerce prints the title; the theme just restyles it in place. */
.woocommerce div.product .product_title,
.k-product__summary .product_title {
	font-family: var(--k-font-display);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	text-transform: none;
	margin: 0 0 var(--k-4);
	padding: 0;
	color: var(--k-ink);
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	display: none;
}

.k-product__flags {
	position: absolute;
	top: var(--k-4);
	left: var(--k-4);
	z-index: 3;
	display: grid;
	gap: 6px;
	justify-items: start;
}

.k-product__gallery {
	position: relative;
}

/* ------------------------------------------------ Advanced Woo Labels plugin

   Advanced Woo Labels is configured to draw an "on image" label on the single
   product page only. It is absolutely positioned at the top-left of the
   gallery, which is exactly where this theme draws its own badge stack, so
   the two sat on top of each other and the label it shows - "Pre Owned" -
   repeats a badge the theme already derives from the product's own category.

   The theme's stack is kept because it also carries the discount percentage
   and the sold-out state, and it is the same component used on every card in
   the catalogue. The plugin's label is hidden here rather than removed, so it
   returns the moment this theme is switched out. If those labels are wanted
   instead, delete this rule and krieg_product_badges() in
   inc/template-functions.php is the one place to trim.                      */

.k-single .advanced-woo-labels.awl-position-type-on-image {
	/* The plugin sets display:flex from its own stylesheet, so this needs the
	   same weight to win. */
	display: none !important;
}

/* =========================================================================
   Single add-to-cart: icon, loading and confirmed states

   The button adds over AJAX, so it has to say what is happening on its own
   face. The spans are added by product.js from the icons passed in kriegData.
   ========================================================================= */

.woocommerce div.product form.cart .button .k-atc__icon,
.woocommerce div.product form.cart .button .k-atc__done {
	display: inline-flex;
	flex: none;
}

.woocommerce div.product form.cart .button .k-atc__done {
	display: none;
}

/* Posting. The label steps back and a spinner takes over. */
.woocommerce div.product form.cart .button.loading {
	pointer-events: none;
}

.woocommerce div.product form.cart .button.loading .k-atc__icon {
	display: none;
}

.woocommerce div.product form.cart .button.loading .k-atc__label {
	opacity: 0.65;
}

.woocommerce div.product form.cart .button.loading::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: k-spin 700ms linear infinite;
}

/* Added. Green with a tick, for as long as the card's own confirmed state. */
.woocommerce div.product form.cart .button.is-done,
.woocommerce div.product .single_add_to_cart_button.is-done {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
	border-color: transparent;
	box-shadow: 0 6px 18px -8px rgba(21, 128, 61, 0.7);
}

.woocommerce div.product form.cart .button.is-done .k-atc__icon {
	display: none;
}

.woocommerce div.product form.cart .button.is-done .k-atc__done {
	display: inline-flex;
	animation: k-tick var(--k-base) var(--k-spring) both;
}