/**
 * Side cart.
 *
 * Design source: Figma "Purovitalis rebranding 2026", frame 344:12193
 * ("B2C/Desktop - Add to cart flow: Cart sidebar").
 *
 * Tokens are redeclared on the drawer for the same reason the cart and account
 * sheets redeclare them: each loads independently, and they will collapse into
 * one token sheet when the global styles land.
 *
 * @package Purovitalis
 */

.pv-drawer {
	--pv-surface-card: #ffffff;
	--pv-surface-muted: #efece5;
	--pv-surface-active: #564f78;
	--pv-border-default: #e3ded4;
	--pv-text: #000000;
	--pv-text-inverse: #ffffff;
	--pv-text-primary: #564f78;
	--pv-text-secondary: #ef7e3f;
	--pv-neutral-300: #727272;
	--pv-radius: 8px;
	--pv-radius-full: 99px;
	/* Type comes from main.css :root — one declaration, one place to change. */

	position: fixed;
	inset: 0;
	z-index: 9000;
	font-family: var(--pv-font-body);
	color: var(--pv-text);
}

.pv-drawer[hidden] {
	display: none;
}

.pv-drawer *,
.pv-drawer *::before,
.pv-drawer *::after {
	box-sizing: border-box;
}

/* The button styles the drawer uses live in cart.css, which only loads on the
   cart and checkout — so on every other page the drawer's buttons came out
   unstyled. Repeated here, scoped to the drawer, because this sheet is the one
   that loads everywhere. */
.pv-drawer .pv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border-radius: var(--pv-radius-full);
	font-family: var(--pv-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.pv-drawer .pv-btn--primary {
	background: var(--pv-text);
	border: 1px solid var(--pv-text);
	color: var(--pv-text-inverse);
}

.pv-drawer .pv-btn--outline {
	background: transparent;
	border: 1px solid var(--pv-text);
	color: var(--pv-text);
}

.pv-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 24, 22, 33, 0.35 );
	opacity: 0;
	transition: opacity 220ms ease;
}

.pv-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min( 480px, 100% );
	background: var(--pv-surface-card);
	box-shadow: -10px 0 30px rgba( 86, 79, 120, 0.08 );
	transform: translateX( 100% );
	transition: transform 260ms ease;
}

.pv-drawer.is-open .pv-drawer__overlay {
	opacity: 1;
}

.pv-drawer.is-open .pv-drawer__panel {
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.pv-drawer__overlay,
	.pv-drawer__panel {
		transition: none;
	}
}

/* The design has no header; a drawer still needs a way out that does not
   depend on guessing that the overlay is clickable. */
.pv-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px 0;
}

.pv-drawer__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
}

.pv-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pv-surface-muted);
	font-size: 20px;
	line-height: 1;
	color: var(--pv-text);
	cursor: pointer;
}

.pv-drawer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
	padding: 20px 24px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pv-drawer.is-busy .pv-drawer__body {
	opacity: 0.55;
	pointer-events: none;
}

/* ----------------------------------------------------------------- items */

.pv-drawer__items {
	flex: 1 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pv-drawer-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--pv-border-default);
}

.pv-drawer-item__thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--pv-radius);
	background: var(--pv-surface-muted);
	overflow: hidden;
}

.pv-drawer-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pv-drawer-item__details {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pv-drawer-item__name {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pv-drawer-item__name a {
	color: inherit;
	text-decoration: none;
}

.pv-drawer-item__badges {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.pv-drawer-item__delivery {
	font-size: 12px;
	line-height: 1.35;
	color: var(--pv-neutral-300);
}

.pv-type-badge {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--pv-surface-active);
	color: var(--pv-text-inverse);
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}

.pv-type-badge--once {
	background: var(--pv-surface-muted);
	color: var(--pv-neutral-300);
}

.pv-type-badge--gift {
	background: var(--pv-text-secondary);
	color: var(--pv-text-inverse);
}

.pv-drawer-item__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 4px;
}

.pv-stepper {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--pv-surface-muted);
	font-size: 12px;
	font-weight: 700;
}

.pv-stepper button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--pv-neutral-300);
	cursor: pointer;
}

.pv-stepper button:disabled {
	opacity: 0.4;
	cursor: default;
}

.pv-stepper__value {
	min-width: 8px;
	text-align: center;
}

.pv-drawer-item__remove {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 12px;
	color: var(--pv-text-secondary);
	text-decoration: underline;
	cursor: pointer;
}

.pv-drawer-item__price {
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
	white-space: nowrap;
}

.pv-drawer-item--gift .pv-drawer-item__price {
	color: var(--pv-text-secondary);
}

/* ------------------------------------------------------------- extra add */

.pv-drawer-addon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--pv-border-default);
	border-radius: var(--pv-radius);
	background: var(--pv-surface-muted);
}

.pv-drawer-addon__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--pv-radius);
	background: var(--pv-surface-card);
	overflow: hidden;
}

.pv-drawer-addon__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pv-drawer-addon__text {
	flex: 1 1 auto;
	min-width: 0;
}

.pv-drawer-addon__name {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.pv-drawer-addon__price {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--pv-neutral-300);
}

.pv-drawer-addon__price del {
	display: none;
}

.pv-drawer-addon__toggle {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid var(--pv-text);
	border-radius: var(--pv-radius-full);
	background: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--pv-text);
	cursor: pointer;
}

.pv-drawer-addon.is-added .pv-drawer-addon__toggle {
	background: var(--pv-text);
	color: var(--pv-text-inverse);
}

/* ---------------------------------------------------------------- footer */

.pv-drawer__footer {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--pv-border-default);
}

.pv-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
}

.pv-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pv-drawer__actions .pv-btn {
	width: 100%;
}

.pv-drawer__cart-link {
	align-self: center;
	font-size: 13px;
	color: var(--pv-neutral-300);
	text-decoration: underline;
}

/* ----------------------------------------------------------------- empty */

.pv-drawer__empty {
	margin: auto 0;
	text-align: center;
}

.pv-drawer__empty-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
}

.pv-drawer__empty-text {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--pv-neutral-300);
}

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

@media ( max-width: 560px ) {
	.pv-drawer__header,
	.pv-drawer__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* The checkout action stays in reach however long the item list runs. */
	.pv-drawer__footer {
		position: sticky;
		bottom: 0;
		padding-bottom: calc( 8px + env( safe-area-inset-bottom ) );
		background: var(--pv-surface-card);
	}
}

/* ── Order bump ──────────────────────────────────────────────────────────
 * Sits on the add-on card's frame; only the heading, the discount label and
 * the price treatment are its own. The same block renders under the cart
 * table, where it gets a width cap so it reads as an aside, not a row.
 */
.pv-bump {
	flex: 0 0 auto;
}

.pv-bump__heading {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pv-text);
}

.pv-bump__label {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--pv-surface-active);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: 1px;
}

.pv-bump__text {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--pv-neutral-300);
}

/* The add-on hides sale strikethroughs; the bump's whole point is showing one. */
.pv-bump__card .pv-drawer-addon__price del {
	display: inline;
	margin-right: 6px;
}

.pv-bump__card .pv-drawer-addon__price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--pv-text);
}

/* Cart page placement. */
.woocommerce-cart .pv-bump {
	max-width: 420px;
	margin: 20px 0 0;
}