/*
 * Krugio Theme: shared slide-in panel (mobile menu, mini-cart drawer, filter panel)
 * and the mobile-menu button. Tokens only. Behaviour: assets/js/panel.js.
 * Panel markup: .krugio-panel[data-krugio-panel] > .krugio-panel__overlay + .krugio-panel__body.
 */

/* The panel fills the viewport; only its body is visible. */
.krugio-panel {
	position: fixed;
	z-index: 100000; /* above the WordPress admin bar (99999) */
	inset: 0;
	overflow: hidden;
}

.krugio-panel[hidden] {
	display: none;
}

.krugio-panel__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--krugio-color-text) 55%, transparent);
	opacity: 0;
	transition: opacity var(--krugio-transition);
}

.krugio-panel__body {
	position: absolute;
	inset-block: 0;
	display: flex;
	flex-direction: column;
	width: var(--krugio-drawer-width);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--krugio-color-bg);
	color: var(--krugio-color-text);
	transition: transform var(--krugio-transition);
}

.krugio-panel--left .krugio-panel__body {
	left: 0;
	transform: translateX(-100%);
}

.krugio-panel--right .krugio-panel__body {
	right: 0;
	transform: translateX(100%);
}

.krugio-panel.is-open .krugio-panel__overlay {
	opacity: 1;
}

.krugio-panel.is-open .krugio-panel__body {
	transform: none;
}

.krugio-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--krugio-space-3);
	padding: var(--krugio-space-3) var(--krugio-gutter);
	border-bottom: var(--krugio-border-width) solid var(--krugio-color-border-subtle);
}

.krugio-panel__title {
	margin: 0;
	font-size: var(--krugio-font-size-lg);
}

.krugio-panel__content {
	flex: 1;
	padding: var(--krugio-space-3) var(--krugio-gutter) var(--krugio-space-5);
}

/* Icon buttons: close button of a panel and the mobile-menu button */
.krugio-panel__close,
.krugio-menu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--krugio-radius-button);
	background: transparent;
	color: var(--krugio-color-text);
	font: inherit;
	cursor: pointer;
}

.krugio-panel__close:hover,
.krugio-menu-button:hover {
	color: var(--krugio-color-accent);
}

/* Mobile menu: stacked; sub-menus are expanded unless mobile-menu.js folds them behind toggle buttons */
.krugio-mobile-menu .krugio-nav {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
}

.krugio-mobile-menu .krugio-nav .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	padding: 0 0 0 var(--krugio-space-4);
	border: 0;
	background: transparent;
}

.krugio-mobile-menu .krugio-nav a {
	padding-block: var(--krugio-space-3);
}

/* A folded child list (hidden attribute set by mobile-menu.js) */
.krugio-mobile-menu .krugio-nav .sub-menu[hidden] {
	display: none;
}

/* Parent item: link, toggle button, then the child list on its own row */
.krugio-mobile-menu .krugio-nav .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.krugio-mobile-menu .krugio-nav .menu-item-has-children > a {
	flex: 1 1 0;
	min-width: 0;
}

.krugio-mobile-menu .krugio-nav .sub-menu {
	flex: 0 0 100%;
}

/*
 * Sub-menu toggle (markup contract: krugio_get_submenu_toggle_html()). Without JS the lists are visible, so the
 * button is hidden; with `js` it is a 44 px target, the chevron turns over while the list is open.
 */
.krugio-submenu-toggle {
	display: none;
}

.js .krugio-submenu-toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--krugio-radius-button);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.krugio-submenu-toggle:hover {
	color: var(--krugio-color-accent);
}

.krugio-submenu-toggle .krugio-icon {
	transition: transform var(--krugio-transition); /* the token is 0s with prefers-reduced-motion */
}

.krugio-submenu-toggle[aria-expanded="true"] .krugio-icon {
	transform: rotate(180deg);
}

/*
 * Without JS the primary navigation stays visible and the menu button hidden.
 * The script adds `js` to <html> and then the button replaces the navigation below the desktop width.
 */
.krugio-menu-button {
	display: none;
}

@media (max-width: 1023.98px) {
	.js .krugio-menu-button {
		display: inline-flex;
	}

	.js .krugio-primary-nav {
		display: none;
	}
}

/*
 * Mini-cart drawer content (Woo's woocommerce_mini_cart() markup, no Woo stylesheet).
 * Thumbnail floats left; name, size and quantity wrap beside it; the remove link sits in the corner.
 */
.krugio-drawer__content {
	display: flex;
	flex-direction: column;
	gap: var(--krugio-space-4);
}

/* Wrapper of the server-rendered content (holds the AJAX nonce): takes no part in the layout. */
.krugio-drawer__lines {
	display: contents;
}

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

.krugio-drawer .woocommerce-mini-cart-item {
	position: relative;
	display: flow-root;
	padding-block: var(--krugio-space-3);
	padding-inline-end: 2.5rem;
	border-bottom: var(--krugio-border-width) solid var(--krugio-color-border-subtle);
}

.krugio-drawer .woocommerce-mini-cart-item a:not(.remove) {
	color: inherit;
	font-weight: var(--krugio-weight-heading);
	text-decoration: none;
}

.krugio-drawer .woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--krugio-color-accent);
}

.krugio-drawer .woocommerce-mini-cart-item img {
	float: inline-start;
	width: var(--krugio-drawer-thumb-width);
	height: auto;
	aspect-ratio: var(--krugio-image-ratio);
	margin-inline-end: var(--krugio-space-3);
	object-fit: cover;
}

.krugio-drawer .woocommerce-mini-cart-item .variation {
	margin: var(--krugio-space-1) 0 0;
	color: var(--krugio-color-text-muted);
	font-size: var(--krugio-font-size-sm);
}

.krugio-drawer .woocommerce-mini-cart-item .variation dt,
.krugio-drawer .woocommerce-mini-cart-item .variation dd,
.krugio-drawer .woocommerce-mini-cart-item .variation dd p {
	display: inline;
	margin: 0;
}

.krugio-drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: var(--krugio-space-1);
	font-size: var(--krugio-font-size-sm);
}

.krugio-drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	inset-block-start: var(--krugio-space-2);
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--krugio-color-text);
	font-size: var(--krugio-font-size-xl);
	line-height: 1;
	text-decoration: none;
}

.krugio-drawer .woocommerce-mini-cart-item a.remove:hover {
	color: var(--krugio-color-error);
}

.krugio-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	gap: var(--krugio-space-3);
	margin: 0;
	font-size: var(--krugio-font-size-lg);
}

.krugio-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--krugio-space-3);
	margin: 0;
}

.krugio-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	color: var(--krugio-color-text-muted);
}

/*
 * Drawer +/- stepper (KRG-81) and line total (KRG-82). Markup from krugio_drawer_item_quantity(); the stepper itself is the
 * shared .krugio-qty component (quantity.css, KRG-86); this file only hides and shows the row. Woo's "N x price" text
 * stays for visitors without JavaScript; once cart-ajax.js ran (html.krugio-cart-ajax) the text is hidden and the row
 * shows the stepper and the price of the whole line (display only, Woo's get_product_subtotal()). A visitor whose script
 * failed never sees dead buttons. A design child only tunes the look (sizes, colours) through tokens and its own panel.css.
 */
.krugio-drawer-qty-row {
	display: none;
}

html.krugio-cart-ajax .krugio-drawer-qty-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--krugio-space-1) var(--krugio-space-3);
	margin-top: var(--krugio-space-2);
}

html.krugio-cart-ajax .krugio-drawer .woocommerce-mini-cart-item > .quantity {
	display: none;
}

.krugio-drawer-line-total {
	font-variant-numeric: tabular-nums;
}

/* A request is running: the lines are dimmed (the wrapper has no box of its own, so its children are) */
.krugio-drawer__lines[aria-busy="true"] {
	cursor: progress;
}

.krugio-drawer__lines[aria-busy="true"] > * {
	opacity: 0.6;
}

.krugio-drawer a.remove[aria-disabled="true"] {
	cursor: progress;
}

/* Error shown at the top of the drawer content (role="alert", from window.krugioCart.showError) */
.krugio-drawer .krugio-cart-error {
	margin: 0;
	padding: var(--krugio-space-2) var(--krugio-space-3);
	border: var(--krugio-border-width) solid var(--krugio-color-error);
	color: var(--krugio-color-error);
	font-size: var(--krugio-font-size-sm);
}