/* Simple Shop Cart - フロント/管理共通スタイル（スマホファースト） */

.ssc-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ssc-card-min-width, 220px), 1fr));
	gap: 20px;
	margin: 20px 0;
}

.ssc-product-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--ssc-card-border, #e2e2e2);
	border-radius: var(--ssc-card-radius, 8px);
	overflow: hidden;
	background: var(--ssc-card-bg, #fff);
	transition: box-shadow .2s ease, transform .2s ease;
}
.ssc-product-card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	transform: translateY(-2px);
}
.ssc-product-thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.ssc-product-thumb-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f2f2f2;
}
.ssc-product-info { padding: 12px 14px; }
.ssc-product-title {
	margin: 0 0 6px;
	font-size: 1rem;
	color: var(--ssc-card-title-color, inherit);
	background: var(--ssc-card-title-bg, transparent);
	padding: 2px 6px;
	border-radius: 4px;
	display: inline-block;
}
.ssc-product-excerpt { margin: 0 0 8px; font-size: .85rem; color: #666; }
.ssc-product-price { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ssc-card-price-color, inherit); }

/* 各ページ共通：商品一覧に戻るリンク */
.ssc-back-link-row { margin: 0 0 16px; }
.ssc-back-link {
	display: inline-block;
	color: #777;
	text-decoration: none;
	font-size: .9rem;
}
.ssc-back-link:hover { color: var(--ssc-btn-bg, #2271b1); text-decoration: underline; }

/* 商品詳細 */
.ssc-product-detail {
	max-width: 720px;
	margin: 0 auto;
	padding: 16px;
}
.ssc-product-detail-media img { width: 100%; border-radius: 8px; }
.ssc-product-detail-price {
	display: flex;
	width: fit-content;
	align-items: baseline;
	gap: 4px;
	background: #eaf6fc;
	border: 1px solid #bfe3f2;
	color: #0f6c8f;
	font-size: 1.4rem;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 999px;
	margin: 10px 0 20px;
}
.ssc-tax-note { font-size: .7rem; font-weight: 400; color: #4a8ba3; }
.ssc-product-type-badge {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	margin: 4px 0 10px;
}
.ssc-product-type-download { background: #e7f1fc; color: #1a5aa3; }
.ssc-product-type-shipping { background: #f1e9fb; color: #6b3fa0; }
.ssc-product-detail-content { margin-bottom: 24px; line-height: 1.8; }

/* 商品画像ギャラリー（クリックで拡大表示） */
.ssc-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 20px;
}
.ssc-gallery-thumb {
	padding: 0;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	width: 68px;
	height: 68px;
	flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent;
}
.ssc-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ssc-gallery-thumb:hover,
.ssc-gallery-thumb:focus-visible {
	border-color: var(--ssc-btn-bg, #2271b1);
}

.ssc-lightbox {
	display: flex;
	position: fixed;
	inset: 0;
	background: rgba(247, 235, 208, 0);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: env(safe-area-inset-top, 16px) env(safe-area-inset-right, 16px) env(safe-area-inset-bottom, 16px) env(safe-area-inset-left, 16px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		opacity .28s ease,
		background-color .28s ease,
		backdrop-filter .28s ease,
		-webkit-backdrop-filter .28s ease,
		visibility 0s linear .68s;
}
.ssc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background: rgba(247, 233, 205, .97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition:
		opacity .22s ease,
		background-color .22s ease,
		backdrop-filter .3s ease,
		-webkit-backdrop-filter .3s ease,
		visibility 0s linear 0s;
}
.ssc-lightbox-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 92vw;
	max-height: 88vh;
	opacity: 0;
	transform: translateY(70px) scale(.55);
	transition: opacity .3s ease, transform .68s cubic-bezier(.34,1.56,.64,1);
}
.ssc-lightbox.is-open .ssc-lightbox-content {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition-delay: .04s;
}
.ssc-lightbox-img {
	max-width: 92vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 6px;
	display: block;
	box-shadow: 0 20px 50px rgba(120, 90, 40, .28);
}
.ssc-lightbox-caption {
	color: #5c4a2e;
	text-align: center;
	font-size: .95rem;
	line-height: 1.5;
	margin: 14px 0 0;
	max-width: 92vw;
	padding: 0 8px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .35s ease, transform .35s ease;
	transition-delay: .16s;
}
.ssc-lightbox.is-open .ssc-lightbox-caption {
	opacity: 1;
	transform: translateY(0);
}
.ssc-lightbox-close,
.ssc-lightbox-prev,
.ssc-lightbox-next {
	opacity: 0;
	transform: scale(.75);
	transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
	transition-delay: .1s;
	position: absolute;
	background: rgba(92, 74, 46, .12);
	color: #5c4a2e;
	border: 1px solid rgba(92, 74, 46, .18);
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}
.ssc-lightbox.is-open .ssc-lightbox-close,
.ssc-lightbox.is-open .ssc-lightbox-prev,
.ssc-lightbox.is-open .ssc-lightbox-next {
	opacity: 1;
	transform: scale(1);
}
.ssc-lightbox-close:hover,
.ssc-lightbox-prev:hover,
.ssc-lightbox-next:hover {
	background: rgba(92, 74, 46, .22);
}
.ssc-lightbox-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.ssc-lightbox-prev { left: max(8px, env(safe-area-inset-left)); top: 50%; margin-top: -22px; }
.ssc-lightbox-next { right: max(8px, env(safe-area-inset-right)); top: 50%; margin-top: -22px; }
body.ssc-lightbox-open { overflow: hidden; }

/* ログイン中はWordPress管理バーと重ならないよう閉じるボタンを下にずらす */
body.admin-bar .ssc-lightbox-close { top: calc(32px + 12px); }
@media (max-width: 782px) {
	body.admin-bar .ssc-lightbox-close { top: calc(46px + 12px); }
}

/* 管理画面：ギャラリー選択プレビュー（ドラッグ並び替え対応） */
.ssc-gallery-admin-preview {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ssc-gallery-admin-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px;
}
.ssc-gallery-admin-item.ssc-gallery-placeholder {
	background: #f0f6fc;
	border: 1px dashed #8bb8e8;
	height: 50px;
}
.ssc-gallery-drag-handle {
	cursor: move;
	color: #888;
	font-size: 16px;
	line-height: 1;
	flex: 0 0 auto;
	padding: 4px;
	touch-action: none;
}
.ssc-gallery-admin-item img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	border-radius: 3px;
	flex: 0 0 auto;
}
.ssc-gallery-caption-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 6px;
}
.ssc-gallery-remove-btn {
	flex: 0 0 auto;
	background: #f5f5f5;
	color: #a00;
	border: 1px solid #ddd;
	border-radius: 3px;
	width: 26px;
	height: 26px;
	line-height: 1;
	font-size: 14px;
	cursor: pointer;
}

.ssc-order-form p { margin-bottom: 14px; }
.ssc-order-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.ssc-order-form input[type=text],
.ssc-order-form input[type=email],
.ssc-order-form input[type=number],
.ssc-order-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
}
.ssc-order-form .required { color: #d63638; }
.ssc-submit-btn, .ssc-mark-paid-btn, .ssc-download-btn {
	display: block;
	width: 50%;
	min-width: 220px;
	margin: 28px auto 0;
	padding: 14px;
	font-size: 1.05rem;
	cursor: pointer;
	background: var(--ssc-btn-bg, #2271b1);
	color: var(--ssc-btn-text, #ffffff);
	border: none;
	border-radius: 6px;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
}
@media (max-width: 480px) {
	.ssc-submit-btn, .ssc-mark-paid-btn, .ssc-download-btn { width: 100%; min-width: 0; }
}
.ssc-submit-btn:hover, .ssc-mark-paid-btn:hover, .ssc-download-btn:hover {
	filter: brightness(0.93);
	color: var(--ssc-btn-text, #ffffff);
}
.ssc-submit-btn:disabled, .ssc-mark-paid-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}
.ssc-form-message {
	padding: 10px 12px;
	border-radius: 6px;
	background: #fef2f2;
	color: #b32d2e;
}
.ssc-form-message.ssc-success {
	background: #edfaef;
	color: #1a7f37;
}

/* 注文状況ページ */
.ssc-order-status-page { max-width: 640px; margin: 0 auto; padding: 16px; }
.ssc-order-summary { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.ssc-order-summary th, .ssc-order-summary td {
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.ssc-order-summary th { width: 40%; color: #666; font-weight: 600; }
.ssc-payment-box, .ssc-status-box {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 20px;
	background: #fafafa;
}
.ssc-paypay-qr { max-width: 240px; display: block; margin: 0 auto 16px; }
.ssc-important-note {
	background: #fff8e1;
	border: 1px solid #ffe08a;
	padding: 12px;
	border-radius: 6px;
	margin: 16px 0;
}
.ssc-sold-out { color: #b32d2e; font-weight: 700; }

/* 管理画面：ステータスバッジ */
.ssc-status { padding: 3px 8px; border-radius: 4px; font-size: .8rem; background: #eee; }
.ssc-status-pending_payment { background: #fff3cd; color: #856404; }
.ssc-status-payment_reported { background: #cce5ff; color: #004085; }
.ssc-status-to_ship { background: #e2d9f3; color: #4b2e83; }
.ssc-status-completed, .ssc-status-shipped { background: #d4edda; color: #155724; }
.ssc-status-cancelled { background: #f5f5f5; color: #999; }

@media (max-width: 480px) {
	.ssc-product-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--ssc-card-min-width, 220px), 150px), 1fr)); gap: 12px; }
}

/* フローティングカートバッジ */
.ssc-cart-badge {
	position: fixed;
	right: 16px;
	/* 他のサイトアイコン（チャットウィジェット等はページ下部に多いため）と
	   被らないよう、画面上部に表示する。ログイン時はWP管理バー（32px、
	   モバイルは46px）の下に来るよう余白を確保する。 */
	top: 16px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ssc-btn-bg, #2271b1);
	color: var(--ssc-btn-text, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	z-index: 9999;
}

/* 管理バー表示中はその分だけ下にずらす */
.admin-bar .ssc-cart-badge {
	top: 48px;
}
@media screen and (max-width: 782px) {
	.admin-bar .ssc-cart-badge {
		top: 62px;
	}
}

/* カートに商品が追加された瞬間、アイコンを一瞬揺らして気づきやすくする */
.ssc-cart-badge-shake {
	animation: ssc-cart-shake 0.5s ease-in-out;
}
@keyframes ssc-cart-shake {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(-16deg); }
	40% { transform: rotate(13deg); }
	60% { transform: rotate(-9deg); }
	80% { transform: rotate(6deg); }
}
/* マウスを乗せたときにも軽くゆれる演出 */
.ssc-cart-badge:hover .ssc-cart-badge-icon {
	animation: ssc-cart-wiggle 0.6s ease-in-out infinite;
}
@keyframes ssc-cart-wiggle {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-8deg); }
}
.ssc-cart-badge-icon {
	display: inline-block;
}
.ssc-cart-badge-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #d63638;
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 999px;
	padding: 0 4px;
}

/* カートページ */
.ssc-cart-page { max-width: 720px; margin: 0 auto; padding: 16px; }
.ssc-cart-empty { color: #666; text-align: center; padding: 24px 0; }
.ssc-cart-empty p { margin-bottom: 8px; }
.ssc-cart-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ssc-cart-item {
	display: grid;
	grid-template-columns: 60px 1fr auto auto;
	align-items: center;
	gap: 12px;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px;
}
.ssc-cart-item-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.ssc-cart-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ssc-cart-item-title { font-weight: 600; color: inherit; text-decoration: none; }
.ssc-cart-item-title:hover { text-decoration: underline; }
.ssc-cart-item-type { font-size: .75rem; color: #888; }
.ssc-cart-item-price { font-size: .85rem; color: #666; }
.ssc-cart-item-qty { display: flex; align-items: center; gap: 6px; }
.ssc-qty-btn {
	width: 26px;
	height: 26px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.ssc-qty-input { width: 48px; text-align: center; padding: 4px; border: 1px solid #ccc; border-radius: 4px; }
.ssc-cart-item-subtotal { font-weight: 700; white-space: nowrap; }
.ssc-cart-item-remove {
	background: #fff;
	border: 1px solid #f0c2c2;
	color: #d63638;
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 6px;
	white-space: nowrap;
}
.ssc-cart-item-remove:hover { background: #fdecec; }
.ssc-cart-summary {
	border-top: 1px solid #eee;
	padding-top: 12px;
	margin-bottom: 16px;
}
.ssc-cart-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 4px 0;
	color: #555;
}
.ssc-cart-summary-row.ssc-cart-total {
	font-size: 1.2rem;
	color: inherit;
	border-top: 1px solid #eee;
	margin-top: 6px;
	padding-top: 10px;
}
.ssc-cart-clear-btn {
	display: block;
	width: fit-content;
	margin: 0 0 24px auto;
	background: none;
	border: 1px solid #ccc;
	color: #666;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: .85rem;
}
.ssc-cart-clear-btn:hover { border-color: #d63638; color: #d63638; }

@media (max-width: 480px) {
	.ssc-cart-item {
		grid-template-columns: 50px 1fr auto;
		grid-template-areas: "thumb body remove" "subtotal subtotal subtotal";
	}
	.ssc-cart-item-thumb { grid-area: thumb; }
	.ssc-cart-item-body { grid-area: body; }
	.ssc-cart-item-remove { grid-area: remove; }
	.ssc-cart-item-subtotal { grid-area: subtotal; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	.ssc-lightbox,
	.ssc-lightbox-content,
	.ssc-lightbox-caption,
	.ssc-lightbox-close,
	.ssc-lightbox-prev,
	.ssc-lightbox-next {
		transition-duration: .01ms !important;
	}
}