/*
 * cart.css — varukorgslådan.
 *
 * Laddas på varje sidvisning där WooCommerce är aktivt. Motiveringen:
 * vagnsikonen står i sidhuvudet överallt, alltså kan lådan öppnas
 * överallt, och en panel vars stilar hämtas först vid klick glider in
 * ostylad. Filen hålls därför liten — den är en komponent, inget mer.
 *
 * Lagren är deklarerade i base.css. Skriv aldrig !important här.
 */

@layer components {
	:root {
		/*
		 * Lådans bredd. longevitylabs.se kör fasta 340 px, vilket blir
		 * trångt så fort ett produktnamn går i två rader bredvid en
		 * antalsväljare. Vi tar i mer, men aldrig mer än halva fönstret:
		 * panelen ska läsas som en panel, inte som en ny sida. Golvet på
		 * 320 px är där antalsväljaren och priset slutar få plats på
		 * samma rad. Ett värde, ett ställe.
		 */
		--cart-drawer-width: clamp(320px, 50vw, 480px);
	}

	/* ---------------------------------------------------------------- */
	/* Panelen                                                           */
	/* ---------------------------------------------------------------- */

	/*
	 * Stängd panel ligger kvar i DOM:en och skjuts ut ur bild. `visibility`
	 * tar den ur både fokusordningen och uppläsningen, och den animeras
	 * (till skillnad från display) så att inglidningen blir en rörelse och
	 * inte ett hopp.
	 */
	.cart-drawer {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 50;
		display: flex;
		flex-direction: column;
		width: var(--cart-drawer-width);
		max-width: 100%;
		background: var(--color-paper);
		box-shadow: -8px 0 40px rgb(0 0 0 / 0.12);
		translate: 100% 0;
		visibility: hidden;
		transition: translate 0.28s ease, visibility 0.28s;
	}

	/*
	 * Öppet läge tar bort `visibility` ur övergången. Annars ligger
	 * panelen kvar som osynlig medan den glider in — och focus() på
	 * något osynligt gör ingenting, så stängknappen hade aldrig fått
	 * fokus. Vid stängning gäller regeln ovan igen: då SKA visibility
	 * vänta tills panelen glidit ut.
	 */
	.cart-drawer[data-open] {
		translate: 0 0;
		visibility: visible;
		transition: translate 0.28s ease;
	}

	.cart-drawer__backdrop {
		position: fixed;
		inset: 0;
		z-index: 45;
		background: rgb(0 0 0 / 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.28s;
	}

	.cart-drawer__backdrop[data-open] {
		opacity: 1;
		pointer-events: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		.cart-drawer,
		.cart-drawer__backdrop {
			transition-duration: 0.01ms;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Huvud                                                             */
	/* ---------------------------------------------------------------- */

	.cart-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding: var(--space-s) var(--space-m);
		border-block-end: 1px solid var(--color-line);
	}

	.cart-drawer__title {
		margin: 0;
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-ink);
	}

	.cart-drawer__close {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-ink);
		font-size: 1.6rem;
		line-height: 1;
		transition: color 0.15s;
	}

	.cart-drawer__close:hover {
		color: var(--color-accent);
	}

	/* ---------------------------------------------------------------- */
	/* Kropp                                                             */
	/* ---------------------------------------------------------------- */

	/*
	 * Kroppen är flexbehållaren för rullytan och foten. Foten står still,
	 * bara raderna och förslagen rullar — knapparna ska aldrig vara ett
	 * svep bort.
	 */
	.cart-drawer__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 0;
		transition: opacity 0.15s;
	}

	.cart-drawer__body[data-pending] {
		opacity: 0.5;
		pointer-events: none;
	}

	.cart-drawer__scroll {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--space-s) var(--space-m);
	}

	.cart-drawer__status {
		margin: 0;
		padding: var(--space-m);
		color: var(--color-ink-muted);
	}

	.cart-drawer__error {
		margin: 0 var(--space-m) var(--space-s);
		padding: var(--space-2xs) var(--space-xs);
		border-radius: var(--radius-card);
		background: #fdf2f2;
		color: #8a2f2f;
		font-size: var(--step--1);
	}

	.cart-drawer__empty {
		display: grid;
		gap: var(--space-s);
		justify-items: start;
		padding-block: var(--space-m);
	}

	.cart-drawer__empty-text {
		margin: 0;
		color: var(--color-body);
	}

	/* ---------------------------------------------------------------- */
	/* Raderna                                                           */
	/* ---------------------------------------------------------------- */

	.cart-drawer__items {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cart-drawer__item {
		display: grid;
		grid-template-columns: 64px 1fr auto;
		gap: var(--space-xs);
		align-items: start;
		padding-block: var(--space-s);
		border-block-end: 1px solid var(--color-line);
	}

	.cart-drawer__item:first-child {
		padding-block-start: 0;
	}

	/* Förslagen har egen överlinje — annars blir det två streck i rad. */
	.cart-drawer__item:last-child {
		border-block-end: 0;
	}

	.cart-drawer__item-media {
		display: block;
		border-radius: var(--radius-card);
		background: var(--color-surface);
		overflow: hidden;
	}

	.cart-drawer__thumb {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.cart-drawer__item-info {
		display: grid;
		gap: var(--space-2xs);
		min-width: 0;
	}

	.cart-drawer__item-title {
		margin: 0;
		font-size: var(--step--1);
		font-weight: 500;
		line-height: 1.35;
		color: var(--color-ink);
	}

	.cart-drawer__item-title a {
		color: inherit;
		text-decoration: none;
	}

	.cart-drawer__item-title a:hover {
		color: var(--color-accent);
	}

	.cart-drawer__item-meta {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/*
	 * Variantdata kommer från Woo som en <dl>. Utan den här regeln
	 * hamnar "Size:" och "Medium" på var sin rad och raden växer med en
	 * radhöjd per attribut.
	 */
	.cart-drawer__item-meta dl,
	.cart-drawer__item-meta p {
		display: inline;
		margin: 0;
	}

	.cart-drawer__item-meta dt {
		display: inline;
		font-weight: 400;
	}

	.cart-drawer__item-meta dd {
		display: inline;
		margin: 0 var(--space-2xs) 0 0;
		color: var(--color-body);
	}

	.cart-drawer__item-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2xs);
	}

	.cart-drawer__item-price {
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-accent);
	}

	/* Antalsväljaren: samma pillerform som knapparna i shopen. */
	.cart-drawer__qty {
		display: inline-flex;
		align-items: center;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
	}

	.cart-drawer__qty--fixed {
		padding: 0.25em 0.75em;
		font-size: var(--step--1);
		color: var(--color-body);
	}

	.cart-drawer__qty-button {
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-pill);
		background: none;
		color: var(--color-ink);
		font-size: 0.95rem;
		line-height: 1;
		transition: color 0.15s, background-color 0.15s;
	}

	.cart-drawer__qty-button:hover:not(:disabled) {
		background: var(--color-surface);
		color: var(--color-accent);
	}

	.cart-drawer__qty-button:disabled {
		color: var(--color-ink-muted);
	}

	.cart-drawer__qty-value {
		min-width: 1.5ch;
		text-align: center;
		font-size: var(--step--1);
		font-variant-numeric: tabular-nums;
		color: var(--color-ink);
	}

	.cart-drawer__remove {
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-ink-muted);
		font-size: 1.2rem;
		line-height: 1;
		transition: color 0.15s;
	}

	.cart-drawer__remove:hover {
		color: var(--color-ink);
	}

	/* ---------------------------------------------------------------- */
	/* Förslagen                                                         */
	/* ---------------------------------------------------------------- */

	.cart-drawer__upsell {
		margin-block-start: var(--space-m);
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--color-line);
	}

	.cart-drawer__upsell-title {
		margin: 0 0 var(--space-xs);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.cart-drawer__upsell-list {
		display: grid;
		gap: var(--space-xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cart-drawer__upsell-item {
		display: grid;
		grid-template-columns: 48px 1fr auto;
		gap: var(--space-xs);
		align-items: center;
		padding: var(--space-2xs);
		border-radius: var(--radius-card);
		background: var(--color-surface-cream);
	}

	.cart-drawer__upsell-media {
		display: block;
		border-radius: calc(var(--radius-card) - 4px);
		background: var(--color-paper);
		overflow: hidden;
	}

	.cart-drawer__upsell-info {
		min-width: 0;
	}

	.cart-drawer__upsell-name {
		margin: 0;
		font-size: var(--step--1);
		font-weight: 500;
		line-height: 1.3;
		color: var(--color-ink);
	}

	.cart-drawer__upsell-name a {
		color: inherit;
		text-decoration: none;
	}

	.cart-drawer__upsell-name a:hover {
		color: var(--color-accent);
	}

	.cart-drawer__upsell-price {
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-accent);
	}

	.cart-drawer__upsell-price del {
		margin-inline-end: var(--space-3xs);
		color: var(--color-ink-muted);
	}

	.cart-drawer__upsell-price ins {
		text-decoration: none;
	}

	.cart-drawer__upsell-add {
		padding: 0.4em 1em;
		border: 1px solid var(--color-ink);
		border-radius: var(--radius-pill);
		background: none;
		color: var(--color-ink);
		font-family: var(--font-sans);
		font-size: var(--step--1);
		font-weight: 500;
		line-height: 1.4;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	}

	.cart-drawer__upsell-add:hover {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: #fff;
	}

	/* ---------------------------------------------------------------- */
	/* Foten                                                             */
	/* ---------------------------------------------------------------- */

	.cart-drawer__footer {
		display: grid;
		gap: var(--space-xs);
		padding: var(--space-s) var(--space-m) var(--space-m);
		border-block-start: 1px solid var(--color-line);
		background: var(--color-paper);
	}

	.cart-drawer__shipping {
		display: grid;
		gap: var(--space-3xs);
	}

	.cart-drawer__shipping-text {
		margin: 0;
		font-size: var(--step--1);
		color: var(--color-body);
	}

	.cart-drawer__shipping[data-reached] .cart-drawer__shipping-text {
		color: var(--color-accent-ink);
	}

	.cart-drawer__bar {
		height: 6px;
		border-radius: var(--radius-pill);
		background: var(--color-line);
		overflow: hidden;
	}

	.cart-drawer__bar-fill {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: var(--color-accent);
		transition: width 0.3s ease;
	}

	.cart-drawer__subtotal {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-s);
		margin: 0;
		font-size: var(--step-0);
		font-weight: 600;
		color: var(--color-ink);
	}

	.cart-drawer__subtotal-value {
		color: var(--color-accent);
	}

	.cart-drawer__actions {
		display: grid;
		gap: var(--space-2xs);
	}

	.cart-drawer__button {
		display: block;
		padding: 0.85em 1.25em;
		border: 1px solid transparent;
		border-radius: var(--radius-pill);
		font-family: var(--font-sans);
		font-size: var(--step--1);
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	}

	.cart-drawer__button--primary {
		background: var(--color-accent);
		color: #fff;
	}

	.cart-drawer__button--primary:hover {
		background: var(--color-accent-ink);
	}

	.cart-drawer__button--ghost {
		border-color: var(--color-ink);
		background: none;
		color: var(--color-ink);
	}

	.cart-drawer__button--ghost:hover {
		background: var(--color-button);
		color: var(--color-button-text);
	}

	/* ---------------------------------------------------------------- */
	/* Kvittensen — "Added to your cart" nere på skärmen                 */
	/* ---------------------------------------------------------------- */

	/*
	 * Byggs av main.js när köpknappen på produktsidan svarat. Rutan
	 * glider upp från nederkanten, står i fem sekunder och glider ner igen.
	 * `visibility` följer med i övergången så att den dolda rutan varken
	 * går att tabba till eller fångar klick.
	 */
	.cart-toast {
		position: fixed;
		inset-inline: 0;
		/*
		 * På mobil ligger genvägsraden underst (55 px plus hemknappens
		 * marginal), och kvittensen ska stå ovanför den — inte på den.
		 */
		inset-block-end: calc(55px + env(safe-area-inset-bottom) + var(--space-s));
		z-index: 40;
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		width: min(calc(100% - 2 * var(--space-s)), 26rem);
		margin-inline: auto;
		padding: var(--space-xs) var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		background: var(--color-paper);
		color: var(--color-ink);
		box-shadow: 0 8px 28px rgb(0 0 0 / 0.1);
		font-size: var(--step--1);
		line-height: 1.35;
		visibility: hidden;
		opacity: 0;
		transform: translateY(0.75rem);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			visibility 0s linear 0.2s;
	}

	.cart-toast.is-visible {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			visibility 0s;
	}

	@media (min-width: 1200px) {
		/* Ingen genvägsrad på desktop — rutan får stå i högra hörnet. */
		.cart-toast {
			inset-inline: auto var(--space-m);
			inset-block-end: var(--space-m);
			margin-inline: 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.cart-toast {
			transform: none;
			transition: opacity 0.15s ease, visibility 0s linear 0.15s;
		}
	}

	/* En tunn bock i accentfärgen — ingen fylld cirkel som skriker. */
	.cart-toast__icon {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		border: 1.5px solid var(--color-accent);
		border-radius: 50%;
		color: var(--color-accent);
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1;
	}

	.cart-toast__text {
		flex: 1 1 auto;
		min-inline-size: 0;
		display: flex;
		flex-direction: column;
	}

	.cart-toast__title {
		font-weight: 600;
	}

	.cart-toast__name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 0.8rem;
		color: var(--color-body);
	}

	/* Länk snarare än knapp: kvittensen ska kännas lätt, inte som en dialog. */
	.cart-toast__view {
		flex: 0 0 auto;
		padding: 0.25em 0;
		border: 0;
		background: none;
		color: var(--color-accent-ink);
		font: inherit;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		text-decoration-color: transparent;
		cursor: pointer;
		transition: text-decoration-color 0.15s;
	}

	.cart-toast__view:hover,
	.cart-toast__view:focus-visible {
		text-decoration-color: currentColor;
	}
}

@layer utilities {
	/*
	 * Sidan bakom lådan ska ligga stilla. Egen klass och inte .has-nav-open
	 * — menyn och vagnen kan stängas i olika ordning, och en delad klass
	 * hade låst upp skrollen för tidigt.
	 */
	.has-cart-open {
		overflow: hidden;
	}
}