/* DKS Commerce: the Bricks WooCommerce mini cart's slide-out panel, in the DKS brand.
   Layout follows the Smash Seasonings side cart the founder likes: icon and count on top, X at
   the top right, one row per item (thumbnail, name, stepper, line total, remove), subtotal and a
   full-width checkout button pinned to the bottom. Colors are the Bricks palette variables. */

.brxe-woocommerce-mini-cart .cart-detail.off-canvas {
	--dks-cart-pad: 24px;
	display: flex;
	flex-direction: column;
	width: min(440px, 100vw);
	max-width: 100vw;
	/* Top comes from Bricks (32px under the admin bar when logged in); pin the bottom instead of a fixed height. */
	bottom: 0;
	height: auto;
	padding: 0;
	background: var(--surface, #121212);
	color: var(--white, #fff);
	border-left: 1px solid var(--border, #2e2e2e);
	box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
	font-family: "Rubik", system-ui, sans-serif;
	font-size: 16px;
	text-align: left;

	& :focus-visible {
		outline: 3px solid var(--lime, #c6ff00);
		outline-offset: 2px;
	}

	/* Close (X): the Bricks element sets its size, color, and top-right position. */
	& .bricks-mini-cart-close {
		z-index: 2;
		display: grid;
		place-items: center;
		background: none;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		transition: color .2s ease, background-color .2s ease;
	}
	& .bricks-mini-cart-close:hover > * { color: var(--lime, #c6ff00); }

	& .widget_shopping_cart_content {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		padding: 0 var(--dks-cart-pad) var(--dks-cart-pad);
	}

	/* Top: cart icon and item count */
	& .dks-cart-head {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 72px;
		margin: 0 calc(-1 * var(--dks-cart-pad));
		padding: 0 64px;
		border-bottom: 1px solid var(--border, #2e2e2e);
		color: var(--white, #fff);
	}
	& .dks-cart-head__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 28px;
		height: 28px;
		padding: 0 8px;
		border-radius: 14px;
		background: var(--lime, #c6ff00);
		color: var(--black, #000);
		font: 700 15px/1 "Oswald", sans-serif;
	}

	/* Items */
	& .woocommerce-mini-cart {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0 calc(-1 * var(--dks-cart-pad));
		padding: 0 var(--dks-cart-pad);
		list-style: none;
		border: 0;
	}
	& .woocommerce-mini-cart-item {
		position: relative;
		display: block;
		min-height: 118px;
		margin: 0;
		padding: 20px 40px 20px 96px;
		border-bottom: 1px solid var(--border, #2e2e2e);
		background: none;
		transition: opacity .2s ease;
	}
	& .woocommerce-mini-cart-item.dks-is-updating {
		opacity: .55;
		pointer-events: none;
	}
	& .woocommerce-mini-cart-item > a:not(.remove) {
		display: block;
		padding: 0;
		color: var(--white, #fff);
		font: 600 17px/1.2 "Oswald", sans-serif;
		text-transform: uppercase;
		letter-spacing: .03em;
		text-decoration: none;
	}
	& .woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--lime, #c6ff00); }
	& .woocommerce-mini-cart-item img {
		position: absolute;
		top: 20px;
		left: 0;
		float: none;
		width: 76px;
		height: 76px;
		margin: 0;
		padding: 4px;
		object-fit: contain;
		background: var(--black, #000);
		border: 1px solid var(--border, #2e2e2e);
		border-radius: 4px;
		box-shadow: none;
	}
	& .woocommerce-mini-cart-item .variation {
		margin: 4px 0 0;
		color: var(--text-muted, #a8a8a8);
		font-size: 14px;
	}
	& .woocommerce-mini-cart-item .variation :is(dt, dd, p) {
		display: inline;
		margin: 0;
		padding: 0;
	}

	/* Remove (×) */
	& .woocommerce-mini-cart-item a.remove {
		position: absolute;
		top: 18px;
		right: 0;
		left: auto;
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		color: var(--text-muted, #a8a8a8) !important; /* Woo's own stylesheet uses !important here */
		background: none;
		font-size: 22px;
		line-height: 1;
		text-decoration: none;
		transition: color .2s ease, background-color .2s ease;
	}
	& .woocommerce-mini-cart-item a.remove:hover {
		color: var(--black, #000) !important;
		background: var(--lime, #c6ff00);
	}

	/* Stepper and line total */
	& .dks-line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-top: 12px;
	}
	& .dks-qty {
		display: inline-flex;
		height: 40px;
		background: var(--black, #000);
		border: 1px solid var(--border, #2e2e2e);
		border-radius: 999px;
		overflow: hidden;
	}
	& .dks-qty__btn {
		display: grid;
		place-items: center;
		width: 40px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--white, #fff);
		font: 500 20px/1 "Rubik", sans-serif;
		cursor: pointer;
		transition: color .2s ease, background-color .2s ease;
	}
	& .dks-qty__btn:hover:not(:disabled) {
		background: var(--lime, #c6ff00);
		color: var(--black, #000);
	}
	& .dks-qty__btn:disabled {
		opacity: .35;
		cursor: not-allowed;
	}
	& .dks-qty__btn:focus-visible { outline-offset: -3px; }
	& .dks-qty__input {
		width: 44px;
		height: 100%;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-inline: 1px solid var(--border, #2e2e2e);
		border-radius: 0;
		color: var(--white, #fff);
		font: 600 16px/1 "Oswald", sans-serif;
		text-align: center;
		-moz-appearance: textfield;
		appearance: textfield;
	}
	& .dks-qty__input::-webkit-inner-spin-button,
	& .dks-qty__input::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	& .dks-line__total {
		margin-left: auto;
		color: var(--white, #fff);
		font: 600 18px/1 "Oswald", sans-serif;
		letter-spacing: .02em;
		white-space: nowrap;
	}

	/* Subtotal and checkout, pinned to the bottom */
	& .woocommerce-mini-cart__total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin: 0;
		padding: 20px 0 16px;
		border: 0;
		border-top: 1px solid var(--border, #2e2e2e);
		color: var(--white, #fff);
		font: 600 18px/1 "Oswald", sans-serif;
		text-transform: uppercase;
		letter-spacing: .05em;
	}
	& .woocommerce-mini-cart__total strong { font-weight: 600; }
	& .woocommerce-mini-cart__total .amount {
		font-size: 22px;
		letter-spacing: .02em;
	}
	& .woocommerce-mini-cart__buttons {
		display: block;
		margin: 0;
		padding: 0;
	}
	& :is(.woocommerce-mini-cart__buttons, .dks-cart-empty-cta) .button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 58px;
		margin: 0;
		padding: 16px 24px;
		background: var(--lime, #c6ff00);
		color: var(--black, #000);
		border: 0;
		border-radius: 4px;
		font: 700 18px/1 "Oswald", sans-serif;
		text-transform: uppercase;
		letter-spacing: .06em;
		text-decoration: none;
		transition: background-color .2s ease, transform .2s ease;
	}
	& :is(.woocommerce-mini-cart__buttons, .dks-cart-empty-cta) .button:hover {
		background: var(--lime-hover, #daff4d);
		transform: translateY(-1px);
	}

	/* Empty cart */
	& .woocommerce-mini-cart__empty-message {
		margin: auto 0 20px;
		padding: 0 12px;
		color: var(--white, #fff);
		font: 600 24px/1.2 "Oswald", sans-serif;
		text-transform: uppercase;
		text-align: center;
		text-wrap: balance;
	}
	& .dks-cart-empty-cta { margin: 0 0 auto; }

	/* What was taken out before checkout (sold out), shown once when it emptied the cart */
	& .dks-cart-changes {
		margin: 16px 0 0;
		padding: 12px 14px;
		border: 1px solid var(--border, #2e2e2e);
		border-left: 4px solid var(--heat, #ff4d00);
		border-radius: 6px;
		background: #0b0b0b;
		font-size: 15px;
		line-height: 1.4;
	}
	& .dks-cart-changes p { margin: 0; }
	& .dks-cart-changes p + p { margin-top: 6px; }
}

.brxe-woocommerce-mini-cart .off-canvas-overlay {
	background: rgba(0, 0, 0, .65);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

@media (max-width: 478px) {
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas { --dks-cart-pad: 16px; }
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas .woocommerce-mini-cart-item { padding-left: 84px; }
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas .woocommerce-mini-cart-item img { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas,
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas * { transition: none !important; }
}

/* ---------- Store notices, site-wide (founder, 2026-10-16: Bricks' light-blue boxes looked off on the dark site) ----------
   "Sold out, so we took it out of your cart", added-to-cart and error messages: dark card, white text, a colored
   edge (lime done, yellow info, orange error). Covers the notice wrappers Woo and Bricks print on any page, and the
   checkout's own error group. The account pages have their own copy in account.css. */
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0;
	padding: 16px 20px;
	background: #0d0d0d;
	color: #fff;
	border: 2px solid var(--border, #2e2e2e);
	border-left: 4px solid var(--lime, #c6ff00);
	border-radius: 8px;
	font: 400 1rem/1.5 "Rubik", system-ui, sans-serif;
	list-style: none;
	text-align: left;
}
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-info { border-left-color: var(--classics, #ffd60a); }
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error { flex-direction: column; align-items: flex-start; border-left-color: var(--heat, #ff4d00); }
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none; }
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error li { margin: 0; color: #fff; }
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: #fff; text-decoration: underline; text-decoration-color: var(--lime, #c6ff00); text-underline-offset: 3px; }
:is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	order: 2;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	background: var(--lime, #c6ff00);
	color: #000;
	border: 0;
	border-radius: 4px;
	font: 700 .95rem/1 "Oswald", sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}