/*
 * Quick cart drawer.
 *
 * House palette: #1c1c1c ground, #F8F5F0 cream, #3B3B3A rules, #a88a6d tan.
 * Labels are MatterMono, product names are Matter, the subtotal figure is
 * Graphik Condensed — the same three roles the rest of the site uses, so the
 * panel does not introduce a fourth.
 */

.rg-cart {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.rg-cart[hidden] {
	display: none !important;
}

/* The admin bar is fixed above everything for logged-in staff; inset:0 would
   put the panel's head underneath it. */
body.admin-bar .rg-cart { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .rg-cart { top: 46px; }
}

/*
 * The chat bubble sits at z-index 2147483000 and lands on top of View cart.
 * Standing it down for the duration is better than bidding against it — and
 * only the launcher goes; an already-open chat panel is left alone.
 */
body.rg-cart-open #regroup-chat-root > .rg-chat-bubble {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.rg-cart__scrim {
	position: absolute;
	inset: 0;
	background: rgba(18, 18, 17, .55);
	opacity: 0;
	transition: opacity .28s ease;
}

.rg-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	background: #1c1c1c;
	border-left: 1px solid #3B3B3A;
	color: #F8F5F0;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	/* The panel scrolls, the page behind it does not. */
	overflow: hidden;
}

.rg-cart.is-open .rg-cart__scrim { opacity: 1; }
.rg-cart.is-open .rg-cart__panel { transform: translateX(0); }

.rg-cart__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

/* Head ------------------------------------------------------------------ */
.rg-cart__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	padding-top: calc(22px + env(safe-area-inset-top, 0px));
	border-bottom: 1px solid #3B3B3A;
}

.rg-cart__title {
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 14px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}


.rg-cart__close {
	background: none;
	border: 0;
	padding: 8px;
	margin: -8px;
	color: #F8F5F0;
	cursor: pointer;
	line-height: 0;
	transition: color .15s;
}

.rg-cart__close:hover { color: #AA8765; }

/* Items ----------------------------------------------------------------- */
.rg-cart__items {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 24px;
}

.rg-cart__item {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid #3B3B3A;
}

.rg-cart__item.is-busy { opacity: .45; pointer-events: none; }

.rg-cart__thumb {
	width: 76px;
	aspect-ratio: 1;
	background: #232322;
	overflow: hidden;
}

.rg-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rg-cart__detail { min-width: 0; }

.rg-cart__name {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-family: 'MatterRegular', sans-serif;
	font-size: 15px;
	line-height: 1.35;
	margin: 0 0 6px;
}

/* The family has to be restated on the anchor: a bare `a` rule in the theme
   out-specifies the family set on the paragraph, and the title was rendering
   in the system stack. */
.rg-cart__name a {
	font-family: 'MatterRegular', sans-serif;
	font-size: 15px;
	color: #F8F5F0;
	text-decoration: none;
}
.rg-cart__name a:hover { color: #AA8765; }

.rg-cart__price {
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 13px;
	letter-spacing: .4px;
	white-space: nowrap;
}

/* Woo renders variation data as a dl; flatten it into one mono line. */
.rg-cart__meta,
.rg-cart__meta dl,
.rg-cart__meta dt,
.rg-cart__meta dd,
.rg-cart__meta p {
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 10.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #7A7977;
	margin: 0;
	display: inline;
}

.rg-cart__meta { display: block; margin-bottom: 14px; }
.rg-cart__meta dt::after { content: ' '; }
.rg-cart__meta dd + dt::before { content: '· '; }

.rg-cart__itemfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.rg-cart__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #3B3B3A;
}

.rg-cart__qty button {
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	padding: 0;
	color: #F8F5F0;
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s;
}

.rg-cart__qty button:hover { color: #AA8765; }
/* At the ceiling the plus dims, but stays live so it can say why. */
.rg-cart__qty button[disabled],
.rg-cart__qty button.is-at-limit { opacity: .35; }
.rg-cart__qty button[disabled] { cursor: default; }

.rg-cart__qtyv {
	min-width: 30px;
	text-align: center;
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.rg-cart__qtyfixed {
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 10.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #7A7977;
}

/* A cross on the same stroke as everything else, rather than the word. The
   close cross at the head is 18px and this is 15px, so the two never read as
   the same control. */
.rg-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: -8px;
	background: none;
	border: 0;
	padding: 0;
	color: #7A7977;
	cursor: pointer;
	transition: color .15s;
}

.rg-cart__remove:hover { color: #AA8765; }
.rg-cart__remove svg { display: block; }

/*
 * A stock ceiling, said the house way: mono overline in the accent, arrow-led,
 * sitting under the control it concerns. Never a banner and never red.
 */
.rg-cart__notice {
	margin: 10px 0 0;
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 10.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #AA8765;
}

.rg-cart__notice::before {
	content: '\2192';
	padding-right: 7px;
}

/* The read -------------------------------------------------------------- */
.rg-cart__read {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 14px;
	margin: 0 24px 4px;
	padding: 18px 0;
	border-top: 1px solid #3B3B3A;
	text-decoration: none;
	color: #F8F5F0;
}

.rg-cart__readlabel {
	grid-column: 1 / -1;
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #7A7977;
	margin-bottom: 6px;
}

.rg-cart__readtitle {
	font-family: 'MatterRegular', sans-serif;
	font-size: 14px;
	line-height: 1.35;
}

.rg-cart__readgo {
	font-family: 'MatterMonoMedium', sans-serif;
	transition: transform .2s;
}

.rg-cart__read:hover .rg-cart__readtitle { color: #AA8765; }
.rg-cart__read:hover .rg-cart__readgo { transform: translateX(3px); color: #AA8765; }

/* Foot ------------------------------------------------------------------ */
.rg-cart__foot {
	flex: 0 0 auto;
	padding: 22px 24px;
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #3B3B3A;
	background: #1c1c1c;
}

.rg-cart__subrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}

.rg-cart__sublabel {
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #7A7977;
}

/* 'Graphik Condensed Web' is the registered family — naming the font file
   instead silently fell back to Arial Narrow, which is what made the total
   look like it came from another site. */
.rg-cart__subval {
	font-family: 'Graphik Condensed Web', 'Arial Narrow', sans-serif;
	font-weight: 700;
	font-size: 38px;
	line-height: 1;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}

.rg-cart__subval .woocommerce-Price-amount,
.rg-cart__subval bdi {
	font-family: inherit;
	font-weight: inherit;
}

.rg-cart__shipnote {
	font-family: 'MatterRegular', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #8F8C86;
	margin: 0 0 20px;
}

.rg-cart__btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/*
 * The tag is named in the selector on purpose: .elementor-kit-43 button puts
 * Exo 2 on every bare <button> and outranks a one-class theme rule. These are
 * anchors, but the pattern is kept so a future change to a <button> does not
 * silently lose the house mono.
 */
.rg-cart .rg-cart__btn,
.rg-cart a.rg-cart__btn,
.rg-cart button.rg-cart__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 16px 18px;
	font-family: 'MatterMonoMedium', sans-serif;
	font-size: 16px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border: 1px solid #F8F5F0;
	border-radius: 100px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.rg-cart .rg-cart__btn--primary {
	background: #F8F5F0;
	color: #1c1c1c;
}

.rg-cart .rg-cart__btn--primary:hover {
	background: #a88a6d;
	border-color: #a88a6d;
	color: #1c1c1b;
}

.rg-cart .rg-cart__btn--ghost {
	background: transparent;
	color: #F8F5F0;
}

.rg-cart .rg-cart__btn--ghost:hover {
	border-color: #a88a6d;
	color: #a88a6d;
}

/* Empty ----------------------------------------------------------------- */
.rg-cart__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 32px 24px;
}

.rg-cart__emptyline {
	font-family: 'MatterRegular', sans-serif;
	font-size: 15px;
	color: #8F8C86;
	margin: 0;
}

.rg-cart__empty .rg-cart__btn { width: auto; padding: 0 22px; }

/*
 * Add to cart, while the request is in flight. The label changes and the dots
 * run, so the button is visibly doing something for the length of the round
 * trip — without that it looks inert, which is what invites a second click.
 */
.single_add_to_cart_button.is-adding {
	pointer-events: none;
	cursor: progress;
}

.single_add_to_cart_button.is-adding::after {
	content: '...';
	display: inline-block;
	width: 0;
	overflow: hidden;
	vertical-align: bottom;
	animation: rg-adding-dots 1.1s steps(4, end) infinite;
}

@keyframes rg-adding-dots {
	to { width: 1.4em; }
}

@media (prefers-reduced-motion: reduce) {
	.single_add_to_cart_button.is-adding::after {
		animation: none;
		width: 1.4em;
	}
}

/*
 * Woo appends this link after an ajax add. The drawer opens on the same event
 * and already offers View cart, so the stray line under the button is one
 * more thing to read and nothing to do.
 */
.woocommerce a.added_to_cart.wc-forward,
a.added_to_cart.wc-forward {
	display: none !important;
}

/*
 * "2 in your cart", under the add to cart button. Quiet on purpose: it is
 * reassurance, not a call to action, and it opens the drawer rather than
 * navigating away from the product being considered.
 */
.rg-incart { margin-top: 14px; }

/*
 * Not a button. A line of Matter in brackets, underlined — it is an aside
 * about what you already have, not a second thing to press, and a filled pill
 * under a filled button was two calls to action arguing. It still opens the
 * drawer; it just does not shout about it.
 */
/* Centred under the button, which is what it belongs to — left-aligned it
   read as the start of a new block rather than a note on the one above. */
.rg-incart {
	margin-top: 12px;
	text-align: center;
}

.rg-incart button.rg-incart__btn {
	width: auto;
	max-width: 100%;
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: 'MatterRegular', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	color: #1c1c1c;
	cursor: pointer;
	transition: color .15s;
}

.rg-incart button.rg-incart__btn:hover,
.rg-incart button.rg-incart__btn:focus-visible {
	background: none;
	color: #AA8765;
}

/* Focus and motion ------------------------------------------------------ */
/* The panel is focused on open so the cross does not wear a ring; it is a
   container, so it takes no visible focus of its own. */
.rg-cart__panel:focus,
.rg-cart__panel:focus-visible { outline: none; }

.rg-cart a:focus-visible,
.rg-cart button:focus-visible {
	outline: 2px solid #AA8765;
	outline-offset: 3px;
}

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

@media screen and (max-width: 800px) {
	.rg-cart__panel { border-left: 0; }
	.rg-cart__head { padding: 18px 20px; padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
	.rg-cart__items { padding: 4px 20px; }
	.rg-cart__read { margin: 0 20px 4px; }
	.rg-cart__foot { padding: 18px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
	.rg-cart__item { grid-template-columns: 64px 1fr; gap: 14px; }
	.rg-cart__thumb { width: 64px; }
	.rg-cart__subval { font-size: 32px; }
	.rg-cart .rg-cart__btn { font-size: 14px; min-height: 50px; padding: 14px 14px; }
}