/* Little Journal Club — slide-in cart drawer. Themed to the shop. */

:root {
	--ljc-drawer-accent: #cc3366;
	--ljc-drawer-ink: #2b2b33;
	--ljc-drawer-muted: #6b6b76;
	--ljc-drawer-paper: #fffdf9;
	--ljc-drawer-line: #efe6e9;
}

html.ljc-drawer-open,
html.ljc-drawer-open body {
	overflow: hidden;
}

.ljc-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

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

.ljc-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(43, 43, 51, 0.42);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ljc-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--ljc-drawer-paper);
	box-shadow: -24px 0 60px rgba(43, 43, 51, 0.18);
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	outline: none;
}

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

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

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

/* Washi strip pinning the top of the drawer, matching the cart motivator. */
.ljc-drawer__washi {
	display: block;
	height: 10px;
	background: var(--ljc-drawer-accent);
	opacity: 0.6;
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px);
	mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px);
}

.ljc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px 14px;
	border-bottom: 1px solid var(--ljc-drawer-line);
}

.ljc-drawer__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.1;
	color: var(--ljc-drawer-ink);
}

/* Heading font options (body text always inherits the theme). */
.ljc-drawer--font-serif .ljc-drawer__title,
.ljc-drawer--font-serif .ljc-xsell__title {
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

.ljc-drawer--font-sans .ljc-drawer__title,
.ljc-drawer--font-sans .ljc-xsell__title {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ljc-drawer--font-rounded .ljc-drawer__title,
.ljc-drawer--font-rounded .ljc-xsell__title {
	font-family: ui-rounded, "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
	letter-spacing: 0.2px;
}

/* Elementor Pro styles every <button> with its global button colour, which
   otherwise paints this close control olive-green with a dark border — force
   the plain transparent circle with a dark "x". */
.ljc-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 -8px 0 0;
	padding: 0;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--ljc-drawer-ink) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.ljc-drawer__close:hover,
.ljc-drawer__close:focus {
	background: #f1e7ea !important;
	color: var(--ljc-drawer-ink) !important;
}

.ljc-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px 22px 24px;
	display: flex;
	flex-direction: column;
}

/* Fill the body so the buttons can be pinned to the bottom. */
.ljc-drawer__body .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 100%;
}

/* Cross-sells + the buttons after them are pushed to the bottom of the drawer;
   the bar, items and total stay at the top. */
.ljc-drawer .ljc-xsell {
	margin-top: auto;
}

.ljc-drawer .woocommerce-mini-cart__buttons {
	margin-top: 0;
}

/* The motivator bar sits snug at the top of the body. */
.ljc-drawer__body .ljc-cg {
	margin: 0 0 16px;
}

/* ---------- WooCommerce mini-cart ---------- */

.ljc-drawer .woocommerce-mini-cart.cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The mini-cart's image is nested inside the product link, not a direct child,
   so the item is laid out with absolute positioning rather than a grid: image
   pinned left, text left-aligned, remove pinned top-right. */
.ljc-drawer .woocommerce-mini-cart-item {
	position: relative;
	display: block;
	padding: 14px 30px 14px 64px !important;
	min-height: 52px;
	border-bottom: 1px dashed var(--ljc-drawer-line);
	text-align: left;
}

/* WooCommerce core styles the mini-cart image at 32px + float:right; override. */
.ljc-drawer .woocommerce-mini-cart-item img,
.ljc-drawer ul.cart_list li img,
.ljc-drawer ul.product_list_widget li img {
	position: absolute !important;
	left: 0 !important;
	top: 14px !important;
	width: 52px !important;
	height: 52px !important;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 !important;
	float: none !important;
}

.ljc-drawer .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	font-weight: 600;
	color: var(--ljc-drawer-ink);
	text-decoration: none;
	line-height: 1.3;
}

.ljc-drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 2px;
	color: var(--ljc-drawer-ink) !important;
	font-size: 13px;
}

/* Themes/Elementor globals can force the mini-cart amounts to a near-white
   colour that vanishes on the cream drawer; pin every price/amount to ink. */
.ljc-drawer .woocommerce-mini-cart-item .quantity,
.ljc-drawer .woocommerce-mini-cart-item .quantity *,
.ljc-drawer .woocommerce-mini-cart__total,
.ljc-drawer .woocommerce-mini-cart__total *,
.ljc-drawer .woocommerce-Price-amount,
.ljc-drawer .woocommerce-Price-amount bdi {
	color: var(--ljc-drawer-ink) !important;
}

.ljc-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 14px;
	right: 0;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border-radius: 999px;
	color: var(--ljc-drawer-muted) !important;
	font-size: 16px;
	margin: 0;
}

.ljc-drawer .woocommerce-mini-cart-item a.remove:hover {
	background: var(--ljc-drawer-accent);
	color: #fff !important;
}

.ljc-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 16px 0;
	font-size: 17px;
	color: var(--ljc-drawer-ink) !important;
}

.ljc-drawer .woocommerce-mini-cart__total strong {
	font-weight: 700;
}

.ljc-drawer .woocommerce-mini-cart__buttons {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	width: 100%;
}

.ljc-drawer .woocommerce-mini-cart__buttons .button {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
	padding: 14px 18px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}

.ljc-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: #f1e7ea;
	color: var(--ljc-drawer-ink);
}

.ljc-drawer .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--ljc-drawer-accent);
	color: #fff;
}

.ljc-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
	filter: brightness(0.95);
}

.ljc-drawer .woocommerce-mini-cart__empty-message {
	color: var(--ljc-drawer-muted);
	text-align: center;
	padding: 28px 0;
}

/* ---------- Elementor Pro "Menu Cart" markup ----------
   This site renders the cart body with Elementor Pro's Menu Cart widget, not
   WooCommerce's native mini-cart, so the item markup is .elementor-menu-cart__*
   (image/name/price/remove as separate blocks) with a 300px thumbnail. We lay
   each row out as: a small square thumbnail on the left, then the title and the
   "qty x price" line stacked to its right, with the remove control pinned right. */
.ljc-drawer .elementor-menu-cart__products {
	margin: 0 !important;
	padding: 0 !important;
}

.ljc-drawer .elementor-menu-cart__product {
	display: grid !important;
	grid-template-columns: 52px 1fr 22px;
	grid-template-areas:
		"img name remove"
		"img price remove";
	column-gap: 12px;
	row-gap: 1px;
	align-items: center;
	padding: 12px 2px !important;
	margin: 0 !important;
	border-bottom: 1px dashed var(--ljc-drawer-line) !important;
	background: none !important;
}

.ljc-drawer .elementor-menu-cart__product-image {
	grid-area: img;
	width: 52px !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ljc-drawer .elementor-menu-cart__product-image a {
	display: block;
	width: 52px;
	height: 52px;
}

.ljc-drawer .elementor-menu-cart__product-image img {
	width: 52px !important;
	height: 52px !important;
	max-width: 52px !important;
	min-width: 0 !important;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	margin: 0 !important;
}

.ljc-drawer .elementor-menu-cart__product-name {
	grid-area: name;
	align-self: end;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.25;
}

.ljc-drawer .elementor-menu-cart__product-name a {
	color: var(--ljc-drawer-ink) !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.ljc-drawer .elementor-menu-cart__product-price {
	grid-area: price;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px;
}

/* Pin the quantity/price and the subtotal to ink — themes/Elementor globals
   otherwise wash them out to near-white on the cream drawer. */
.ljc-drawer .elementor-menu-cart__product-price,
.ljc-drawer .elementor-menu-cart__product-price *,
.ljc-drawer .elementor-menu-cart__subtotal,
.ljc-drawer .elementor-menu-cart__subtotal * {
	color: var(--ljc-drawer-ink) !important;
}

.ljc-drawer .elementor-menu-cart__product-remove {
	grid-area: remove;
	align-self: center;
	justify-self: end;
	margin: 0 !important;
}

.ljc-drawer .elementor-menu-cart__product-remove a {
	color: var(--ljc-drawer-muted) !important;
	font-size: 14px;
}

/* ---------- "You might be interested in" ---------- */

.ljc-xsell {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 2px dotted var(--ljc-drawer-line);
}

.ljc-xsell__title {
	margin: 0 0 12px;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ljc-drawer-muted);
}

.ljc-xsell__row {
	display: grid;
	gap: 10px;
}

.ljc-xsell__card {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid var(--ljc-drawer-line);
	border-radius: 12px;
	background: #fff;
}

.ljc-xsell__link {
	display: contents;
	text-decoration: none;
	color: var(--ljc-drawer-ink);
}

.ljc-xsell__card img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	margin: 0;
}

.ljc-xsell__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

.ljc-xsell__price {
	display: block;
	font-size: 12px;
	color: var(--ljc-drawer-muted);
}

.ljc-xsell__add {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--ljc-drawer-accent);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.ljc-xsell__add.loading {
	opacity: 0.6;
	pointer-events: none;
}

.ljc-xsell__add.added::after {
	content: "✓";
	margin-left: 2px;
}