/* Gavekort: produktsidens felter. Farver fra Saunahytten: brun #ab8b65, orange #d16725, mørkeblå #333c4e, sand #e8c090. */

.gk-product {
	--gk-brown: #ab8b65;
	--gk-orange: #d16725;
	--gk-navy: #333c4e;
	--gk-sand: #e8c090;
	margin: 0 0 1.5em;
	padding: 1.25em 1.25em 1em;
	border: 1px solid var(--gk-sand);
	border-radius: 10px;
	background: #fffaf3;
	color: var(--gk-navy);
	max-width: 560px;
}

.gk-product fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.gk-product__legend {
	display: block;
	margin: 0 0 .6em;
	padding: 0;
	font-weight: 700;
	font-size: 1.05em;
	color: var(--gk-navy);
}

.gk-product__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.gk-product__amount {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.2em;
	margin: 0;
	padding: .55em .9em;
	border: 2px solid var(--gk-brown);
	border-radius: 999px;
	background: #fff;
	color: var(--gk-navy);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.gk-product__amount input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.gk-product__amount:hover {
	border-color: var(--gk-orange);
}

.gk-product__amount.is-selected,
.gk-product__amount:has(input:checked) {
	border-color: var(--gk-orange);
	background: var(--gk-orange);
	color: #fff;
}

.gk-product__amount:focus-within {
	outline: 2px solid var(--gk-navy);
	outline-offset: 2px;
}

.gk-product__custom {
	margin: .9em 0 0;
}

.gk-product__custom[hidden],
.gk-product__recipient-fields[hidden] {
	display: none;
}

.gk-product label {
	color: var(--gk-navy);
}

.gk-product__custom label,
.gk-product__recipient-fields label {
	display: block;
	margin: 0 0 .25em;
	font-weight: 600;
	font-size: .95em;
}

.gk-product input[type="number"],
.gk-product input[type="text"],
.gk-product input[type="email"],
.gk-product textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: .55em .7em;
	border: 1px solid var(--gk-brown);
	border-radius: 6px;
	background: #fff;
	color: var(--gk-navy);
	font: inherit;
}

.gk-product input[type="number"] {
	max-width: 10em;
}

.gk-product input:focus,
.gk-product textarea:focus {
	border-color: var(--gk-orange);
	outline: 2px solid rgba(209, 103, 37, .25);
	outline-offset: 0;
}

.gk-product__recipient {
	margin: 1.1em 0 0;
	padding: 1em 0 0;
	border-top: 1px solid var(--gk-sand);
}

.gk-product__toggle {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-weight: 600;
	cursor: pointer;
}

.gk-product__toggle input {
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	accent-color: var(--gk-orange);
}

.gk-product__recipient-fields {
	margin: .8em 0 0;
}

.gk-product__recipient-fields p {
	margin: 0 0 .8em;
}

.gk-product__count {
	display: block;
	margin: .2em 0 0;
	font-size: .85em;
	color: var(--gk-brown);
	text-align: right;
}

.gk-product__hint {
	margin: .6em 0 0;
	font-size: .9em;
	color: var(--gk-brown);
}

.gk-product__price {
	margin: 1em 0 0;
	font-size: 1.1em;
	color: var(--gk-navy);
}

.gk-product__price-value {
	color: var(--gk-orange);
}