/* ===============================
   鳩環屋 ショップ拡張の見た目
   お客さんはお年寄りが多いので「大きな文字・大きなボタン・はっきりした色」
   色は colors.css（管理画面と共通）で決めて、ここでは変数（var(--…)）で使う
   =============================== */
:root {
	--prs-font-base: 18px;            /* 基本の文字の大きさ */
}

/* ===============================
   全色まとめフォームの出し分け
   JavaScript が動いたら（.prs-bulk-ready）、Welcart の元の色ごとのフォームを隠してまとめフォームを出す
   =============================== */
.prs-bulk-ready .item-info > form:not(.prs-bulk) {
	display: none;
}

/* ===============================
   全色まとめフォーム（templates/bulk-form.php）
   左（スマホでは上）：写真・値段・「ご注文の前に」／右（スマホでは下）：注文の手順（1画面ずつ）
   文字の大きさ・余白・角の丸みは site.css の変数を使う
   =============================== */
.prs-bulk {
	display: none; /* JS が動くまでは出さない（上の「出し分け」） */
	gap: var(--prs-s-5);
	margin: 0 0 var(--prs-s-6);
	color: var(--prs-color-text);
	font-size: var(--prs-font-base);
	line-height: 1.6;
}

.prs-bulk-ready .prs-bulk {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* PC：写真とフォームを横に並べる（商品のページも色ごとのページも）。写真は下にスクロールしても残る */
@media screen and (min-width: 900px) {
	.prs-bulk-ready .prs-bulk {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
		gap: var(--prs-s-6);
	}

	.prs-bulk__aside {
		position: sticky;
		top: 86px; /* ヘッダー（約70px）の下 */
	}

	.admin-bar .prs-bulk__aside {
		top: 118px;
	}
}

.prs-bulk__title {
	margin: 0 0 var(--prs-s-2);
	color: var(--prs-color-main);
	font-size: var(--prs-f-h2);
}

.prs-bulk__price {
	margin: var(--prs-s-2) 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
}

.prs-bulk__price small {
	margin-left: var(--prs-s-1);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	font-weight: 400;
}

/* ご注文の前に */
.prs-bulk__points {
	margin: var(--prs-s-3) 0;
	padding: var(--prs-s-3) var(--prs-s-4);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-beige);
}

.prs-bulk__points-title {
	margin: 0;
	font-weight: 700;
}

.prs-bulk__points ul {
	margin: var(--prs-s-1) 0 0;
	padding: 0;
	list-style: none;
}

.prs-bulk__points li {
	position: relative;
	margin: 0;
	padding-left: 1.3em;
	line-height: 1.6;
}

.prs-bulk__points li + li {
	margin-top: var(--prs-s-1);
}

.prs-bulk__points li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--prs-color-main);
	font-weight: 700;
}

/* 注文の箱（右） */
.prs-bulk__main {
	padding: var(--prs-s-4);
	border: 3px solid var(--prs-color-main);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-white);
	scroll-margin-top: 90px;
}

.prs-bulk__order-title {
	margin: 0 0 var(--prs-s-2);
	color: var(--prs-color-main);
	font-size: var(--prs-f-large);
	font-weight: 700;
}

/* 手順 1 / 3 と線 */
.prs-bulk__progress-text {
	margin: 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

.prs-bulk__progress {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--prs-s-1);
	margin: var(--prs-s-1) 0 var(--prs-s-4);
	padding: 0;
	list-style: none;
}

.prs-bulk__progress li {
	margin: 0;
	padding: 6px 2px;
	border-radius: var(--prs-r-small);
	background: var(--prs-color-beige);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	list-style: none;
}

.prs-bulk__progress li.is-done {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main);
}

.prs-bulk__progress li.is-now {
	background: var(--prs-color-main);
	color: var(--prs-color-white);
}

/* 番号つきの見出し */
.prs-bulk__step-title {
	display: flex;
	align-items: center;
	gap: var(--prs-s-2);
	margin: 0 0 var(--prs-s-3);
	padding: 0;
	border: 0;
	font-size: 22px;
	line-height: 1.4;
}

.prs-bulk__step-title:focus {
	outline: none;
}

.prs-bulk__num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--prs-color-main);
	color: var(--prs-color-white);
	font-size: 18px;
}

/* 入力欄 */
.prs-field {
	margin: 0 0 var(--prs-s-4);
}

.prs-field__label {
	display: block;
	margin: 0 0 var(--prs-s-1);
	font-weight: 700;
}

.prs-required {
	margin-left: var(--prs-s-2);
	padding: 0 6px;
	border-radius: 4px;
	background: var(--prs-color-error);
	color: var(--prs-color-white);
	font-size: 13px;
	vertical-align: 2px;
}

.prs-field__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	padding: 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-border);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-text);
	font-family: inherit;
	font-size: 22px; /* スマホで入力欄が勝手に拡大されないよう16px以上 */
}

.prs-field__input:focus,
.prs-bulk__qty-input:focus {
	outline: none;
	border-color: var(--prs-color-main);
	box-shadow: 0 0 0 3px var(--prs-color-main-light);
}

.prs-field__input.is-error {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error-bg);
}

.prs-hint {
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

.prs-error {
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-error);
	font-weight: 700;
}

.prs-error:empty {
	display: none;
}

/* 電話番号の下の「✓ 090-1234-5678 で印刷します」 */
.prs-phone-preview {
	margin: var(--prs-s-1) 0 0;
	color: var(--prs-color-ok);
	font-weight: 700;
}

.prs-phone-preview:empty {
	display: none;
}

/* 「もう一度使う」ボタン */
.prs-bulk__reuse {
	margin: 0 0 var(--prs-s-4);
	padding: var(--prs-s-3);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-main-light);
}

.prs-bulk__reuse[hidden] {
	display: none;
}

.prs-bulk__reuse-title {
	margin: 0 0 var(--prs-s-2);
	font-size: var(--prs-f-small);
}

.prs-bulk__reuse-button {
	min-height: 48px;
	margin: 0 var(--prs-s-2) var(--prs-s-2) 0;
	padding: 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: var(--prs-font-base);
	font-weight: 700;
	cursor: pointer;
}

/* ②③の上の「印刷内容」 */
.prs-bulk__chosen {
	margin: 0 0 var(--prs-s-4);
	padding: var(--prs-s-2) var(--prs-s-4);
	border-left: 5px solid var(--prs-color-main);
	border-radius: 0 var(--prs-r-small) var(--prs-r-small) 0;
	background: var(--prs-color-main-light);
}

.prs-bulk__chosen-title {
	margin: 0;
	color: var(--prs-color-main);
	font-size: var(--prs-f-small);
	font-weight: 700;
}

.prs-bulk__chosen-values {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--prs-s-4);
	margin: 0;
	font-size: 24px;
	line-height: 1.5;
}

/* 文字だけのボタン（印刷内容をなおす） */
.prs-bulk__link {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: var(--prs-f-small);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.prs-bulk__link::before {
	content: "‹ ";
}

/* 色と数 */
.prs-bulk__colors {
	margin: var(--prs-s-2) 0 0;
	padding: 0;
	list-style: none;
}

.prs-bulk__color {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: var(--prs-s-3);
	align-items: center;
	margin: 0;
	padding: var(--prs-s-2) var(--prs-s-1);
	border-bottom: 1px solid var(--prs-color-border);
	list-style: none;
}

/* 数を入れた色は青く */
.prs-bulk__color.has-value {
	background: var(--prs-color-main-light);
}

.prs-bulk__color-name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.prs-bulk__color-name small {
	display: block;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	font-weight: 400;
}

.prs-bulk__qty {
	display: flex;
	align-items: center;
	gap: var(--prs-s-1);
	white-space: nowrap;
}

.prs-bulk__qty-input {
	box-sizing: border-box;
	width: 96px;
	min-height: 52px;
	padding: 0 var(--prs-s-2);
	border: 2px solid var(--prs-color-border);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-text);
	font-family: inherit;
	font-size: 22px;
	text-align: right;
}

.has-value .prs-bulk__qty-input {
	border-color: var(--prs-color-main);
	font-weight: 700;
}

.prs-bulk__unit {
	font-size: var(--prs-f-small);
}

.prs-bulk__soldout {
	color: var(--prs-color-note);
	font-weight: 700;
}

/* 合計と割引（緑＝割引になる／赤いふち＝最低の数に足りない） */
.prs-bulk__summary {
	margin: var(--prs-s-4) 0 0;
	padding: var(--prs-s-3) var(--prs-s-4);
	border: 2px solid transparent;
	border-radius: var(--prs-r-large);
	background: var(--prs-color-beige);
}

.prs-bulk__summary.is-ok {
	border-color: var(--prs-color-ok);
	background: var(--prs-color-ok-bg);
}

.prs-bulk__summary.is-short {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error-bg);
}

.prs-bulk__summary p {
	margin: 0;
}

.prs-bulk__total {
	font-size: 22px;
	font-weight: 700;
}

.prs-bulk__in-cart {
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

.prs-bulk__discount {
	color: var(--prs-color-wait);
	font-weight: 700;
}

.prs-bulk__discount.is-ok {
	color: var(--prs-color-ok);
}

.prs-bulk__minimum {
	color: var(--prs-color-error);
	font-weight: 700;
}

.prs-bulk__summary [hidden] {
	display: none;
}

/* ③ 確認 */
.prs-bulk__confirm-lead {
	margin: 0 0 var(--prs-s-3);
}

.prs-bulk__confirm-list {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.prs-bulk__confirm-list th,
.prs-bulk__confirm-list td {
	padding: var(--prs-s-2) var(--prs-s-1);
	border: 0;
	border-bottom: 1px solid var(--prs-color-border);
	background: none;
	font-size: var(--prs-f-large);
	text-align: right;
}

.prs-bulk__confirm-list th {
	font-weight: 700;
	text-align: left;
}

/* お知らせ（エラーなど） */
.prs-bulk__message:empty {
	display: none;
}

.prs-bulk__message {
	margin: 0 0 var(--prs-s-3);
	padding: var(--prs-s-3) var(--prs-s-4);
	border-radius: var(--prs-r-small);
	font-weight: 700;
}

.prs-bulk__message.is-error {
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
}

/* ボタン：［次へ］は青、［カートに入れる］はオレンジ、［もどる］は白 */
.prs-bulk__next,
.prs-bulk__button,
.prs-bulk__back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60px;
	margin: var(--prs-s-4) 0 0;
	padding: 0 var(--prs-s-4);
	border: 2px solid transparent;
	border-radius: var(--prs-r-small);
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

.prs-bulk__next {
	background: var(--prs-color-main);
	color: var(--prs-color-white);
}

.prs-bulk__next:hover {
	background: var(--prs-color-main-dark);
}

.prs-bulk__button {
	background: var(--prs-color-accent);
	color: var(--prs-color-white);
}

.prs-bulk__button:hover {
	background: var(--prs-color-accent-dark);
}

.prs-bulk__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.prs-bulk__back {
	min-height: 50px;
	margin-top: var(--prs-s-3);
	border-color: var(--prs-color-main);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-size: var(--prs-font-base);
}

.prs-bulk__back::before {
	content: "‹";
	margin-right: var(--prs-s-2);
	font-size: 24px;
	line-height: 1;
}

.prs-bulk__step[hidden] {
	display: none;
}

/* カートに入れたあと（bulk-form.js の showDone）：緑の箱に入れた内容＋［カートを見る］［別の印刷内容でも注文する］ */
.prs-bulk__done-box {
	padding: var(--prs-s-4);
	border: 2px solid var(--prs-color-ok);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-ok-bg);
}

.prs-bulk .prs-bulk__done-title {
	margin: 0 0 var(--prs-s-3);
	color: var(--prs-color-ok);
}

.prs-bulk__done-title::before {
	content: "✓"; /* 見出しは横ならび（flex）なので、すき間は見出しの gap */
}

.prs-bulk__done-detail .prs-bulk__chosen {
	background: var(--prs-color-white);
}

.prs-bulk__done-detail .prs-bulk__summary {
	margin-bottom: 0;
}

/* スマホ：箱が2重になってせまいので、内側の余白を少なく（「合計 100個 5,000円」が折れないように） */
@media (max-width: 600px) {
	.prs-bulk__done-box {
		padding: var(--prs-s-3) var(--prs-s-2);
	}

	.prs-bulk__done-detail .prs-bulk__summary {
		padding-right: var(--prs-s-3);
		padding-left: var(--prs-s-3);
	}
}

.prs-bulk__done-lead {
	margin: var(--prs-s-4) 0 0;
}

/* ［カートを見る］は <a> なので、下線と文字の色をボタンにそろえる */
.prs-bulk a.prs-bulk__to-cart,
.prs-bulk a.prs-bulk__to-cart:hover {
	color: var(--prs-color-white);
	text-decoration: none;
}

/* 2行に折れても真ん中に */
.prs-bulk__to-cart,
.prs-bulk__again {
	text-align: center;
}

/* ［別の印刷内容でも注文する］：白に青い線（［もどる］と同じ形・矢印なし） */
.prs-bulk__again {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin: var(--prs-s-3) 0 0;
	padding: 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: var(--prs-f-large);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

.prs-bulk__again:hover {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

/* JavaScript が動かないとき */
.prs-bulk-noscript {
	padding: var(--prs-s-4);
	border: 2px solid var(--prs-color-error);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-error-bg);
	font-weight: 700;
}

/* ===============================
   写真
   =============================== */
.prs-photo {
	display: block;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--prs-color-border);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	cursor: zoom-in;
}

.prs-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 全色の比較写真 */
.prs-bulk__all-photo {
	margin: 0;
}

.prs-photo--all {
	width: 100%;
}

/* 全色の写真は横長にそろえる（縦に長い写真でも「ご注文の前に」が下に行きすぎないように。写真は切らない） */
.prs-photo--all img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* 色ごとの小さい写真 */
.prs-bulk__thumb {
	width: 56px;
}

.prs-photo--thumb {
	width: 56px;
	height: 56px;
}

.prs-photo--thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 色の見本（大きな写真の下。全色の小さい写真と色の名前） */
.prs-bulk__swatches {
	margin: var(--prs-s-3) 0 var(--prs-s-4);
}

.prs-bulk__swatches-title {
	margin: 0 0 var(--prs-s-2);
	font-weight: 700;
}

.prs-bulk__swatch-list {
	display: grid;
	grid-template-columns: repeat(var(--prs-swatch-columns, 5), minmax(0, 1fr)); /* 1段の数はテンプレートが色の数から決める */
	gap: var(--prs-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.prs-bulk__swatch {
	margin: 0;
	text-align: center;
}

.prs-photo--swatch {
	width: 100%;
	aspect-ratio: 1;
}

.prs-photo--swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prs-bulk__swatch-name {
	display: block;
	margin-top: 2px;
	font-size: var(--prs-f-small);
	line-height: 1.3;
}

/* 色味の注意書き */
.prs-bulk__photo-note {
	margin: var(--prs-s-2) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}

/* 写真を大きく見る画面 */
.prs-photo-dialog {
	width: min(92vw, 40em);
	max-height: 92vh;
	overflow: auto;
	padding: var(--prs-s-4);
	border: none;
	border-radius: var(--prs-r-large);
	font-size: var(--prs-font-base);
	text-align: center;
}

.prs-photo-dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

.prs-photo-dialog__image {
	display: block;
	max-width: 100%;
	max-height: 55vh;
	margin: 0 auto;
}

.prs-photo-dialog__caption {
	margin: var(--prs-s-2) 0 0;
	font-size: 1.2em;
	font-weight: 700;
}

/* 1色に写真が何枚かあるとき：小さい写真の列（押すと大きい写真が切りかわる）と［前］［次］ */
.prs-photo-dialog__thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--prs-s-2);
	margin-top: var(--prs-s-3);
}

.prs-photo-dialog__thumbs[hidden],
.prs-photo-dialog__nav[hidden] {
	display: none;
}

.prs-photo-dialog__thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid var(--prs-color-border);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	overflow: hidden;
	cursor: pointer;
}

.prs-photo-dialog__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 今大きく出ている写真 */
.prs-photo-dialog__thumb.is-current {
	border: 4px solid var(--prs-color-main);
}

.prs-photo-dialog__nav {
	display: flex;
	gap: var(--prs-s-2);
	margin-top: var(--prs-s-3);
}

.prs-photo-dialog__prev,
.prs-photo-dialog__next {
	flex: 1;
	min-height: 52px;
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: 1.1em;
	font-weight: 700;
	cursor: pointer;
}

.prs-photo-dialog__close {
	width: 100%;
	min-height: 52px;
	margin-top: var(--prs-s-3);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: 1.1em;
	font-weight: 700;
	cursor: pointer;
}

/* =====================================================
   カート・確認画面：印刷内容ごとの箱
   Welcart の表の代わりに、表の1マスの中に箱を並べる（welcart-cart-view.php）
   ===================================================== */

/* 箱を出しているときは、表の見出し（No. 商品名 単価…）・表のまわりの点線・「通貨 : 円」は使わないので隠す */
#cart_table:has(.prs-boxes-row) thead {
	display: none;
}
#cart_table:has(.prs-boxes-row) {
	border: none;
}
#cart:has(.prs-boxes-row) .currency_code {
	display: none;
}

/* 合計（カートは「商品合計」、確認画面は「商品合計・まとめ買い割引・消費税・送料・総合計金額」）も箱の形にする */
#cart_table:has(.prs-boxes-row) tfoot {
	display: block;
	margin: 0 0 1.25em;
	padding: 0.6em 1.1em;
	border: 2px solid var(--prs-color-main);
	border-radius: 10px;
	background: var(--prs-color-main-light);
	font-size: var(--prs-font-base);
	color: var(--prs-color-text);
}
#cart_table:has(.prs-boxes-row) tfoot tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 0.35em 0;
	border: none;
	background: none;
}
#cart_table:has(.prs-boxes-row) tfoot tr + tr {
	border-top: 1px solid var(--prs-color-border);
}
/* 空のマス（No.・写真・在庫・削除の列）は出さない */
#cart_table:has(.prs-boxes-row) tfoot .num,
#cart_table:has(.prs-boxes-row) tfoot .thumbnail,
#cart_table:has(.prs-boxes-row) tfoot .stock,
#cart_table:has(.prs-boxes-row) tfoot .action {
	display: none;
}
#cart_table:has(.prs-boxes-row) tfoot th,
#cart_table:has(.prs-boxes-row) tfoot td {
	display: block;
	padding: 0;
	border: none;
	background: none;
	font-size: 1.05em;
	font-weight: bold;
	color: var(--prs-color-text);
	text-align: left;
}
#cart_table:has(.prs-boxes-row) tfoot th.amount,
#cart_table:has(.prs-boxes-row) tfoot td:last-child,
#cart_table:has(.prs-boxes-row) tfoot td:nth-last-child(2) {
	text-align: right;
	white-space: nowrap;
}
/* 「（税込）」もはっきり読めるように */
#cart_table:has(.prs-boxes-row) tfoot em.tax {
	margin-left: 0.25em;
	font-size: 0.85em;
	font-style: normal;
	font-weight: normal;
	white-space: nowrap; /* スマホで「（税」「込）」と途中で折り返さないように */
	color: var(--prs-color-note);
}
/* 金額（最後の行＝カートは商品合計、確認画面は総合計金額）は大きく */
#cart_table:has(.prs-boxes-row) tfoot tr:last-child th,
#cart_table:has(.prs-boxes-row) tfoot tr:last-child td {
	font-size: 1.2em;
}
#cart_table:has(.prs-boxes-row) tfoot tr:last-child th.amount {
	font-size: 1.5em;
	color: var(--prs-color-main);
}
/* まとめ買い割引の金額は、箱と同じ緑にそろえる（Welcart は赤い文字を直接書いている） */
#cart_table:has(.prs-boxes-row) tfoot td[style*="FF0000"] {
	color: var(--prs-color-ok) !important;
}
#cart_table td.prs-boxes-cell {
	padding: 1em 0 0;
	border: none;
	background: none;
	text-align: left;
	font-size: var(--prs-font-base);
	color: var(--prs-color-text);
}
#cart_table tr.prs-boxes-row {
	border: none;
	background: none;
}
/* Welcart Basic のスマホ用の見出し（data-label）を出さない */
#cart_table td.prs-boxes-cell::before {
	display: none;
	content: none;
}

.prs-boxes__rule {
	margin: 0 0 0.75em;
	padding: 0.6em 0.9em;
	border-radius: 6px;
	background: var(--prs-color-main-light);
	color: var(--prs-color-main);
	font-weight: bold;
}

.prs-box {
	margin: 0 0 1.25em;
	padding: 1em 1.1em;
	border: 2px solid var(--prs-color-border);
	border-radius: 10px;
	background: #ffffff;
}
.prs-box.is-ok {
	border-color: var(--prs-color-ok);
	background: var(--prs-color-ok-bg);
}
.prs-box.is-wait {
	border-color: var(--prs-color-wait);
}

.prs-box__title {
	margin: 0 0 0.5em;
	padding: 0;
	border: none;
	font-size: 1.2em;
	font-weight: bold;
	color: var(--prs-color-text);
}

/* 印刷内容：打ち間違いに気づけるように、青い帯の中に大きく */
.prs-box__print {
	margin: 0 0 0.75em;
	padding: 0.6em 0.9em;
	border-left: 6px solid var(--prs-color-main);
	border-radius: 0;
	background: var(--prs-color-main-light);
}
.prs-box__print-label {
	margin: 0 0 0.2em;
	font-size: 0.85em;
	font-weight: bold;
	color: var(--prs-color-main);
}
.prs-box__print-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.5em;
	margin: 0;
}
.prs-box__print-item {
	display: flex;
	flex-wrap: wrap; /* 入りきらないときは、中身を見出しの下に */
	align-items: baseline;
	gap: 0 0.5em;
}
.prs-box__print-item dt {
	flex: none; /* せまい画面で「電話番号」が1文字ずつ縦に折り返さないように */
	margin: 0;
	white-space: nowrap;
	font-size: 0.9em;
	font-weight: normal;
	color: var(--prs-color-note);
}
.prs-box__print-item dd {
	margin: 0;
	font-size: 1.35em;
	font-weight: bold;
	white-space: nowrap; /* 電話番号などを途中で改行しない */
	color: var(--prs-color-text);
}

/* 色ごとの行：写真・色・数量・金額・削除 */
.prs-box__items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.prs-box__item {
	display: grid;
	grid-template-columns: 56px minmax( 0, 1fr ) 9em 7em 5.5em; /* 列の幅を決めておくと、数量の欄が縦にそろう */
	gap: 0.5em 1em;
	align-items: center;
	margin: 0;
	padding: 0.5em 0;
	border-top: 1px solid var(--prs-color-border);
}
.prs-box__photo img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.prs-box__color {
	font-size: 1.1em;
	font-weight: bold;
}
.prs-box__color small {
	display: block;
	font-size: 0.75em;
	font-weight: normal;
	color: var(--prs-color-note);
}
.prs-box__qty {
	white-space: nowrap;
	font-size: 1.1em;
}
#cart_table .prs-box__qty input.quantity {
	width: 5.5em !important; /* Welcart Basic のせまい幅（!important つき）より優先する */
	min-height: 44px;
	padding: 0.2em 0.4em;
	font-size: 1.1em;
	text-align: right;
}
/* まとめ買い割引の対象外の箱（ナンバリング環など）：グレーの字で控えめに */
.prs-box__except {
	color: var(--prs-color-note);
}
.prs-box__price {
	white-space: nowrap;
	font-weight: bold;
	text-align: right;
}
/* ［数量更新］ボタンも大きく（Welcart Basic のボタン） */
#cart .upbutton {
	font-size: 16px;
}
#cart .upbutton input[name="upButton"] {
	min-height: 48px;
	padding: 0.3em 1.2em;
	font-size: var(--prs-font-base);
	font-weight: bold;
}

/* 削除は押しまちがえないように、少し離して小さめに */
.prs-box__delete {
	padding-left: 0.75em;
}
.prs-box__delete input.delButton {
	min-height: 40px;
	padding: 0.2em 0.8em;
	border: 1px solid var(--prs-color-border);
	border-radius: 6px;
	background: #ffffff;
	color: var(--prs-color-note);
	font-size: 0.85em;
	cursor: pointer;
}

/* 合計と割引 */
.prs-box__result {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	align-items: baseline;
	margin: 0;
	padding-top: 0.6em;
	border-top: 2px solid var(--prs-color-border);
}
.prs-box__total {
	font-size: 1.1em;
	font-weight: bold;
}
.prs-box.is-ok .prs-box__result strong {
	font-size: 1.15em;
	color: var(--prs-color-ok);
}
.prs-box.is-wait .prs-box__result strong {
	padding: 0.1em 0.5em;
	border-radius: 4px;
	background: var(--prs-color-wait-bg);
	color: var(--prs-color-wait);
}
/* 最低注文数に足りない箱（100個から など） */
.prs-box.is-short {
	border-color: var(--prs-color-error);
}
.prs-box.is-short .prs-box__result strong {
	padding: 0.1em 0.5em;
	border-radius: 4px;
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
}

/* カートの合計の箱（商品合計 → まとめ買い割引 → 送料 → お支払い合計）。確認画面の合計の箱と同じ形
   出しているのは prs_checkout_cart_totals()（welcart-checkout.php）。Welcart の合計の行は隠す */
#cart_table:has(.prs-totals) tfoot {
	display: none;
}
.prs-totals {
	margin: 0 0 1.25em;
	padding: 0.6em 1.1em;
	border: 2px solid var(--prs-color-main);
	border-radius: 10px;
	background: var(--prs-color-main-light);
	color: var(--prs-color-text);
}
.prs-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 0.35em 0;
}
.prs-totals__row + .prs-totals__row {
	border-top: 1px solid var(--prs-color-border);
}
.prs-totals dt,
.prs-totals dd {
	margin: 0;
	font-size: 1.05em;
	font-weight: bold;
}
.prs-totals dd {
	text-align: right;
	white-space: nowrap;
}
.prs-totals__row--discount dd {
	color: var(--prs-color-ok);
}
.prs-totals__tax {
	margin-left: 0.25em;
	font-size: 0.85em;
	font-weight: normal;
	white-space: nowrap;
	color: var(--prs-color-note);
}
.prs-totals__row--pay dt {
	font-size: 1.2em;
}
.prs-totals__row--pay dd {
	font-size: 1.5em;
	color: var(--prs-color-main);
}

/* スマホ：写真・色の下に、数量・金額・削除を並べる */
@media ( max-width: 600px ) {
	.prs-box__item {
		grid-template-columns: 48px minmax( 0, 1fr ) auto;
	}
	.prs-box__photo img {
		width: 48px;
		height: 48px;
	}
	/* 数量は写真の下から使う（「1 セット」のように単位が長いと、2列目だけでは［削除］に重なったため） */
	.prs-box__qty {
		grid-column: 1 / 3;
	}
	#cart_table .prs-box__qty input.quantity {
		width: 5em !important;
	}
	.prs-box__price {
		grid-column: 3;
		grid-row: 1;
	}
	.prs-box__delete {
		grid-column: 3;
		padding-left: 0;
		text-align: right;
	}
}

/* カートの自動更新（数を変えたら自動で更新するので、［数量更新］ボタンと「必ず押して」の文は隠す。JS が動いたときだけ） */
.prs-cart-auto .upbutton {
	display: none;
}
.prs-cart-busy {
	display: block;
	margin-top: 0.25em;
	font-weight: bold;
	color: var(--prs-color-main);
}

/* 数の欄のまちがい（cart.js）：その行の下に、行いっぱいの赤い字 */
.prs-cart-qty-error {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--prs-color-error);
	font-weight: bold;
}
.prs-cart-qty-error[hidden] {
	display: none;
}
#cart_table .prs-box__qty input.quantity.is-error {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error-bg);
}