/**
 * ShopLaRosee Framework - Cart drawer
 *
 * 右から静かに出るドロワー。角丸・影は使わず、左端の 1px 罫線で面を分けます。
 *
 * @package ShopLaRosee
 * @since   0.3.0
 */

.slr-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--slr-z-drawer);
	visibility: hidden;
}

.slr-drawer.is-open {
	visibility: visible;
}

.slr-drawer__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--slr-color-overlay);
	opacity: 0;
	transition: opacity var(--slr-duration) var(--slr-ease);
}

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

.slr-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(92vw, 420px);
	padding: var(--slr-space-6);
	background-color: var(--slr-color-bg);
	border-left: var(--slr-border-width) solid var(--slr-color-line);
	transform: translateX(100%);
	transition: transform var(--slr-duration) var(--slr-ease);
}

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

.slr-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--slr-space-4);
	border-bottom: var(--slr-border-width) solid var(--slr-color-line);
}

.slr-drawer__close .slr-icon {
	width: 18px;
	height: 18px;
}

.slr-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding-top: var(--slr-space-5);
	font-size: var(--slr-text-sm);
}

/* WooCommerce の mini cart 内の見た目を最小限に整える */
.slr-drawer__body .woocommerce-mini-cart__empty-message {
	color: var(--slr-color-ink-muted);
}

.slr-drawer__body .cart_list li {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--slr-space-4);
	padding-block: var(--slr-space-4);
	border-bottom: var(--slr-border-width) solid var(--slr-color-line);
}

.slr-drawer__body .cart_list img {
	grid-row: span 2;
	width: 72px;
	height: auto;
}

.slr-drawer__body .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding-block: var(--slr-space-5);
}

.slr-drawer__body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--slr-space-3);
}

.slr-drawer__body .woocommerce-mini-cart__buttons a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border: var(--slr-border-width) solid var(--slr-color-ink);
	font-size: var(--slr-text-xs);
	letter-spacing: var(--slr-tracking-wide);
	text-transform: uppercase;
}

/* 2 つ目のボタン（購入手続きへ）だけ塗る */
.slr-drawer__body .woocommerce-mini-cart__buttons .checkout {
	background-color: var(--slr-color-ink);
	color: var(--slr-color-ink-inverse);
}

/* ---------------------------------------------------------------------
 * カート・購入手続き・マイアカウント
 *
 * これらは固定ページとして表示されるため page.php を通ります。
 * 本文幅が狭いままだと表や入力欄が窮屈になるので、
 * 左ナビと並ぶ幅まで広げます。
 * ------------------------------------------------------------------ */
.woocommerce-cart .slr-container--narrow,
.woocommerce-checkout .slr-container--narrow,
.woocommerce-account .slr-container--narrow {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--slr-gutter);
}

@media (min-width: 901px) {
	.woocommerce-cart .slr-container--narrow,
	.woocommerce-checkout .slr-container--narrow,
	.woocommerce-account .slr-container--narrow {
		padding-left: calc(var(--slr-sidebar-width) + var(--slr-gutter));
	}
}

/* これらのページではページタイトルを大きく出しすぎない */
.woocommerce-cart .slr-section-head__title,
.woocommerce-checkout .slr-section-head__title,
.woocommerce-account .slr-section-head__title {
	font-size: var(--slr-text-lg);
}