/* K360 Product Card - hvidt, lækkert kort. Alt scoped til .k-card. */

:root{
	--k-card-accent: var(--wc-accent, #007083);
	--k-card-ink: #16202b;
	--k-card-muted: #6b7280;
	--k-card-ease: cubic-bezier(.23, 1, .32, 1);
	--k-bag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5.5%208h13l-1%2011.2a2%202%200%200%201-2%201.8H6.5a2%202%200%200%201-2-1.8L3.5%208%27%2F%3E%3Cpath%20d%3D%27M8.5%208V6.5a3.5%203.5%200%200%201%207%200V8%27%2F%3E%3C%2Fsvg%3E");
}

/* ---- Card shell: white, no border, no base shadow ---- */
li.product.k-card,
li.product.k-card *{
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
li.product.k-card{
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	list-style: none;
	background: #fff !important;
	border: 0 !important;
	border-radius: 18px;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: visible;
	text-align: left;
	transition: transform .45s var(--k-card-ease), box-shadow .45s var(--k-card-ease);
}
li.product.k-card *{ box-sizing: border-box; }

@media (hover: hover){
	li.product.k-card:hover{
		transform: translateY(-6px);
		box-shadow: 0 22px 48px rgba(16, 22, 40, .14);
	}
}

.k-card .k-card__link{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none !important;
	color: inherit;
	box-shadow: none !important;
}

/* ---- Media (full-bleed top, rounded) ---- */
.k-card .k-card__media{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 18px 18px 0 0;
	overflow: hidden;
	background: #fff;
}
.k-card .k-card__media img{
	width: 100%;
	height: 100%;
	/* Hele produktbilledet vises. Skift til cover hvis du vil fylde feltet. */
	object-fit: contain;
	padding: 14px;
	margin: 0;
	display: block;
	transition: transform .6s var(--k-card-ease);
}
@media (hover: hover){
	.k-card:hover .k-card__media img{ transform: scale(1.06); }
}

/* Sale / sold-out badges */
.k-card .k-card__badge{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: var(--k-card-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 999px;
	letter-spacing: .02em;
	transform: translateY(0);
	transition: transform .45s var(--k-card-ease);
}
.k-card .k-card__badge--soldout{ background: var(--k-card-ink); left: auto; right: 12px; }
@media (hover: hover){
	.k-card:hover .k-card__badge{ transform: translateY(-2px); }
}

/* Category overlay - bottom-left on the image */
.k-card .k-card__cat{
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	max-width: calc(100% - 24px);
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .045em;
	color: var(--k-card-ink);
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding: 6px 11px;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 6px 16px rgba(16, 22, 40, .12);
	transition: background-color .35s var(--k-card-ease), color .35s var(--k-card-ease), transform .35s var(--k-card-ease);
}
@media (hover: hover){
	.k-card:hover .k-card__cat{ background: var(--k-card-accent); color: #fff; transform: translateY(-2px); }
}

/* ---- Body ---- */
.k-card .k-card__body{
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	padding: 15px 16px 4px;
}
.k-card .k-card__title{
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--k-card-ink);
	transition: color .3s var(--k-card-ease);
}
@media (hover: hover){
	.k-card:hover .k-card__title{ color: var(--k-card-accent); }
}
.k-card .k-card__price{
	font-size: 15.5px;
	font-weight: 600;
	color: var(--k-card-accent);
}
.k-card .k-card__price del,
.k-card .k-card__price del .woocommerce-Price-amount{
	color: var(--k-card-muted);
	font-weight: 400;
	opacity: .85;
	margin-right: 6px;
}
.k-card .k-card__price ins{ text-decoration: none; background: transparent; }

/* ---- Add to cart (Woo AJAX button) with icon ----
   High specificity + !important so theme .woocommerce .button rules can't win. */
.woocommerce li.product.k-card a.button,
.woocommerce li.product.k-card button.button,
li.product.k-card .button,
li.product.k-card a.added_to_cart{
	position: relative;
	margin: 14px 16px 16px !important;
	min-height: 48px !important;
	padding: 0 18px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	width: auto !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	background: var(--k-card-accent) !important;
	color: #fff !important;
	transition: filter .3s var(--k-card-ease), transform .25s var(--k-card-ease) !important;
}

/* Bag icon (CSS mask, longhands - robust across browsers) */
.woocommerce li.product.k-card a.button::before,
.woocommerce li.product.k-card button.button::before,
li.product.k-card .button::before{
	content: "" !important;
	display: block;
	width: 17px;
	height: 17px;
	flex: none;
	background-color: #fff;
	-webkit-mask-image: var(--k-bag);
	mask-image: var(--k-bag);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .3s var(--k-card-ease);
}

li.product.k-card a.added_to_cart{
	margin-top: 0 !important;
	background: transparent !important;
	color: var(--k-card-accent) !important;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-card-accent) 35%, transparent) !important;
}

@media (hover: hover){
	li.product.k-card .button:hover{ filter: brightness(1.07); }
	li.product.k-card .button:hover::before{ transform: translateY(-1px) scale(1.06); }
	li.product.k-card a.added_to_cart:hover{ box-shadow: inset 0 0 0 1.5px var(--k-card-accent) !important; }
}
li.product.k-card .button:active{ transform: scale(.985); }

/* Loading state: hide label + icon, show spinner */
li.product.k-card .button.loading{ color: transparent !important; pointer-events: none; }
li.product.k-card .button.loading::before{ opacity: 0; }
li.product.k-card .button.loading::after{
	content: "" !important;
	position: absolute;
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	animation: kCardSpin .6s linear infinite;
}
@keyframes kCardSpin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
	.k-card, .k-card *{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
}