/* Archive Variation Toggle (type-brod)
 * Single-row layout: pills sit alongside the Kjøp button so card heights
 * align across simple and variable products. All three buttons share equal
 * flex width via display:contents on the inner pills wrapper.
 */

.kc-archive-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	align-items: stretch;
}

.kc-archive-picker__pills {
	display: contents;
}

.kc-archive-picker__pill,
.kc-archive-picker__buy {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box !important;
}

.kc-archive-picker__pill {
	background-color: #fff !important;
	color: #1a1a1a !important;
	border: 2px solid #e5e5e5 !important;
	border-radius: 0 !important;
	padding: 18px 8px !important;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: all 0.2s ease;
	box-shadow: none !important;
}

.kc-archive-picker__pill .kc-archive-picker__pill-label {
	display: block;
}

.kc-archive-picker__pill:hover {
	border-color: #888 !important;
	background-color: #fff !important;
	color: #1a1a1a !important;
}

.kc-archive-picker__pill:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.kc-archive-picker__pill.is-active {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
}

.kc-archive-picker__pill.is-unavailable,
.kc-archive-picker__pill[disabled] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.kc-archive-picker__pill.is-unavailable:hover,
.kc-archive-picker__pill[disabled]:hover {
	border-color: #e5e5e5 !important;
}

/* Buy button — visual skin comes from .product-buy-link button rule in
 * style.css; here we just enforce flex sizing + state classes. */
.kc-archive-picker__buy[disabled],
.kc-archive-picker__buy[aria-disabled="true"] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

.kc-archive-picker__buy.is-loading {
	opacity: 0.7 !important;
	cursor: progress !important;
}

.kc-archive-picker__buy.is-added {
	background-color: #2ea44f !important;
	border-color: #2ea44f !important;
	color: #fff !important;
}

/* Feedback wraps to its own row below the buttons. */
.kc-archive-picker__feedback {
	flex: 1 1 100%;
	font-size: 12px;
	min-height: 0;
	color: #666;
}

.kc-archive-picker__feedback[data-kind="error"] {
	color: #c0392b;
}

.kc-archive-picker__feedback[data-kind="success"] {
	color: #2ea44f;
}

/* ---------- Type-brød toggle layout ----------
 * Two-row elevated card:
 *   Row 1: [Default | Glutenfritt]   ← .kc-archive-picker__choice
 *   Row 2: [qty stepper] [Kjøp]      ← .kc-archive-picker__qty + __buy
 * The choice row is full-width via flex-basis:100%; flex-wrap on the form
 * lets qty + Kjøp share the next row at any width. Card surface (white +
 * shadow) is shared with the simple form rule in style.css under
 * `.product-buy-link form` — this file just contributes the variation row
 * and overrides for the segmented control. */

form.kc-archive-picker--toggle {
	margin: 0;
	padding: 6px !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

/* Segmented control on its own full-width row */
.kc-archive-picker__choice {
	flex: 1 1 100%;
	min-width: 0;
	display: flex;
	align-items: stretch;
	height: 46px;
	padding: 3px;
	gap: 2px;
	background: #ebe8e1;
	border-radius: 8px;
	box-sizing: border-box;
}

.kc-archive-picker__opt {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: #6b6b6b !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 0 14px !important;
	/* Override the legacy `.product-buy-link button { min-height: 60px }` rule
	 * on archive — without this, opts on archive pages balloon to 60px and
	 * overflow the 46px track. PDP doesn't have `.product-buy-link` so the
	 * issue only shows on archive. */
	min-height: 0 !important;
	height: auto !important;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
	box-shadow: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kc-archive-picker__opt-label {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kc-archive-picker__opt:hover {
	color: #1a1a1a !important;
	background: transparent !important;
}

.kc-archive-picker__opt.is-active {
	background: #fff !important;
	color: #1a1a1a !important;
	box-shadow: none !important;
}

.kc-archive-picker__opt:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.kc-archive-picker__opt.is-unavailable,
.kc-archive-picker__opt[disabled] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

.kc-archive-picker__opt.is-unavailable:hover,
.kc-archive-picker__opt[disabled]:hover {
	color: #6b6b6b !important;
}

/* Qty + Kjøp share the second row (matches the simple-form pattern). The
 * qib-container skin is provided by the override in style.css under
 * `.product-buy-link form .qib-container` — here we just reset the wrapper
 * so it sits naturally inside the elevated card. */
.kc-archive-picker--toggle .kc-archive-picker__qty {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
}

.kc-archive-picker--toggle .kc-archive-picker__qty .qib-container,
.kc-archive-picker--toggle .kc-archive-picker__qty .quantity {
	align-self: stretch;
}

/* Feedback wraps to its own row below */
.kc-archive-picker--toggle .kc-archive-picker__feedback {
	flex: 1 1 100%;
}