/* ---------------------------------------------------------
   Stormfixar Ramar - variantvaljaren i looputskriften.
   Allt ar scopat till .cw-variant-wrap / .cw-sample-btn.
   Klassnamnen ar kvar fran det fristaende CW Variant Picker
   sa att befintliga korts CSS och mallar fortsatter galla.
   !important anvands bara dar Breakdance egna knapp- och
   lankstilar annars hade vunnit pa specificitet.
   --------------------------------------------------------- */

/* Wrapper + buttons must sit ABOVE Breakdance's card link overlay
   (.bde-container-link is position:absolute; inset:0). Without this
   the overlay swallows every click and navigates to the product. */
.cw-variant-wrap,
.cw-sample-btn {
	position: relative !important;
	z-index: 20;
}

.cw-variant-wrap {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 16px 0 0;
}


/* ---------- shared button ---------- */

.cw-sample-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;

	width: 100%;
	min-width: 0;
	height: 54px;
	min-height: 54px;

	margin: 0;
	padding: 0 24px !important;

	border: 0 !important;
	outline: 0;
	border-radius: 999px !important;

	background: #292929 !important;
	background-image: none !important;
	color: #fff !important;

	font-family: inherit;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none !important;

	overflow: hidden;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;

	transition:
		background-color .25s ease,
		color .25s ease,
		transform .25s cubic-bezier(.22,1,.36,1),
		box-shadow .25s ease;
}

.cw-sample-btn::after {
	content: none !important;
}

.cw-sample-btn:hover {
	background: #171717 !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}

.cw-sample-btn:active {
	transform: translateY(0) scale(.99);
}

.cw-sample-btn:focus-visible {
	outline: 2px solid #292929;
	outline-offset: 2px;
}

/* loading shimmer */
.cw-sample-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
	transform: translateX(-100%);
	pointer-events: none;
	opacity: 0;
}

.cw-sample-btn.is-loading::before {
	opacity: 1;
	animation: cwvpShimmer .9s linear infinite;
}

@keyframes cwvpShimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

.cw-sample-btn.is-loading {
	cursor: progress;
}

/* Success. The hover selector is repeated because .cw-sample-btn:hover would
   otherwise repaint the button mid-confirmation if the cursor is still on it. */
.cw-sample-btn.is-added,
.cw-sample-btn.is-added:hover {
	background: #157347 !important;
	color: #fff !important;
	transform: none;
	box-shadow: none !important;
}

.cw-sample-btn.is-error {
	background: #8c2f2f !important;
}


/* ---------- icons ---------- */

.cw-sample-btn .cw-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.cw-sample-btn .cw-bag,
.cw-sample-btn .cw-check,
.cw-sample-btn .cw-chevron {
	display: block;
	width: 17px;
	height: 17px;
	stroke: currentColor;
}

.cw-sample-btn .cw-check {
	display: none;
}

.cw-sample-btn.is-added .cw-bag {
	display: none;
}

.cw-sample-btn.is-added .cw-check {
	display: block;
	animation: cwvpPop .38s cubic-bezier(.22,1,.36,1);
}

@keyframes cwvpPop {
	0%   { transform: scale(.4); opacity: 0; }
	60%  { transform: scale(1.14); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

.cw-sample-btn .cw-chevron {
	transition: transform .35s cubic-bezier(.22,1,.36,1);
}

.cw-variant-wrap.is-open .cw-sample-btn.is-variant .cw-chevron {
	transform: rotate(180deg);
}


/* ---------- labels (CSS-only state switching, never touched by JS) ---------- */

.cw-sample-btn .cw-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cw-sample-btn .cw-label-open,
.cw-sample-btn .cw-label-ready,
.cw-sample-btn .cw-label-added {
	display: none;
}

.cw-variant-wrap.is-open .cw-sample-btn.is-variant .cw-label-idle { display: none; }
.cw-variant-wrap.is-open .cw-sample-btn.is-variant .cw-label-open { display: inline-flex; }

.cw-sample-btn.is-ready .cw-label-idle  { display: none; }
.cw-sample-btn.is-ready .cw-label-ready { display: inline-flex; }

.cw-sample-btn.is-added .cw-label-idle  { display: none; }
.cw-sample-btn.is-added .cw-label-ready { display: none; }
.cw-sample-btn.is-added .cw-label-added { display: inline-flex; }

.cw-sample-btn .cw-label-mobile { display: none; }

@media (max-width: 480px) {
	.cw-sample-btn .cw-label-desktop { display: none; }
	.cw-sample-btn .cw-label-mobile  { display: inline; }
}


/* ---------- sold out / view ---------- */

.cw-sample-btn.is-soldout {
	background: #eee !important;
	color: #a3a3a3 !important;
	cursor: default;
	margin: 16px 0 0;
}

.cw-sample-btn.is-soldout:hover {
	background: #eee !important;
	transform: none;
	box-shadow: none !important;
}

.cw-sample-btn.is-add-simple,
.cw-sample-btn.is-view {
	margin: 16px 0 0;
}


/* ---------- panel (portaled to <body>, position:fixed) ---------- */

.cw-variant-panel {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;

	width: 320px;
	max-height: 70vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	background: #fff;
	border: 1px solid rgba(15,23,42,.07);
	border-radius: 18px;
	box-shadow:
		0 14px 34px rgba(15,23,42,.12),
		0 3px 10px rgba(15,23,42,.05);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px) scale(.98);
	transform-origin: top center;

	transition:
		opacity .2s ease,
		transform .28s cubic-bezier(.22,1,.36,1),
		visibility .2s ease;
}

.cw-variant-panel.is-above {
	transform-origin: bottom center;
	transform: translateY(6px) scale(.98);
}

.cw-variant-panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.cw-variant-panel-inner {
	padding: 16px 14px 15px;
}


/* ---------- attribute groups ---------- */

.cw-attr-group {
	display: block;
	width: 100%;
	margin: 0 0 14px;
}

.cw-attr-label {
	display: block;
	margin: 0 0 9px;
	color: #657086;
	font-family: inherit;
	font-size: 11px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.cw-attr-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	width: 100%;
}


/* ---------- pills ---------- */

.cw-variant-panel .cw-pill {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;

	width: auto;
	min-width: 0;
	min-height: 34px;

	margin: 0;
	padding: 7px 14px !important;

	border: 1px solid transparent !important;
	border-radius: 999px !important;

	background: #f3f3f3 !important;
	color: #161616 !important;

	font-family: inherit;
	font-size: 12px;
	line-height: 1.1;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;

	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;

	transition:
		color .2s ease,
		background-color .2s ease,
		border-color .2s ease,
		transform .2s cubic-bezier(.22,1,.36,1);
}

.cw-variant-panel .cw-pill:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) {
	background: #e9e9e9 !important;
	transform: translateY(-1px);
}

.cw-variant-panel .cw-pill[aria-pressed="true"] {
	background: #050505 !important;
	border-color: #050505 !important;
	color: #fff !important;
}

/* A selected pill is still clickable (clicking it deselects), so it gets a
   hover state — just a subtle lift in tone, no movement. */
.cw-variant-panel .cw-pill[aria-pressed="true"]:hover {
	background: #242424 !important;
	border-color: #242424 !important;
	transform: none;
}

.cw-variant-panel .cw-pill:focus-visible {
	outline: 2px solid #050505;
	outline-offset: 2px;
}

/* aria-disabled, NOT the disabled attribute — disabled elements fire no
   click events, which means we could not cancel Breakdance's card link. */
.cw-variant-panel .cw-pill[aria-disabled="true"] {
	background: #f7f7f7 !important;
	color: #b8b8b8 !important;
	border-color: transparent !important;
	cursor: not-allowed;
	transform: none;
}

.cw-variant-panel .cw-pill.is-out-of-stock .cw-pill-name {
	text-decoration: line-through;
}

/* Färgprick för ramtyperna, samma igenkänning som på produktsidan. Ringen
   ligger både innanför och utanför kanten så att pricken håller sig synlig mot
   både den ljusa knappen och den svarta när valet är gjort. */
.cw-pill-chip {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border-radius: 3px;
	background-color: var(--chip, #eee);
	background-size: cover;
	background-position: center;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .28),
		0 0 0 1px rgba(255, 255, 255, .35);
}

.cw-pill-price {
	font-weight: inherit;
}

.cw-pill-stock {
	font-size: 10px;
	letter-spacing: .02em;
}


/* ---------- add-to-cart inside panel ---------- */

.cw-variant-panel .cw-sample-btn.is-add-variant {
	height: 52px;
	min-height: 52px;
	padding: 0 22px !important;
	margin-top: 2px;
}

.cw-variant-panel .cw-sample-btn.is-add-variant[aria-disabled="true"] {
	background: #f0f0f0 !important;
	color: #adadad !important;
	cursor: not-allowed;
	transform: none;
	box-shadow: none !important;
}

.cw-variant-panel .cw-sample-btn.is-add-variant[aria-disabled="true"] .cw-icon-wrap {
	display: none;
}

/* Outranks the [aria-disabled] rule above, which is more specific than the
   generic .is-added state. */
.cw-variant-panel .cw-sample-btn.is-add-variant.is-added,
.cw-variant-panel .cw-sample-btn.is-add-variant.is-added:hover {
	background: #157347 !important;
	color: #fff !important;
	cursor: default;
}

.cw-variant-panel .cw-sample-btn.is-add-variant.is-added .cw-icon-wrap {
	display: inline-flex;
}

.cw-vp-error {
	margin: 10px 0 0;
	color: #8c2f2f;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

.cw-vp-error:empty {
	display: none;
}


/* ---------- mobile ---------- */

@media (max-width: 767px) {
	.cw-variant-wrap { margin-top: 14px; }

	.cw-sample-btn {
		height: 52px;
		min-height: 52px;
		padding: 0 18px !important;
	}

	.cw-variant-panel-inner { padding: 15px 13px; }

	.cw-variant-panel .cw-pill {
		min-height: 32px;
		padding: 7px 12px !important;
		font-size: 11px;
	}

	.cw-variant-panel .cw-sample-btn.is-add-variant {
		height: 50px;
		min-height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-sample-btn,
	.cw-variant-panel,
	.cw-variant-panel .cw-pill {
		transition-duration: .01ms !important;
	}
	.cw-sample-btn.is-loading::before,
	.cw-sample-btn.is-added .cw-check {
		animation: none !important;
	}
}