/* ══════════════════════════════════════════════════════════════
   K360 Add to Cart  ·  assets/k360-atc.css  ·  v2.0.1

   WooCommerces egen købsformular, tegnet om så den ser ud som på
   produktsiden i K360 Shop: antal i et gråt felt med minus og plus,
   en sort strakt Læg i kurv, rolige variantfelter.

   Markuppen er WooCommerces. Vi rører ikke ved den, kun ved
   udseendet, så temaer og andre plugins stadig finder det de leder
   efter.

   Alle regler starter med body.k360-atc:not(#k360). Det :not(#k360)
   giver reglerne id-styrke, så de vinder over temaets egne
   .woocommerce div.product form.cart-regler uden !important.

   Farverne kommer fra pluginnet som --k360-atc-accent, --k360-atc-ink
   og --k360-atc-felt på :root. Kører K360 Shop, følger de dets
   indstillinger.
   ══════════════════════════════════════════════════════════════ */

body.k360-atc {
	--atc-accent: var(--k360-atc-accent, #007083);
	--atc-ink: var(--k360-atc-ink, #141414);
	--atc-felt: var(--k360-atc-felt, #F1F0EE);
	--atc-dim: rgba(20, 20, 20, .54);
	--atc-linje: rgba(20, 20, 20, .10);
	--atc-e: cubic-bezier(.23, 1, .32, 1);
	--atc-radius: 10px;
	--atc-hoejde: 48px;
}

/* ── Formularen ──────────────────────────────────────────── */
body.k360-atc:not(#k360) form.cart {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background-color: transparent;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.k360-atc:not(#k360) form.cart *,
body.k360-atc:not(#k360) form.cart *::before,
body.k360-atc:not(#k360) form.cart *::after { box-sizing: border-box; }

/* Simple produkter: antal og knap på samme række, knappen strakt. */
body.k360-atc:not(#k360) form.cart:not(.variations_form):not(.grouped_form) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

body.k360-atc:not(#k360) form.cart:not(.variations_form):not(.grouped_form) > .quantity { flex: 0 0 auto; }
body.k360-atc:not(#k360) form.cart:not(.variations_form):not(.grouped_form) > .single_add_to_cart_button { flex: 1 1 200px; }
body.k360-atc:not(#k360) form.cart:not(.variations_form):not(.grouped_form) > .stock,
body.k360-atc:not(#k360) form.cart:not(.variations_form):not(.grouped_form) > p,
body.k360-atc:not(#k360) form.cart:not(.variations_form):not(.grouped_form) > div:not(.quantity) { flex: 0 0 100%; }

/* ── Antal ───────────────────────────────────────────────── */
/* Et gråt felt uden ramme. Minus og plus lægges til af scriptet. */
body.k360-atc:not(#k360) form.cart .quantity {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	height: var(--atc-hoejde);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--atc-radius);
	background-color: var(--atc-felt);
	float: none;
}

body.k360-atc:not(#k360) form.cart .quantity .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.k360-atc:not(#k360) form.cart .quantity input.qty {
	width: 52px;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	color: var(--atc-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.k360-atc:not(#k360) form.cart .quantity input.qty::-webkit-outer-spin-button,
body.k360-atc:not(#k360) form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.k360-atc:not(#k360) form.cart .quantity input.qty:focus { outline: none; box-shadow: none; }

body.k360-atc:not(#k360) form.cart .quantity:focus-within { box-shadow: 0 0 0 2px var(--atc-accent); }

body.k360-atc:not(#k360) form.cart .k360-atc-knap {
	display: grid;
	place-items: center;
	width: 40px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	color: var(--atc-ink);
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s var(--atc-e), color .25s var(--atc-e);
}

body.k360-atc:not(#k360) form.cart .k360-atc-knap svg { width: 12px; height: 12px; display: block; }
body.k360-atc:not(#k360) form.cart .k360-atc-knap[disabled] { color: var(--atc-linje); cursor: default; }

/* Temaer der selv har lagt plus og minus ind, skal ikke få dem to gange. */
body.k360-atc:not(#k360) form.cart .quantity .plus,
body.k360-atc:not(#k360) form.cart .quantity .minus,
body.k360-atc:not(#k360) form.cart .quantity .qty-btn,
body.k360-atc:not(#k360) form.cart .quantity .ast-qty-btn { display: none; }

/* ── Læg i kurv ──────────────────────────────────────────── */
/* Den samme sorte knap som Se mere på kortene i K360 Shop. */
body.k360-atc:not(#k360) form.cart .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-height: var(--atc-hoejde);
	margin: 0;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--atc-radius);
	box-shadow: none;
	/* Knappens farve er det eneste sted med !important: temaer og
	   Elementors globale knapfarve sætter den gerne med !important selv. */
	background-color: var(--atc-ink) !important;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transform: translateY(var(--atc-ky, 0px));
	transition: background-color .3s var(--atc-e), transform .3s var(--atc-e), box-shadow .3s var(--atc-e);
}

body.k360-atc:not(#k360) form.cart .single_add_to_cart_button:active { --atc-ky: 1px; }

body.k360-atc:not(#k360) form.cart .single_add_to_cart_button[disabled],
body.k360-atc:not(#k360) form.cart .single_add_to_cart_button.disabled,
body.k360-atc:not(#k360) form.cart .single_add_to_cart_button.wc-variation-selection-needed,
body.k360-atc:not(#k360) form.cart .single_add_to_cart_button.wc-variation-is-unavailable {
	opacity: .45;
	cursor: default;
}

/* ── Varianter ───────────────────────────────────────────── */
/* Etiketten over feltet, feltet i fuld bredde. */
body.k360-atc:not(#k360) form.cart table.variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background-color: transparent;
}

body.k360-atc:not(#k360) form.cart table.variations tbody,
body.k360-atc:not(#k360) form.cart table.variations tr,
body.k360-atc:not(#k360) form.cart table.variations th,
body.k360-atc:not(#k360) form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background-color: transparent;
	text-align: left;
}

body.k360-atc:not(#k360) form.cart table.variations tr { margin: 0 0 12px; }
body.k360-atc:not(#k360) form.cart table.variations tr:last-child { margin-bottom: 0; }

body.k360-atc:not(#k360) form.cart table.variations th,
body.k360-atc:not(#k360) form.cart table.variations th label {
	margin: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	color: var(--atc-dim);
}

body.k360-atc:not(#k360) form.cart table.variations th { padding-bottom: 6px; }

body.k360-atc:not(#k360) form.cart table.variations select {
	width: 100%;
	max-width: none;
	height: var(--atc-hoejde);
	margin: 0;
	padding: 0 40px 0 14px;
	border: 0;
	border-radius: var(--atc-radius);
	box-shadow: none;
	background-color: var(--atc-felt);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m2.5 4.5 3.5 3.5 3.5-3.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 12px;
	color: var(--atc-ink);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

body.k360-atc:not(#k360) form.cart table.variations select:focus { outline: none; box-shadow: 0 0 0 2px var(--atc-accent); }

body.k360-atc:not(#k360) form.cart .reset_variations {
	display: inline-block;
	margin: 8px 0 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--atc-dim);
	text-decoration: none;
	transition: color .25s var(--atc-e);
}

body.k360-atc:not(#k360) form.cart .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.k360-atc:not(#k360) form.cart .woocommerce-variation {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.k360-atc:not(#k360) form.cart .woocommerce-variation-price .price {
	margin: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--atc-ink);
}

body.k360-atc:not(#k360) form.cart .woocommerce-variation-price .price del { opacity: .45; font-weight: 400; }
body.k360-atc:not(#k360) form.cart .woocommerce-variation-price .price ins { text-decoration: none; }

body.k360-atc:not(#k360) form.cart .woocommerce-variation-price .price .woocommerce-price-suffix,
body.k360-atc:not(#k360) form.cart .woocommerce-variation-price .price small {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 400;
	color: var(--atc-dim);
}

body.k360-atc:not(#k360) form.cart .woocommerce-variation-description p {
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.55;
	color: var(--atc-dim);
}

body.k360-atc:not(#k360) form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.k360-atc:not(#k360) form.cart .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
body.k360-atc:not(#k360) form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 200px; }

/* ── Lager ───────────────────────────────────────────────── */
body.k360-atc:not(#k360) form.cart .stock,
body.k360-atc:not(#k360) form.cart .woocommerce-variation-availability .stock {
	margin: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--atc-dim);
}

body.k360-atc:not(#k360) form.cart .stock.out-of-stock { color: #A23B2B; }

/* ── Grupperede produkter ────────────────────────────────── */
body.k360-atc:not(#k360) form.cart table.group_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.k360-atc:not(#k360) form.cart table.group_table td {
	padding: 10px 0;
	border: 0;
	vertical-align: middle;
	font-family: inherit;
	font-size: 14px;
	background-color: transparent;
}

body.k360-atc:not(#k360) form.cart table.group_table tr + tr td { box-shadow: inset 0 1px 0 var(--atc-linje); }

body.k360-atc:not(#k360) form.cart table.group_table .woocommerce-grouped-product-list-item__label a {
	color: var(--atc-ink);
	font-weight: 500;
	text-decoration: none;
}

body.k360-atc:not(#k360) form.cart table.group_table .woocommerce-grouped-product-list-item__price {
	font-weight: 600;
	white-space: nowrap;
}

/* ── Berøring ────────────────────────────────────────────── */
@media (hover: none) {
	body.k360-atc:not(#k360) form.cart .single_add_to_cart_button:active { background-color: var(--atc-accent) !important; }
	body.k360-atc:not(#k360) form.cart .k360-atc-knap:active { background-color: rgba(20, 20, 20, .08); }
}

/* ── Mus ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
	body.k360-atc:not(#k360) form.cart .single_add_to_cart_button:not([disabled]):not(.disabled):not(.wc-variation-selection-needed):hover {
		background-color: var(--atc-accent) !important;
		box-shadow: 0 10px 20px -12px rgba(20, 20, 20, .55);
	}
	body.k360-atc:not(#k360) form.cart .k360-atc-knap:not([disabled]):hover { background-color: rgba(20, 20, 20, .08); }
	body.k360-atc:not(#k360) form.cart .reset_variations:hover { color: var(--atc-accent); }
	body.k360-atc:not(#k360) form.cart table.group_table .woocommerce-grouped-product-list-item__label a:hover { color: var(--atc-accent); }
}

/* ── Små skærme ──────────────────────────────────────────── */
@media (max-width: 560px) {
	body.k360-atc { --atc-hoejde: 46px; }
	body.k360-atc:not(#k360) form.cart .single_add_to_cart_button { font-size: 14px; }
}

/* ── Reduceret bevægelse ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	body.k360-atc:not(#k360) form.cart *,
	body.k360-atc:not(#k360) form.cart *::before,
	body.k360-atc:not(#k360) form.cart *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}