/* ===== retail.html 專屬（沿用 multidisplay.css 共用元件，2026-09-16）===== */

/* 修正 multidisplay.css 的 .box1 span { display:block; float:left } 把 .gt 也整段換行的問題（比照 smartphones.css 的做法）*/
.webTechnologies .contents .box1 span.gt { width: auto; float: none; display: inline; }

/* 三種情境卡片（掃描查價 / 會員卡促銷 / 閒置自動恢復）*/
.rs-ways {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 900px;
	margin: 22px auto 10px;
	padding: 0 20px;
	box-sizing: border-box;
}

.rs-way {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 24px 18px;
	text-align: center;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	transition: transform .3s ease, box-shadow .3s ease;
}

.rs-way:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 18px rgba(0, 126, 212, 0.22);
	border-color: #007ED4;
}

.rs-way__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	display: block;
}

.rs-way h3 {
	margin: 0 0 8px;
	font-size: 1.0625em;
	color: #222;
}

.rs-way p {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.6;
	color: #595959;
}

@media only screen and (max-width: 820px) {
	.rs-ways { grid-template-columns: 1fr; gap: 16px; }
}

/* 條碼掃描機整合說明 */
.rs-scanner-info {
	max-width: 860px;
	margin: 10px auto 0;
	padding: 22px 26px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-left: 4px solid #007ED4;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(142, 163, 175, .18);
	text-align: left;
}

.rs-scanner-info p {
	margin: 0 0 12px;
	font-size: 0.95em;
	line-height: 1.7;
	color: #595959;
}

.rs-scanner-info p:last-child { margin-bottom: 0; }

.rs-scanner-info a { color: #007ED4; text-decoration: none; font-weight: 500; }
.rs-scanner-info a:hover { text-decoration: underline; }

/* 「What a barcode scan can put on the screen」情境照片 swiper（比照 smartphones.css 的 .sp-apps/.sp-app）*/
.rs-apps { max-width: 900px; margin: 14px auto 0; padding: 0 44px; position: relative; box-sizing: border-box; }
.rs-apps .swiper-wrapper { padding: 0; }
.rs-apps .swiper-slide { height: auto; }
.rs-app { display: flex; gap: 40px; align-items: center; justify-content: center; padding: 14px 0 10px; }
.rs-app__image { flex: 0 0 260px; max-width: 260px; }
.rs-app__image img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 2px 14px rgba(0,0,0,0.12); }
.rs-app__text { flex: 1; max-width: 420px; text-align: left; }
.rs-app__text h3 { margin: 0 0 12px; font-size: 1.25em; font-weight: 500; color: #222; }
.rs-app__text p { margin: 0; font-size: 0.95em; line-height: 1.7; color: #595959; }
.rs-apps .swiper-pagination,
.rs-apps .swiper-pagination.swiper-pagination-horizontal,
.rs-apps.swiper-horizontal > .swiper-pagination-bullets { position: static !important; inset: auto !important; transform: none !important; margin: 0 auto 22px !important; max-width: 820px; display: flex; flex-wrap: wrap; gap: 0 22px; justify-content: center; border-bottom: 1px solid #e0e0e0; }
.rs-apps .swiper-pagination-bullet { width: auto; height: auto; background: none; opacity: 1; border-radius: 0; color: #888; font-size: 0.95em; line-height: 1.3; padding: 8px 3px; margin: 0 !important; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.rs-apps .swiper-pagination-bullet:hover { color: #007ED4; }
.rs-apps .swiper-pagination-bullet-active { color: #007ED4; font-weight: 600; border-bottom-color: #007ED4; }
.rs-apps .swiper-button-prev, .rs-apps .swiper-button-next { color: #007ED4; }
.rs-apps .swiper-button-prev::after, .rs-apps .swiper-button-next::after { font-size: 20px; }
@media only screen and (max-width: 820px) {
	.rs-apps { padding: 0 16px; }
	.rs-apps .swiper-button-prev, .rs-apps .swiper-button-next { display: none; }
	.rs-apps .swiper-pagination,
	.rs-apps .swiper-pagination.swiper-pagination-horizontal { gap: 0 14px; margin: 0 auto 16px !important; }
	.rs-apps .swiper-pagination-bullet { font-size: 0.9em; padding: 8px 2px; }
	.rs-app { flex-direction: column; gap: 18px; text-align: center; }
	.rs-app__text { text-align: center; }
	.rs-app__image { flex-basis: auto; max-width: 220px; }
}

/* hover / accent 統一用 CAYIN 藍，跟其他重建頁一致；橘桃紅只留在 hero */
.retail-page .application-card:hover { box-shadow: 0 4px 16px rgba(0, 126, 212, 0.2); border-color: #007ED4; }
.retail-page .application-card:hover .card-title { color: #007ED4; }
.retail-page .wt-faq summary::after { color: #007ED4; }
.retail-page .contact-us-section .mail_btn { background: linear-gradient(90deg, #FF7E5F 0%, #D62976 100%); }
.retail-page .player-slider .player-name,
.retail-page .webTechnologies .contents .box2 .box21 h2 { color: #007ED4; }