/* ================================================
   RED POINT — SIDE CART
   ================================================
   A slide-out drawer, not a page section. There is no Figma frame for it (the file only
   holds Home, Category and Product), so it is assembled from the design's own vocabulary:
   --rp-panel over --rp-bg, the accent pill from the buy box, the header's badge red.

   The panel enters from the LEFT. The page is RTL and the header's icon cluster — where the
   bag lives — sits at the far left of the bar (109:215, "leftmost"), so the drawer opens on
   the side the user just clicked. Entering from the right would cross the whole viewport and
   cover the logo.
   ================================================ */

.rp-cart {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above Elementor's sticky header, which sits at 99999 */

	/* THE WHOLE PAGE IS UNDER THIS ELEMENT.
	   It is fixed and inset:0, so it covers the viewport whenever it is in the DOM — and the
	   scrim inside it closes to `opacity: 0`, which is INVISIBLE BUT STILL CLICKABLE. Between
	   the drawer sliding shut and the script re-adding `hidden` (and on any path where that
	   never happens), an unseen full-screen layer swallowed every click on the page: adding a
	   product worked once, and the next press of Add to Cart hit nothing at all.
	   Only the open drawer should take clicks. */
	pointer-events: none;
}

.rp-cart.is-open {
	pointer-events: auto;
}

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

/* ------------------------------------------------
   SCRIM */
.rp-cart__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.rp-cart.is-open .rp-cart__scrim {
	opacity: 1;
}

/* ------------------------------------------------
   PANEL
   ------------------------------------------------
   translateX(-100%) parks it off the LEFT edge. This is a physical property on purpose —
   `inset-inline-start` would flip with the document direction, and the drawer's side is a
   fixed design decision, not a directional one. */
.rp-cart__panel {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 420px;
	max-width: 100vw;
	height: 100%;
	background-color: var(--rp-panel, #111111);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
	transform: translateX(-100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}

.rp-cart.is-open .rp-cart__panel {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.rp-cart__scrim,
	.rp-cart__panel {
		transition: none;
	}
}

/* ------------------------------------------------
   HEAD */
.rp-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.rp-cart__title {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 28px;
	line-height: 1;
	color: #FFFFFF;
}

.rp-cart__close {
	display: flex; /* kills the descender gap an inline SVG carries on the text baseline */
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	border: 0;
	border-radius: 100px;
	background-color: rgba(37, 37, 37, 0.6);
	color: #FFFFFF;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

.rp-cart__close:hover {
	background-color: var(--rp-surface, #252525);
}

.rp-cart__close svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------
   BODY — the part fragments replace */
.rp-cart__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0; /* lets the item list scroll instead of stretching the panel */
	overflow: hidden;
}

/* ------------------------------------------------
   ITEMS */
.rp-cart__items {
	flex: 1;
	overflow-y: auto;
	margin: 0;
	padding: 8px 24px;
	list-style: none;
}

.rp-cart__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rp-cart__item:last-child {
	border-bottom: 0;
}

.rp-cart__item-media {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--rp-well, #000000);
}

.rp-cart__item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rp-cart__item-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.rp-cart__item-name {
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #FFFFFF;
	text-decoration: none;
}

.rp-cart__item-name:hover {
	color: var(--rp-accent, #FF3B3B);
}

.rp-cart__item-meta {
	font-size: 13px;
	color: var(--rp-muted, #818181);
}

.rp-cart__item-meta p {
	margin: 0;
}

.rp-cart__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rp-cart__item-price {
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--rp-accent, #FF3B3B);
	white-space: nowrap;
}

.rp-cart__item-price del {
	color: var(--rp-muted, #818181);
	font-weight: 400;
	margin-inline-end: 6px;
}

/* ------------------------------------------------
   QUANTITY STEPPER
   ------------------------------------------------
   dir="ltr" is set in the markup so − sits left of + regardless of page direction. */
.rp-cart__qty {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 100px;
	background-color: var(--rp-surface, #252525);
}

.rp-cart__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 100px;
	background: none;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.rp-cart__qty-btn:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.rp-cart__qty-value {
	min-width: 24px;
	text-align: center;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
}

.rp-cart__item-remove {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 0;
	background: none;
	color: var(--rp-muted, #818181);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.rp-cart__item-remove:hover {
	color: var(--rp-accent, #FF3B3B);
}

/* ------------------------------------------------
   FOOT */
.rp-cart__foot {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background-color: var(--rp-panel, #111111);
}

.rp-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 4px;
}

.rp-cart__subtotal-label {
	font-family: 'Google Sans', sans-serif;
	font-size: 15px;
	color: var(--rp-body, #E6E6E6);
}

.rp-cart__subtotal-value {
	font-family: 'Google Sans', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #FFFFFF;
}

.rp-cart__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border-radius: var(--rp-pill, 100px);
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rp-cart__btn--accent {
	background-color: var(--rp-accent, #FF3B3B);
	color: #FFFFFF;
}

.rp-cart__btn--accent:hover {
	background-color: #E02F2F;
	color: #FFFFFF;
}

.rp-cart__btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--rp-body, #E6E6E6);
}

.rp-cart__btn--ghost:hover {
	background-color: var(--rp-surface, #252525);
	color: #FFFFFF;
}

/* ------------------------------------------------
   EMPTY STATE */
.rp-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex: 1;
	padding: 40px 24px;
	text-align: center;
}

.rp-cart__empty-text {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	color: var(--rp-muted, #818181);
}

.rp-cart__empty .rp-cart__btn {
	padding: 0 32px;
}

/* ------------------------------------------------
   BUSY
   ------------------------------------------------
   While an AJAX round-trip is in flight the body dims and stops taking clicks, so a
   double-tap on "+" cannot queue two conflicting quantity writes. */
.rp-cart__body.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------
   HEADER BADGE
   ------------------------------------------------
   Always in the DOM so a fragment can bring it back after the cart empties — hidden by a
   modifier rather than removed. */
.rp-cart-count--empty {
	display: none;
}

/* ------------------------------------------------
   FLOATING LAUNCHER
   ------------------------------------------------
   The standing way into the cart. The header's bag icon only exists where the Header widget
   was placed and scrolls away with the page; this stays put on every template.

   Pinned to the LEFT because that is the edge the drawer enters from. `left` is a physical
   property on purpose — a logical one would flip with the document direction, and the side
   is a fixed design decision rather than a directional one. */
.rp-cart-launcher {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99998; /* under the drawer (100000), over Elementor's sticky header */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 0;
	border-radius: 0 12px 12px 0; /* square against the viewport edge, rounded inward */
	background-color: var(--rp-accent, #FF3B3B);
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	transition: background-color 0.15s ease, opacity 0.2s ease, transform 0.2s ease;
}

.rp-cart-launcher:hover {
	background-color: #E02F2F;
}

.rp-cart-launcher__icon {
	display: flex; /* kills the baseline descender gap an inline SVG carries */
	align-items: center;
	justify-content: center;
}

.rp-cart-launcher__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* White chip on the accent field — the inverse of the header badge, which is accent on dark.
   Shows the number even at zero: a standing tab with a bare glyph reads as broken. */
.rp-cart-count--launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 9999px;
	background-color: #FFFFFF;
	color: var(--rp-accent, #FF3B3B);
	font-family: 'Google Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

/* Step aside while the drawer is open — the panel covers this corner anyway, and leaving it
   visible underneath makes the slide look like it snagged on something. */
.rp-cart-open .rp-cart-launcher {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(-100%);
}

@media (max-width: 480px) {
	.rp-cart-launcher {
		padding: 10px 12px;
		gap: 6px;
	}

	.rp-cart-launcher__icon svg {
		width: 20px;
		height: 20px;
	}
}

/* ------------------------------------------------
   PAGE LOCK — set on <html> while the drawer is open */
.rp-cart-open,
.rp-cart-open body {
	overflow: hidden;
}

@media (max-width: 480px) {
	.rp-cart__panel {
		width: 100%;
	}

	.rp-cart__head,
	.rp-cart__foot {
		padding: 20px 16px;
	}

	.rp-cart__items {
		padding: 8px 16px;
	}
}