/* AS Checkout – Seitenwarenkorb.
   Handy: von unten (max. 92 % Höhe). Ab 768 px: von rechts, 400 px breit. */

/* Blocksy-Dropdown und grauen «Zur Kasse»-Knopf ausblenden, sobald der
   Seitenwarenkorb bereit ist (vorher bleibt alles wie bisher). */
.as-sc-ready .ct-header-cart .ct-cart-content {
	display: none !important;
}

.as-sc-ready .single-product .added_to_cart.wc-forward,
.as-sc-ready .single-product a.added_to_cart {
	display: none !important;
}

.as-sc-open,
.as-sc-open body {
	overflow: hidden;
}

.as-sc[hidden] {
	display: none;
}

.as-sc {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-size: 15px;
	color: var(--as-c-text);
}

.as-sc__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(21, 26, 36, .45);
	opacity: 0;
	transition: opacity .25s;
}

.as-sc__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 92vh;
	max-height: 92dvh;
	border-radius: 16px 16px 0 0;
	background: var(--as-c-white);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
	transform: translateY(100%);
	transition: transform .25s ease-out;
	outline: none;
}

.as-sc.is-open .as-sc__backdrop {
	opacity: 1;
}

.as-sc.is-open .as-sc__panel {
	transform: none;
}

@media (min-width: 768px) {
	/* Dropdown unter dem Warenkorb-Wimpel (Position per JS). */
	.as-sc__backdrop {
		background: transparent;
	}

	.as-sc__panel {
		top: 80px;
		right: 16px;
		left: auto;
		bottom: auto;
		width: 400px;
		max-width: calc(100vw - 32px);
		max-height: calc(100vh - 100px);
		border-radius: 12px;
		overflow: hidden; /* Fussbereich (weiss) folgt den runden Ecken */
		box-shadow: 0 12px 40px rgba(21, 26, 36, .22);
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .18s ease-out, transform .18s ease-out;
	}

	.as-sc.is-open .as-sc__panel {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.as-sc__panel,
	.as-sc__backdrop {
		transition: none;
	}
}

.as-sc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--as-c-line);
}

.as-sc__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--as-c-head);
}

.as-sc__title.is-added {
	color: var(--as-c-ok);
}

.as-sc__title.is-added::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: -3px 8px 0 0;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--as-c-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.as-sc__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: -6px -8px -6px 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--as-c-head);
	cursor: pointer;
}

.as-sc__close:hover {
	background: var(--as-c-soft);
}

.as-sc__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.as-sc__panel.is-busy .as-sc__body {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s .1s;
}

.as-sc__loading {
	display: grid;
	place-items: center;
	min-height: 160px;
}

.as-sc__spinner {
	width: 26px;
	height: 26px;
	border: 3px solid var(--as-c-line);
	border-top-color: var(--as-c-primary);
	border-radius: 50%;
	animation: as-spin .7s linear infinite;
}

@keyframes as-spin {
	to {
		transform: rotate(360deg);
	}
}

.as-sc__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 16px 16px;
	display: grid;
	align-content: start;
	gap: 16px;
}

.as-sc__notice {
	margin: 12px 16px 0;
	padding: 10px 12px;
	border-radius: var(--as-radius);
	background: var(--as-c-soft);
	font-size: 14px;
	color: var(--as-c-head);
}

.as-sc__undo {
	margin-left: .3em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--as-c-primary);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.as-sc__items {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-sc__item {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 12px;
	margin: 0;
}

.as-sc__thumb img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--as-c-white);
}

.as-sc__info {
	min-width: 0;
	display: grid;
	gap: 3px;
	align-content: start;
}

.as-sc__name {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--as-c-head);
}

.as-sc__name a {
	color: inherit;
	text-decoration: none;
}

.as-sc__meta,
.as-sc__delivery {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--as-c-text);
}

.as-sc__meta dl {
	margin: 0;
}

.as-sc__meta dt,
.as-sc__meta dd {
	display: inline;
	margin: 0;
}

.as-sc__meta dd p {
	display: inline;
	margin: 0;
}

.as-sc__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 4px;
}

.as-sc__price {
	margin: 0 0 0 auto;
	font-weight: 600;
	color: var(--as-c-head);
	white-space: nowrap;
}

.as-sc__price del {
	margin-right: 4px;
	font-weight: 400;
	opacity: .55;
}

.as-sc__remove {
	order: 3;
	flex-basis: 100%;
	text-align: left;
	padding: 0;
	border: 0;
	background: none;
	color: var(--as-c-text);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.as-sc__foot {
	display: grid;
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--as-c-line);
	background: var(--as-c-white);
}

.as-sc__sum {
	display: flex;
	justify-content: space-between;
	margin: 0;
	color: var(--as-c-head);
}

.as-sc__links {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.as-sc__link {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--as-c-primary);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.as-sc__empty {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 40px 16px;
	text-align: center;
	color: var(--as-c-head);
}

.as-sc__empty p {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.as-sc__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* Kopf ohne Titel: nur Schliessen; Bestätigung «Im Warenkorb» bleibt */
.as-sc__title:empty + .as-sc__close {
	margin-left: auto;
}

.as-sc__head:has(.as-sc__title:empty) {
	padding-bottom: 4px;
	border-bottom: 0;
}

/* Streichpreis über dem Preis */
.as-sc__price {
	display: grid;
	justify-items: end;
	line-height: 1.25;
}

.as-sc__price del {
	margin: 0;
	font-size: 13px;
}

/* Papierkorb statt «Entfernen» */
.as-sc__row {
	flex-wrap: nowrap;
}

.as-sc__remove {
	order: 0;
	flex: none;
	flex-basis: auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--as-c-text);
	text-decoration: none;
}

.as-sc__remove:hover {
	background: var(--as-c-soft);
	color: var(--as-c-err);
}

/* Overlay blockiert die Seite nur, wenn das Panel «fest» offen ist;
   beim Mouseover-Öffnen bleibt die Seite bedienbar. */
.as-sc {
	pointer-events: none;
}

.as-sc__panel,
.as-sc:not(.is-hover) .as-sc__backdrop {
	pointer-events: auto;
}

/* Leer-Zustand nicht anzeigen (nur der Rückgängig-Hinweis bleibt) */
.as-sc__empty {
	display: none;
}

.as-sc__body:has(.as-sc__empty) .as-sc__notice {
	margin-bottom: 14px;
}

/* Solange der Seitenwarenkorb offen ist: Chat und schwebendes Trusted-Shops-
   Siegel ausblenden (sie liegen mit maximaler Ebene darüber und verdecken
   «Kasse» und die Zwischensumme). Danach wieder sichtbar. */
.as-sc-open #smartsupp-widget-container,
.as-sc-open #chat-application,
.as-sc-open #chat-application-iframe,
.as-sc-open [id^="trustbadge-container"],
.as-sc-open [id^="minimized-trustbadge"] {
	display: none !important;
}