/**
 * WP Stripe Cart - Theme (aesthetic) layer
 * ------------------------------------------------------------------
 * 配色・タイポ・ボタン意匠など「見た目」をアクティブなブロックテーマの
 * デザイントークン(--wp--preset--*)に合わせて調整する意匠層。
 * デザイントークン(--wsc-*)は機能層 wp-stripe-cart-fixes.css で定義され、
 * こちらはその後に読み込まれる前提。
 *
 * ★この層は White Label アドオン(独自デザイン)使用時には読み込まれない。
 *   顧客のカスタムデザインを尊重し上書きしないため。機能修正は fixes 層が担う。
 */

/* ===== 商品カード ===================================================== */
.wp-stripe-cart-product {
	background: var(--wsc-bg);
	color: var(--wsc-fg);
	box-shadow: none;
	border: 1px solid var(--wsc-line);
	border-radius: var(--wsc-radius);
	overflow: hidden;
	font-family: inherit;
}
.wp-stripe-cart-product__image > img {
	border-radius: var(--wsc-radius);
}
.wp-stripe-cart-product__name {
	color: var(--wsc-fg);
	font-family: var(--wp--preset--font-family--heading, inherit);
	line-height: 1.3;
}
.wp-stripe-cart-product__desc {
	color: var(--wsc-muted);
	line-height: 1.6;
}

/* 価格: 元は #cd2653 のピンク → テーマの contrast 色でミニマルに */
.wp-stripe-cart-product__price,
.wp-stripe-cart-cart-item__price,
.wp-stripe-cart-cart-footer__total_amount {
	color: var(--wsc-fg);
	font-weight: 700;
}

/* 数量入力 */
.wp-stripe-cart-product__quantity .wp-stripe-cart-js-quantity,
.wp-stripe-cart-cart-item__quantity_input {
	border: 1px solid var(--wsc-line-strong);
	border-radius: var(--wsc-radius);
	color: var(--wsc-fg);
	background: var(--wsc-bg);
	padding: 0.4em 0.5em;
}
.wp-stripe-cart-product__quantity .wp-stripe-cart-js-quantity:focus,
.wp-stripe-cart-cart-item__quantity_input:focus {
	outline: 2px solid var(--wsc-accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* ===== プライマリボタン(カートに入れる / チェックアウト / 支払う) ===== */
.wsc-add-to-cart,
.wp-stripe-cart-product__add_to_cart,
.wp-stripe-cart-cart-footer__btn_checkout,
.wp-stripe-cart-notice__btn_checkout,
.wp-stripe-cart-payment-button,
.wp-stripe-cart-checkout__done {
	background: var(--wsc-btn-bg) !important;
	color: var(--wsc-btn-fg) !important;
	border: 1px solid var(--wsc-btn-bg) !important;
	border-radius: var(--wsc-radius);
	font-family: inherit;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	/* タップしやすい高さを確保(元は行高のみで低かった) */
	min-height: 48px;
	padding: 0.85em 1.4em;
	line-height: 1.25;
	transition: opacity .15s ease, background-color .15s ease, transform .05s ease;
}
.wsc-add-to-cart:hover,
.wp-stripe-cart-product__add_to_cart:hover,
.wp-stripe-cart-cart-footer__btn_checkout:hover,
.wp-stripe-cart-notice__btn_checkout:hover,
.wp-stripe-cart-payment-button:hover,
.wp-stripe-cart-checkout__done:hover {
	opacity: 0.86;
}
.wsc-add-to-cart:active,
.wp-stripe-cart-product__add_to_cart:active,
.wp-stripe-cart-cart-footer__btn_checkout:active,
.wp-stripe-cart-payment-button:active {
	transform: translateY(1px);
}
.wsc-add-to-cart:focus-visible,
.wp-stripe-cart-cart-footer__btn_checkout:focus-visible,
.wp-stripe-cart-payment-button:focus-visible {
	outline: 2px solid var(--wsc-accent);
	outline-offset: 2px;
}
.wsc-add-to-cart[disabled],
.wp-stripe-cart-payment-button[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed;
}

/* セカンダリ / テキストボタン(更新・削除) */
.wp-stripe-cart-cart-item__update,
.wp-stripe-cart-cart-item__remove {
	background: transparent !important;
	color: var(--wsc-muted) !important;
	border: none !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	padding: 0.15em 0.25em;
}
.wp-stripe-cart-cart-item__update:hover,
.wp-stripe-cart-cart-item__remove:hover {
	color: var(--wsc-fg) !important;
}

/* ===== カートドロワー(配色・タイポ) ================================= */
.wp-stripe-cart-cart__inner,
.wp-stripe-cart-checkout__inner {
	background: var(--wsc-bg);
	color: var(--wsc-fg);
}
.wp-stripe-cart-cart__header {
	color: var(--wsc-fg);
	font-family: var(--wp--preset--font-family--heading, inherit);
	border-bottom: 1px solid var(--wsc-line);
	letter-spacing: 0.02em;
}
.wp-stripe-cart-cart__close,
.wp-stripe-cart-notice__close {
	color: var(--wsc-muted);
}
.wp-stripe-cart-cart__close:hover,
.wp-stripe-cart-notice__close:hover {
	color: var(--wsc-fg);
}
.wp-stripe-cart-cart-item__name {
	color: var(--wsc-fg);
}

/* フッター合計欄 */
.wp-stripe-cart-cart-footer {
	background: var(--wsc-subtle);
	border-top: 1px solid var(--wsc-line);
	box-shadow: none;
}
.wp-stripe-cart-cart-footer__subtotal,
.wp-stripe-cart-cart-footer__tax,
.wp-stripe-cart-cart-footer__shipping {
	color: var(--wsc-muted);
}
.wp-stripe-cart-cart-footer__total {
	color: var(--wsc-fg);
	border-top: 1px dashed var(--wsc-line-strong);
}
.wp-stripe-cart-cart__powered_by,
.wp-stripe-cart-cart__powered_by a {
	color: var(--wsc-muted);
}

/* ===== カート項目のコンパクト化 =======================================
   [サムネイル][名前+数量 .... 価格/削除] の1行横並び。長い商品名でも崩れない。 */
.wp-stripe-cart-cart-item {
	margin: 0 !important;
	padding: 12px 2px !important;
	gap: 12px;
	flex-wrap: nowrap !important;
	align-items: center;
	border-bottom: 1px solid var(--wsc-line);
}
.wp-stripe-cart-cart-item__image {
	width: 56px;
	flex: 0 0 auto;
	padding: 0;
}
.wp-stripe-cart-cart-item__image img,
.wp-stripe-cart-cart-item__image .wsc-cart-item-image {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--wsc-radius);
	background: var(--wsc-subtle);
}
.wp-stripe-cart-cart-item__texts {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap !important;
	gap: 10px;
	align-items: center;
}
.wp-stripe-cart-cart-item__texts_left {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}
.wp-stripe-cart-cart-item__texts_right {
	width: auto !important;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 4px;
}
.wp-stripe-cart-cart-item__name {
	padding: 0 0 2px !important;
	margin: 0 0 2px !important;
	line-height: 1.35;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wp-stripe-cart-cart-item__quantity {
	padding: 0 !important;
	gap: 6px;
	flex-wrap: nowrap;
}
.wp-stripe-cart-cart-item__price {
	white-space: nowrap;
}

/* ===== カートアイコン(配色) =========================================
   位置・重ね順は機能層(fixes)側。ここでは色のみ。 */
.wp-stripe-cart-icon {
	background: var(--wsc-btn-bg);
	border-radius: 50%;
	box-shadow: var(--wsc-shadow), 0 4px 14px color-mix(in srgb, var(--wsc-fg) 22%, transparent);
	overflow: visible;
}
.wp-stripe-cart-icon__btn {
	color: var(--wsc-btn-fg);
	border-radius: 50%;
	transition: opacity .15s ease;
}
.wp-stripe-cart-icon__btn:hover {
	background: transparent;
	opacity: .85;
}
.wp-stripe-cart-icon__bubble {
	background: var(--wsc-bg);
	color: var(--wsc-fg);
	border: 1px solid var(--wsc-btn-bg);
	font-family: inherit;
	font-weight: 700;
	box-sizing: content-box;
}

/* ===== 追加通知(レイアウト + 配色) =================================
   [サムネイル] [メッセージ / 商品名] [VIEW CART] のグリッド。画像の右に並べる。 */
.wp-stripe-cart-notice__inner {
	background: var(--wsc-bg);
	color: var(--wsc-fg);
	border: 1px solid var(--wsc-line);
	border-radius: var(--wsc-radius);
	box-shadow: var(--wsc-shadow);
	display: grid !important;
	grid-template-columns: 50px 1fr;
	grid-template-areas:
		"thumb message"
		"thumb name"
		"checkout checkout";
	column-gap: 10px;
	row-gap: 2px;
	align-items: center;
}
.wp-stripe-cart-notice__thumb {
	grid-area: thumb;
	width: 50px !important;
	margin: 0 !important;
	align-self: center;
}
.wp-stripe-cart-notice__thumb img {
	display: block;
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: var(--wsc-radius);
	background: var(--wsc-subtle);
}
.wp-stripe-cart-notice__message {
	grid-area: message;
	width: auto !important;
	padding: 0 34px 0 0 !important;   /* 右上の×ボタンに被らないよう余白 */
	align-self: end;
}
.wp-stripe-cart-notice__name {
	grid-area: name;
	align-self: start;
	padding-right: 10px;
	font-size: 12px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--wsc-fg);
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wp-stripe-cart-notice__btn_checkout {
	grid-area: checkout;
}
.wp-stripe-cart-notice__message .icon-wsc-ok {
	color: var(--wsc-success);
}

/* ===== チェックアウトフォーム ======================================== */
.wp-stripe-cart-checkout h2,
.wp-stripe-cart-checkout .confirmation h1 {
	color: var(--wsc-fg);
	font-family: var(--wp--preset--font-family--heading, inherit);
}
.wp-stripe-cart-checkout__back {
	color: var(--wsc-muted);
}
.wp-stripe-cart-checkout__back:hover {
	color: var(--wsc-fg);
}
.wp-stripe-cart-checkout .instruction {
	color: var(--wsc-muted);
}
.wp-stripe-cart-checkout input.field,
.wp-stripe-cart-checkout select,
.wp-stripe-cart-checkout .field {
	border: 1px solid var(--wsc-line-strong);
	border-radius: var(--wsc-radius);
	background: var(--wsc-bg);
	color: var(--wsc-fg);
	font-family: inherit;
}
.wp-stripe-cart-checkout input.field::placeholder {
	color: var(--wsc-muted);
	opacity: 0.7;
}
.wp-stripe-cart-checkout input.field:focus,
.wp-stripe-cart-checkout select:focus {
	outline: 2px solid var(--wsc-accent);
	outline-offset: 1px;
	border-color: transparent;
}
.wp-stripe-cart-checkout label span {
	color: var(--wsc-muted);
}
#wp-stripe-cart-payment-methods label {
	color: var(--wsc-fg);
}
.payment-request-or hr {
	border-color: var(--wsc-line);
}
.payment-request-or__label {
	color: var(--wsc-muted);
	background: var(--wsc-bg);
}
.stripe_payment_form_footer__subtotal,
.stripe_payment_form_footer__tax,
.stripe_payment_form_footer__shipping {
	color: var(--wsc-muted);
}
.stripe_payment_form_footer__total,
.stripe_payment_form_footer__total_amount {
	color: var(--wsc-fg);
	font-weight: 700;
}

/* 完了 / エラー表示(意味色) */
.confirmation .status.success h1 {
	color: var(--wsc-success);
}
.element-errors,
.confirmation .status.error h1 {
	color: var(--wsc-error);
}

/* ローダーのアクセント */
.wp-stripe-cart-loaderbox__loader {
	border-left-color: var(--wsc-accent) !important;
}