/**
 * Société Jersiaise, header mini-cart
 *
 * Loads on every page, because the trigger lives in the Elementor header.
 * Everything here is namespaced to .sj-mini-cart, so it cannot touch an
 * Elementor built page.
 *
 * This file does not get the .sj-shop scope the rest of the shop CSS uses,
 * because the drawer is printed in the footer and the trigger sits inside the
 * header, neither of which is inside that wrapper. The doubled class is used
 * where the Elementor kit would otherwise win.
 *
 * @package sj-child
 */

/**
 * The visually hidden utility, declared again here on purpose.
 *
 * Its home is shop.css, which only loads on shop contexts. The mini-cart
 * appears in the header of every page, so without this copy every screen reader
 * label in the drawer renders as visible text on any Elementor built page.
 */

.sj-mini-cart .sj-u-visually-hidden,
.sj-mini-cart__toggle .sj-u-visually-hidden {
	position: absolute;
	inline-size: var(--sj-border-width);
	block-size: var(--sj-border-width);
	padding: 0;
	margin: calc(var(--sj-border-width) * -1);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Trigger
 * ---------------------------------------------------------------------- */

.sj-mini-cart__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--sj-space-2);
	min-block-size: var(--sj-tap-target);
	padding-inline: var(--sj-space-2);
	font-family: var(--sj-font);
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	letter-spacing: var(--sj-tracking-none);
	text-decoration: none;
	color: var(--sj-color-navy);
	transition: color var(--sj-duration-fast) var(--sj-ease);
}

.sj-mini-cart__toggle:hover {
	color: var(--sj-color-navy-deep);
}

.sj-mini-cart__icon {
	display: inline-flex;
}

.sj-mini-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--sj-space-5);
	min-block-size: var(--sj-space-5);
	padding-inline: var(--sj-space-1);
	border-radius: var(--sj-radius-pill);
	background-color: var(--sj-color-navy);
	font-size: var(--sj-text-3xs);
	font-weight: var(--sj-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--sj-color-ink-inverse);
}

.sj-mini-cart__count[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Drawer
 * ---------------------------------------------------------------------- */

.sj-mini-cart[hidden] {
	display: none;
}

.sj-mini-cart {
	position: fixed;
	inset: 0;
	z-index: var(--sj-z-drawer);
}

.sj-mini-cart__scrim {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background-color: var(--sj-color-ink);
	opacity: 0.45;
	cursor: pointer;
}

/**
 * The panel sits on the light blue tint, with white behind each product image,
 * the same relationship the archive uses: tinted ground, white tiles.
 */

.sj-mini-cart__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	inline-size: min(100%, var(--sj-drawer-width));
	background-color: var(--sj-color-info-bg);
	box-shadow: var(--sj-shadow-md);
}

.sj-mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sj-space-3);
	padding: var(--sj-space-4) var(--sj-space-5);
	border-block-end: var(--sj-border-width) solid var(--sj-color-surface);
}

.sj-mini-cart__title.sj-mini-cart__title {
	margin: 0;
	font-family: var(--sj-font);
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	color: var(--sj-color-ink);
}

.sj-mini-cart__close.sj-mini-cart__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sj-tap-target);
	min-block-size: var(--sj-tap-target);
	padding: 0;
	border: 0;
	background-color: transparent;
	font-size: var(--sj-text-xl);
	line-height: 1;
	color: var(--sj-color-ink-body);
	cursor: pointer;
}

.sj-mini-cart__close.sj-mini-cart__close:hover {
	background-color: transparent;
	color: var(--sj-color-navy);
}

.sj-mini-cart__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sj-space-4) var(--sj-space-5);
}

.sj-mini-cart__list {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-4);
	padding: 0;
	margin: 0;
	list-style: none;
}

.sj-mini-cart__item {
	display: grid;
	grid-template-columns: var(--sj-space-9) minmax(0, 1fr) var(--sj-tap-target);
	gap: var(--sj-space-3);
	align-items: start;
}

.sj-mini-cart__thumb {
	display: block;
	aspect-ratio: var(--sj-ratio-product);
	padding: var(--sj-space-1);
	background-color: var(--sj-color-surface);
	border-radius: var(--sj-radius-sm);
}

.sj-mini-cart__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.sj-mini-cart__detail {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-1);
}

.sj-mini-cart__name {
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-semibold);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-none);
	text-decoration: none;
	text-wrap: pretty;
	color: var(--sj-color-ink);
}

.sj-mini-cart__name:hover {
	color: var(--sj-color-navy);
}

.sj-mini-cart__line {
	margin: 0;
	font-size: var(--sj-text-3xs);
	letter-spacing: var(--sj-tracking-none);
	color: var(--sj-color-ink-body);
}

.sj-mini-cart__remove.sj-mini-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--sj-tap-target);
	min-block-size: var(--sj-tap-target);
	padding: 0;
	border: 0;
	background-color: transparent;
	font-size: var(--sj-text-md);
	line-height: 1;
	color: var(--sj-color-ink-muted);
	cursor: pointer;
}

.sj-mini-cart__remove.sj-mini-cart__remove:hover {
	background-color: transparent;
	color: var(--sj-color-error);
}

.sj-mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sj-space-4);
	padding-block: var(--sj-space-6);
}

.sj-mini-cart__empty-text {
	margin: 0;
	font-family: var(--sj-font);
	font-size: var(--sj-text-xs);
	color: var(--sj-color-ink-body);
}

.sj-mini-cart__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sj-space-2);
	padding: var(--sj-space-4) var(--sj-space-5);
	border-block-start: var(--sj-border-width) solid var(--sj-color-surface);
	background-color: var(--sj-color-info-bg);
}

.sj-mini-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sj-space-3);
	margin: 0 0 var(--sj-space-2);
	font-family: var(--sj-font);
	font-size: var(--sj-text-xs);
	font-weight: var(--sj-weight-bold);
	color: var(--sj-color-ink);
}

/**
 * The drawer's own buttons.
 *
 * shop.css scopes .sj-btn under .sj-shop, and the drawer is printed in the
 * footer outside that wrapper, so the two treatments are declared here.
 */

.sj-mini-cart .sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--sj-tap-target);
	padding: var(--sj-space-3) var(--sj-space-5);
	border: var(--sj-border-width) solid transparent;
	border-radius: var(--sj-radius-sm);
	font-family: var(--sj-font);
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-bold);
	letter-spacing: var(--sj-tracking-tight);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.sj-mini-cart .sj-btn--primary {
	background-color: var(--sj-color-navy);
	border-color: var(--sj-color-navy);
	color: var(--sj-color-ink-inverse);
}

.sj-mini-cart .sj-btn--primary:hover {
	background-color: var(--sj-color-navy-deep);
	border-color: var(--sj-color-navy-deep);
	color: var(--sj-color-ink-inverse);
}

.sj-mini-cart .sj-btn--secondary {
	background-color: var(--sj-color-surface);
	border-color: var(--sj-color-navy);
	color: var(--sj-color-navy);
}

.sj-mini-cart__image {
	border-radius: var(--sj-radius-sm);
}

.sj-mini-cart .sj-btn--secondary:hover {
	background-color: var(--sj-color-navy);
	color: var(--sj-color-ink-inverse);
}

/* The page behind must not scroll while the drawer is open. */

.sj-cart-is-open,
.sj-cart-is-open body {
	overflow: hidden;
}

/* A busy control while its request is in flight. */

.sj-mini-cart [aria-busy="true"],
[data-product_id][aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}