@charset "UTF-8";

/* 字體 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");


/* =========================
   0. RESET / BASE
========================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure,
figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul, li {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* links */
a {
	text-decoration: none;
	color: inherit;
}

/* general */
html {
	-webkit-text-size-adjust: none;
	scroll-behavior: smooth;
}

/* 全站字體、色彩 */
:root {
    --green-bg: #009344;      /* 主綠 */
    --yellow: #ffe600;
    --pink: #ff3b78;
    --blue: #003caa;
    --text-dark: #222;
    --price-red: #c40000;
    --card-bg: #fff;
    --border-light: #e5e5e5;
    --accent-shadow: rgba(0,0,0,.06);
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-round: 999px;
    --gap: 1.25rem;
    --font-main: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
    background:#f6f6f6;
    font-family:var(--font-main);
    color:var(--text-dark);
    line-height:1.5;
    padding:0;
}

/* mobile global helpers */
@media screen and (max-width: 768px) {
	* {
		box-sizing: border-box;
	}
	html,
	body {
		-webkit-text-size-adjust: none; /* iPhone 旋轉後避免字體放大 */
	}
}


/* =========================
   1. LAYOUT / WRAPPER / HEADER / HERO
========================= */

#WRAPPER {
	width: 100%;
	min-width: 1100px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	#WRAPPER { min-width: 100%; }
}

header {
	clear: both;
	width: 100%;
	margin: 0 auto;
	background-color: #727171;
	padding: 5px 0;
}
header img {
	padding-left: 15px;
}
@media screen and (max-width: 768px) {
	header img {
		width: 60%;
		padding-left: 5px;
	}
}

article {
	width: 100%;
	margin: 0 auto;
}


/* 桌機版首屏 title */
#title {
	width: 100%;
	height: 530px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	background:#33b060;
}
#title div {
	width: 1200px;
	margin: 0 auto;
}
#title div h1 {
	width: 580px;
	font-size: 1.65rem;
	color: #fff100;
	padding: 5px 10px;
	font-weight: 600;
	line-height: 1.65;
	text-align: left;
}

/* 手機版首屏 title_m */
#title_m {
	display: none;
}
@media screen and (max-width: 768px) {
	#title { display: none; }
	#title_m { display: block; }
	#title_m img { width: 100%; }
}




/* 容器 */
.wrapper{
    max-width:1200px;
    margin:-1.5rem auto 4rem; /* 往上吃 hero */
    padding:1 1rem 2rem;
    position:relative;
    z-index:3;
}

/* 區塊小標 (像「本書簡介」) */
.section-label{
    background:#fff;
    border-left:8px solid var(--green-bg);
    border-radius:var(--radius-md);
    padding:.85rem 1rem .85rem 1rem;
    margin-bottom:1rem;
    box-shadow:0 8px 16px var(--accent-shadow);
}
.section-label h2{
    font-size:1.125rem;
    font-weight:700;
    color:var(--green-bg);
    letter-spacing:.05em;
    line-height:1.8;
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}
.section-label h2 .tag{
    background:var(--green-bg);
    color:#fff;
    border-radius:var(--radius-round);
    font-size:1.185rem;
    padding:.25rem .6rem;
    line-height:1.5;
    font-weight:600;
}

/* 商品清單區 */
.products-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap);
}
@media(max-width:768px){

.section-label h2{
    font-size:1rem;
    gap:.8rem;
}
.section-label h2 .tag{
    font-size:1.01rem;
    padding:.1rem .6rem;
}

    .products-grid{
        grid-template-columns:repeat(1,1fr);
    }
}

/* 單一商品卡 */
.product-card{
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    box-shadow:0 16px 32px var(--accent-shadow);
    border:1px solid var(--border-light);
    padding:1.25rem 1.25rem 1rem;
    display:flex;
    flex-direction:column;
    position:relative;
}
.product-headline{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:.5rem;
}
.product-cover{
}
.product-cover img{
		width:auto;
		height:160px;
		
}
.product-name{
    font-size:1.2rem;
    font-weight:700;
    line-height:1.5;
    color:var(--text-dark);
}
.product-name span.sub{
    font-size:.8rem;
    font-weight:500;
    color:#666;
    display:block;
}
.product-price{
    background:var(--yellow);
    border-radius:var(--radius-round);
    font-weight:700;
    font-size:.9rem;
    line-height:1.2;
    padding:.4rem .75rem;
    color:#000;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.product-price del{
    font-size:.8rem;
    color:#444;
    margin-left:.4rem;
    font-weight:400;
}
.product-body{
    margin-top:1rem;
    font-size:1.05rem;
    color:brown;
    line-height:1.5;
}
.product-body b{
    color:#000;
}
.product-body .red{
    color:var(--price-red);
    font-weight:700;
}
.product-body .highlight{
    background:var(--yellow);
    padding:0 .3rem;
    font-weight:700;
}

/* 小icon功能點 / bullet 區 */
.feature-list{
    margin-top:.75rem;
    padding-left:1rem;
    font-size:0.925rem;
    line-height:1.5;
    color:#333;
}
.feature-list li{
    margin-bottom:.4rem;
    position:relative;
}
.feature-list li::before{
    content:"●";
    color:var(--green-bg);
    font-size:.6rem;
    position:absolute;
    left:-1rem;
    top:.4rem;
}

/* 贈品 / 加碼 */
.bonus-box{
    margin-top:1rem;
    border:2px dashed var(--pink);
    border-radius:var(--radius-md);
    padding:.75rem 1rem;
    background:#fff0f6;
    font-size:.85rem;
    line-height:1.5;
}
.bonus-title{
    font-weight:700;
    color:var(--pink);
    margin-bottom:.4rem;
    font-size:.9rem;
}
.bonus-box .yellow-mark{
    background:var(--yellow);
    padding:0 .3rem;
    font-weight:700;
}

/* 行動按鈕們，可以後面接連結 */
.card-actions{
    margin-top:1rem;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}
.card-actions a{
    flex:0 0 auto;
    background:#fff;
    border:1px solid var(--green-bg);
    color:var(--green-bg);
    font-size:.8rem;
    font-weight:600;
    border-radius:var(--radius-round);
    line-height:1.2;
    padding:.5rem .9rem;
    text-decoration:none;
    transition:.2s;
}
.card-actions a:hover{
    background:var(--green-bg);
    color:#fff;
}
.product-bundle{
    border:2px solid var(--pink);
    box-shadow:0 20px 36px rgba(255,0,128,.12), 0 16px 32px var(--accent-shadow);
    position:relative;
}
.product-bundle::before{
    content:"優惠套組";
    position:absolute;
    top:-10px;
    left:16px;
    background:var(--pink);
    color:#fff;
    font-size:.75rem;
    font-weight:700;
    line-height:1.2;
    padding:.3rem .6rem;
    border-radius:999px;
    box-shadow:0 6px 12px rgba(0,0,0,.25);
}


/* ===== 套組橫條卡 ===== */
.bundle-card{
    background:linear-gradient(135deg,#fffbe0 0%,#fff 30%,#fff 70%,#eaffef 100%);
    border:2px solid #ffd84a; /*亮黃邊*/
    border-radius:20px;
    box-shadow:0 20px 36px rgba(0,0,0,.08);
    padding:1.25rem 1.5rem;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:1rem;
    font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
    color:#222;
    margin-top:30px;
}

/* 左側兩本封面排法 */
.bundle-left{
    flex:0 0 auto;
}
.bundle-books{
    display:flex;
    gap:.75rem;
}
.bundle-book{
    width:110px;
    aspect-ratio:3/4;
    background:#fff;
    border-radius:8px;
    box-shadow:0 12px 24px rgba(0,0,0,.15);
    border:2px solid #fff;
    overflow:hidden;
}
.bundle-book img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* 中間文字區 */
.bundle-middle{
    flex:1 1 250px;
    min-width:220px;
}
.bundle-title{
    font-size:1.1rem;
    font-weight:700;
    line-height:1.4;
    color:#006e3a; /*深綠，呼應主視覺綠*/
    margin-bottom:.5rem;
}
.bundle-desc{
    font-size:.9rem;
    line-height:1.5;
    color:#444;
    margin-bottom:1rem;
}

/* 價格區塊 */
.bundle-price-wrap{
    font-size:1.05rem;
    line-height:1.4;
    color:#333;
}
.bundle-original{
    color:#666;
    font-size:.8rem;
    margin-bottom:.4rem;
}
.bundle-original .num{
    text-decoration:line-through;
    text-decoration-thickness:2px;
    color:#999;
}

/* 現在價格膠囊 */
.bundle-now{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
    background:#ffec70;
    border-radius:10px;
    padding:.5rem .75rem;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
    width:max-content;
    border:1px solid #f5c400;
    margin-bottom:.5rem;
}
.bundle-now-label{
    font-size:.8rem;
    font-weight:700;
    color:#8a4b00;
    line-height:1.2;
}
.bundle-now-price{
    font-size:1.2rem;
    font-weight:800;
    line-height:1;
    color:#8a4b00;
}

/* 節省說明 */
.bundle-save{
    font-size:.75rem;
    color:#666;
}

/* 右邊 CTA 區 */
.bundle-right{
    flex:0 0 180px;
    min-width:160px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.75rem;
}

/* CTA 按鈕卡 */
.bundle-cta{
    display:block;
    text-decoration:none;
    background:linear-gradient(180deg,#fff5b5 0%,#fff5b5 40%,#fff 100%);
    color:#5a4100;
    border-radius:14px;
    box-shadow:0 14px 28px rgba(0,0,0,.18);
    border:1px solid #f5c400;
    padding:.9rem 1rem .8rem;
    min-width:160px;
    text-align:center;
    font-weight:700;
    line-height:1.3;
}
.bundle-cta-main{
    font-size:.95rem;
    font-weight:700;
    display:block;
}
.bundle-cta-sub{
    font-size:.8rem;
    font-weight:600;
    color:#b83a00;
}


/* RWD */
@media(max-width:768px){
    .bundle-card{
        padding:1rem 1rem 1.25rem;
    }
    .bundle-right{
        flex:1 1 100%;
        align-items:flex-start;
        text-align:left;
    }
    .bundle-deadline{
        text-align:left;
    }
    .bundle-cta{
        min-width:unset;
        width:100%;
        text-align:center;
    }
}


.reading-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: flex-start;
	margin:0 auto;
	text-align:center;
}

.reading-card {
	width: 250px;
	height:400px;
	background: #fff;
	border: 1px solid #e5e6eb;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.06);
	padding: 16px 16px 20px;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: all 0.18s ease;
	float:left;
	margin:15px;
}
.reading-card:hover {
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
	transform: translateY(-4px);
}

.reading-cover {
	width: 100%;
	height: 185px;
	border: 1px solid #ccc;
	background: #f5f5f7;
	border-radius: 8px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	color: #999;
	font-weight: 500;
}

.reading-cover a img {
max-width:100%;
	height: 182px;
border-radius:6px;
}

.reading-title {
	font-size: 1.15rem;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
	min-height: 2.8em; /* 兩行高度，避免高度不齊 */
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.reading-priceblock {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 12px;
}
.reading-priceblock .sale {
	color: #d9534f;
	font-weight: 700;
}
.reading-priceblock small {
	font-size: .95rem;
	color: #999;
	font-weight: 400;
	margin-left: .25em;
}
.reading-priceblock .list {
	color: #555;
	font-size: .85rem;
}

.reading-cartbtn {
	appearance: none;
	border: none;
	border-radius: 8px;
	background: #e53935;
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	padding: 8px 10px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(229,57,53,.4);
	transition: all .18s ease;
}
.reading-cartbtn:hover {
	background: #c62828;
	box-shadow: 0 6px 14px rgba(229,57,53,.5);
}

/* reading-grid RWD */
@media (max-width: 768px) {

.reading-grid {
	gap: 30px;
}

.reading-card {
	width: 46%;
	height:360px;
	padding: 5px;
	margin:15px 5px;
}

.reading-cover {
	width: 70%;
	height: auto;
	margin:0 auto;
}

.reading-cover a img {
max-width:90%;
	height: auto;
border-radius:6px;
}

.reading-title {
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 5px;
}

.reading-priceblock {
	line-height: 1.5;
	margin-top: 10px;
	margin-bottom: 12px;
}
	
}


/* 頁尾備註 */
.footer-note{
    max-width:1200px;
    margin:2rem auto 4rem;
    padding:0 1rem;
    font-size:.8rem;
    color:#666;
    line-height:1.5;
    text-align:center;
}



/* 特價提示塊 */
.book_sale img {
	width: 30%;
	margin: 10px;
}

/* reading-grid RWD */
@media (max-width: 768px) {
.book_sale{
	width:98%;
	margin:0 auto;
	text-align:center;
}
.book_sale img {
	width: 46%;
	margin: 10px 2%;
	float:left;
}
}




/* footer */
footer {
	clear: both;
	width: 100%;
	margin: 0 auto;
	background: #4B3100;
	color: #FFF;
	padding: 8px 0;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.5;
}

/* 浮動購物車 */
#car {
	width: 145px;
	position: fixed;
	z-index: 999999;
}
#car a {
	position: fixed;
	top: 42px;
	right: 5px;

	display: inline-block;
	width: 25px;
	padding: 5px 3px;

	background: #ff4f81;
	border: 1px solid #EEE;
	border-radius: 15px;
	box-shadow: 0 5px 15px #193047;

	color: #FFF;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

/* cart iframe (桌機版右上角的小購物車總覽) */
iframe {
	width: 140px;
	position: fixed;
	right: 40px;
	top: 42px;
	height: 180px;
	overflow: hidden;
	border: 0;
}

/* tab-content 裡的 iframe (如果內頁嵌東西用) */
.tab-content iframe {
	width: 100%;
	height: 600px;
	position: static;
	border: 0;
}

/* cart RWD: 手機時只留粉紅按鈕，隱藏右上iframe */
@media screen and (max-width: 768px) {
	#car {
		width: auto;
	}
	#car a {
		width: 35px;
		border-radius: 5px;
		top: 80%;
		line-height: 1.5;
	}
	iframe {
		display: none;
	}
}