.site-page {
--page-start-gap: 48px;
  background: var(--bg-body);}
.site-page #global-header {
position: sticky;
  top: 0;
  z-index: 1000;}
.site-page .navbar {
position: relative;
  background: var(--bg-body);
  border-bottom: 1px solid var(--border-light);
  box-shadow: none;}
@media (min-width:993px) {
  .site-page .nav-links { display:grid; grid-template-columns:repeat(5,5rem); gap:1.8rem; justify-content:center;}
  .site-page .nav-links a { text-align:center; text-indent:2px;}
}
.site-page main {
margin-top: 0;
  padding-top: var(--page-start-gap);
  background: var(--bg-body);}
.site-page .home-intro {
padding-top: 0;}
.site-page .about-hero {
padding-top: 0;
  background: var(--bg-body);}
.site-page .about-page {
background: var(--bg-body);}
@media (max-width: 768px) {
.site-page {
--page-start-gap: 28px;}
.site-page main.course-detail-page {
padding-top: var(--page-start-gap) !important;}

}
.site-page {
--text-sub: #6e6761; --text-light: #6e6761;}
.site-page p, .site-page li {
letter-spacing: .015em;}
.site-page .section-header {
margin-bottom: 2.25rem;}
.site-page .section-header h1, .site-page .section-header h2 {
font-weight: 500;}
.site-page .home-product-price {
display: block; font-family: var(--font-sans); font-size: .95rem; color: var(--text-main); margin-top: .6rem; font-variant-numeric: tabular-nums;}
.site-page .home-product p {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; min-height: 2.9em;}
.site-page .home-product h3 { overflow-wrap: anywhere;}
.site-page .btn-buy-primary {
  background:var(--btn-dark); color:var(--bg-body); border-color:var(--btn-dark); box-shadow:none;
}
.site-page .btn-buy-primary:hover {
  background:var(--btn-dark-hover); border-color:var(--btn-dark-hover);
}
.site-page .btn-back-shop {
background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: .75rem .25rem; text-decoration: underline; text-underline-offset: 5px; color: var(--text-muted);}
.site-page .btn-back-shop:hover {
background: transparent; color: var(--text-main); box-shadow: none; transform: none;}
.site-page .product-action-box {
margin: 0 0 1.5rem; align-items: center;}
.site-page .product-detail-price, .site-page .course-price-value, .site-page .product-price {
font-family: var(--font-sans); font-weight: 500; color: var(--text-main); font-variant-numeric: tabular-nums;}
.site-page .order-notice {
background: transparent; border-top: 1px solid var(--border-light); border-radius: 0; padding: 1.2rem 0; margin-bottom: 1rem;}
.site-page .product-detail-img-box, .site-page .course-detail-img-box {
box-shadow: none; border-radius: 4px;}
.site-page .price-filter-widget {
border-bottom: 1px solid var(--border-light); padding-bottom: 1rem;}
.site-page .price-filter-widget summary {
cursor: pointer; font-size: .95rem; font-weight: 500; padding: .6rem 0;}
.site-page .price-filter-content {
margin-top: .6rem;}
.site-page .course-card, .site-page .course-card.card-featured {
background: transparent; border: 0; border-radius: 4px; box-shadow: none;}
.site-page .course-card:hover {
transform: none; box-shadow: none;}
.site-page .course-body {
padding: 1.2rem 0;}
.site-page .course-badge, .site-page .card-featured .course-badge {
background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border-light); font-weight: 500;}
.site-page .featured-corner-tag, .site-page .course-card-hover-tag {
display: none;}
.site-page .course-card-meta {
display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0; font-size: .9rem; color: var(--text-main);}
.site-page .course-card-meta span + span {
color: var(--text-muted);}
.site-page .course-desc {
font-family: var(--font-sans); font-size: .92rem; line-height: 1.8;}
.site-page .course-action-box {
padding: 2rem; border-radius: 4px;}
.site-page .btn-line-inquiry, .site-page .btn-line-inquiry:hover {
background: transparent; border: 1px solid var(--border-light); color: var(--text-main); box-shadow: none; transform: none;}
.site-page .course-deep-sections {
gap: 2rem;}
.site-page .course-deep-card {
padding: 2rem 0; border: 0; border-top: 1px solid var(--border-light); background: transparent; border-radius: 0; box-shadow: none;}
.site-page .deep-card-header {
text-align: left; margin-bottom: 1.4rem;}
.site-page .deep-card-desc {
margin-left: 0;}
.site-page .syllabus-step-card, .site-page .included-item {
background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: .75rem 0;}
.site-page .syllabus-step-card:hover {
transform: none; box-shadow: none;}
.site-page .syllabus-step-card .step-num {
box-shadow: none; background: var(--bg-alt);}
.site-page .notices-list-box {
border-left: 2px solid var(--accent-color); border-radius: 0; background: var(--bg-alt); padding: 1.2rem;}
.site-page .timeline-section {
padding-top: 2rem; padding-bottom: 3rem;}
.site-page .timeline-container {
gap: 3rem;}
.site-page .timeline-content {
text-align: left;}
.site-page .timeline-content .step-desc {
text-align: left; font-family: var(--font-sans); font-size: .95rem; line-height: 1.9; margin: .75rem 0; max-width: none;}
.site-page .timeline-img-box, .site-page .timeline-img {
border-radius: 4px; box-shadow: none;}
.site-page .about-features {
background: var(--bg-body); padding-top: 2.5rem; padding-bottom: 2.5rem;}
.site-page .feature-card {
background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--border-light); border-radius: 0;}
.site-page .care-reading-section {
padding-top: 2.5rem;}
.site-page .care-reading-section h3 {
line-height: 1.6;}
.site-page .contact-info-grid {
gap: 1rem; margin-bottom: 2rem;}
.site-page .info-card {
padding: 1rem .5rem;}
.site-page .map-wrapper-center {
border-radius: 4px; box-shadow: none;}
.site-page .site-footer {
padding: 2.5rem 0 1.5rem; margin-top: 3rem;}
.site-page .footer-col h4 {
font-size: .95rem; margin-bottom: .8rem;}
.site-page .footer-links li {
margin-bottom: .35rem;}
.site-page .footer-col p {
line-height: 1.8;}
.site-page .footer-bottom {
margin-top: 1.75rem; padding-top: 1.25rem;}
@media (max-width: 768px) {
.site-page .home-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem;}
.site-page .home-product-grid .home-product:first-child {
grid-column: auto;}
.site-page .home-product-grid .home-product .home-product-image {
aspect-ratio: 4 / 5;}
.site-page .home-product p {
min-height: 0;}
.site-page .product-detail-img-box {
height: auto; aspect-ratio: 4 / 5; max-height: none;}
.site-page .product-detail-img-box img {
max-height: none;}
.site-page .product-action-box {
gap: .6rem;}
.site-page .product-action-box .btn-buy-primary {
width: 100%;}
.site-page .course-grid {
display: grid; grid-template-columns: 1fr; overflow: visible; padding: 0; gap: 1.75rem; scroll-snap-type: none;}
.site-page .course-grid .course-card {
width: 100%; min-width: 0; flex: initial; margin: 0;}
.site-page .course-slider-wrapper {
margin: 0;}
.site-page .course-swipe-hint {
display: none;}
.site-page .course-action-box {
padding: 1.5rem;}
.site-page .course-deep-card {
padding: 1.5rem 0;}
.site-page .syllabus-timeline {
gap: .5rem;}
.site-page .timeline-content {
text-align: left !important; padding: .5rem 0 !important;}
.site-page .timeline-content .step-desc {
max-width: none;}
.site-page .timeline-container {
gap: 2rem;}
.site-page .contact-info-grid {
grid-template-columns: 1fr; gap: 0;}
.site-page .info-card {
align-items: flex-start; text-align: left; padding: 1rem 0; border-bottom: 1px solid var(--border-light);}
.site-page .info-icon {
display: none;}
.site-page .info-card h3 {
font-size: 1rem;}
.site-page .contact-social-links {
flex-direction: row; max-width: none; width: auto;}
.site-page .footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem;}
.site-page .footer-grid .footer-col:nth-child(2) {
grid-column: 1 / -1; grid-row: 1;}
.site-page .footer-grid .footer-col:last-child {
grid-column: 1 / -1;}
.site-page .footer-socials {
display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;}
.site-page .footer-col p {
white-space: normal !important; overflow-wrap: anywhere;}
.site-page .site-footer {
margin-top: 2rem; padding-top: 2rem;}

}
@media (prefers-reduced-motion: reduce) {
.site-page *, .site-page *::before, .site-page *::after {
scroll-behavior: auto !important;}

}
.site-page {
--font-serif: "Noto Serif TC", "Songti TC", Georgia, serif;
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-heading: var(--font-serif);
  --font-base: var(--font-sans);
  --font-en-serif: var(--font-serif);
  --font-en: var(--font-serif);
  --font-script: var(--font-sans);
  font-family: var(--font-sans);}
.site-page :is(h1, h2, h3, h4, h5, h6, .product-title, .course-title, .other-course-title) {
font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: .025em;}
.site-page :is(p, button, input, select, textarea, summary, label, .nav-links, .mobile-nav-links, .category-menu, .breadcrumb, .footer-links, .footer-socials) {
font-family: var(--font-sans);
  letter-spacing: .015em;}
.site-page :is(.sidebar-title, .filter-heading, .footer-col h4, .cart-header h3, .order-notice h4, .booking-modal-header h3) {
font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .015em;}
.site-page :is(.sub-title, .care-section-tag, .deep-card-sub, .banner-badge, .course-badge, .featured-corner-tag) {
font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .08em;}
.site-page :is(.btn-primary, .btn-buy-primary, .btn-cta-primary, .btn-cta-outline, .btn-back-shop, .btn-checkout-primary, .btn-line-inquiry, .home-text-link, .care-contents, .care-reading-source) {
font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .015em;}
.site-page :is(.home-product-price, .product-price, .card-price, .product-detail-price, .course-price, .course-price-value, .course-price-unit, .course-card-meta, .step-num, .cart-subtotal) {
font-family: var(--font-sans);
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;}
.site-page :is(.hero-quote, .quote-script, .about-script) {
font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: .015em;}
.site-page .store-directions {
max-width: 1000px; margin: 2.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--border-light);}
.site-page .store-directions-heading {
margin-bottom: 1.5rem;}
.site-page .store-directions-heading h2 {
font-size: 1.55rem;}
.site-page .store-directions-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem;}
.site-page .store-directions-grid h3 {
font-size: 1.15rem; margin-bottom: 1.1rem;}
.site-page .store-directions-grid h4 {
font-family: var(--font-sans); font-size: .88rem; margin: 1rem 0 .35rem; color: var(--text-main);}
.site-page .store-directions-grid p {
font-size: .92rem; line-height: 1.85; color: var(--text-muted); margin: 0;}
.site-page .store-directions-link {
display: inline-block; margin-top: 1rem; padding: .5rem 0; color: var(--text-main); font-size: .9rem; text-underline-offset: 4px;}
@media (max-width: 768px) {
.site-page .store-directions {
margin-top: 2rem; padding-top: 1.5rem;}
.site-page .store-directions-heading h2 {
font-size: 1.35rem;}
.site-page .store-directions-grid {
grid-template-columns: 1fr; gap: 1.5rem;}
.site-page .store-directions-grid article + article {
border-top: 1px solid var(--border-light); padding-top: 1.5rem;}

}
.site-page .care-modal-box {
background:var(--bg-body); width:min(560px,92vw); max-height:85vh; border-radius:8px;}
.site-page .care-modal-header {
padding:1.1rem 1.5rem;}
.site-page .care-modal-header h3 {
font-size:1.35rem; font-weight:500;}
.site-page .care-modal-close {
min-width:44px; min-height:44px; color:var(--text-main);}
.site-page .care-modal-body {
padding:1.25rem 1.5rem 1.75rem;}
.footer-guide section + section {
margin-top:1.25rem;}
.footer-guide h4 {
font-size:1rem; font-weight:500; margin-bottom:.4rem;}
.footer-guide p,.footer-guide li {
font-size:.9rem; line-height:1.85; color:var(--text-muted);}
.footer-guide-link {
display:inline-block; margin-top:1.25rem; padding:.5rem 0; color:var(--text-main); font-size:.9rem; text-decoration:underline; text-underline-offset:5px;}
.footer-care-guide details {
border-bottom:1px solid var(--border-light);}
.footer-care-guide summary {
padding:1rem 0; cursor:pointer; font-weight:500;}
.footer-care-guide ul {
margin:0 0 1rem; padding-left:1.2rem;}
.footer-care-guide li + li {
margin-top:.5rem;}
@media(max-width:768px) {
.site-page .care-modal-overlay {
align-items:flex-end; padding:0;}
.site-page .care-modal-box {
width:100%; max-height:85dvh; border-radius:14px 14px 0 0;}
 }
.site-page :is(.section-header h1, .section-header h2, .about-hero .page-title) {
font-size:2rem; font-weight:500; line-height:1.6; letter-spacing:.025em; text-align:center;}
@media(max-width:768px) {
.site-page :is(.section-header h1, .section-header h2, .about-hero .page-title) {
font-size:1.5rem; line-height:1.6; letter-spacing:.025em;}
 }
body.site-page :is(.btn-primary,.btn-buy-primary,.btn-cta-primary,.btn-cta-outline) {
background:var(--btn-dark); color:var(--bg-body); border:1.5px solid var(--btn-dark); box-shadow:none; transform:none;
 transition:background-color .25s ease,border-color .25s ease;}
body.site-page :is(.btn-primary,.btn-buy-primary,.btn-cta-primary,.btn-cta-outline):hover {
background:var(--btn-dark-hover); color:var(--bg-body); border-color:var(--btn-dark-hover); box-shadow:none; transform:none;}
body.site-page :is(.btn-primary,.btn-buy-primary,.btn-cta-primary,.btn-cta-outline):focus-visible {
outline:2px solid var(--primary-color); outline-offset:4px;}


.site-page .course-return-link { display:inline-block; margin:0 0 1.25rem; padding:.4rem 0; color:var(--text-muted); font-size:.85rem; text-decoration:underline; text-underline-offset:5px;}
.site-page .course-overview { display:grid; grid-template-columns:1.2fr 1fr; gap:3.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border-light);}
.site-page .course-overview h2 { font-size:1.35rem; font-weight:500;}
.site-page .course-overview .course-detail-desc { margin: .75rem 0 0;}
.site-page .course-overview .course-highlights-grid { margin-top:1.25rem;}
.site-page .course-overview .course-quick-notice { margin:0; padding:0; border:0;}
@media(max-width:768px) { .site-page .course-overview { grid-template-columns:1fr; gap:1.5rem; margin-top:2rem; padding-top:1.5rem;} }

.site-page .about-features { border:0;}
.site-page .about-features .feature-card,
.site-page .about-features .feature-card:hover { border:0;}
.site-page .about-features .feature-card h4::after { display:none;}
.site-page .about-features .feature-card h4 { padding-bottom:0;}

.site-page .about-hero .hero-quote {
  font-style:italic;
  color:var(--text-muted);
  font-size:1.05rem;
  line-height:1.9;
  letter-spacing:.04em;}
@media(max-width:768px) { .site-page .about-hero .hero-quote { font-size:.95rem;} }

/* 2026-10-15: retain the existing visual style; refine text flow and narrow layouts. */
.site-page .product-grid > *,
.site-page .product-grid .product-link,
.site-page .product-detail-layout > *,
.site-page .product-detail-content,
.site-page .product-gallery { min-width:0; max-width:100%;}
.site-page .product-detail-title { text-wrap:balance; overflow-wrap:anywhere;}
.site-page .keep-phrase { display:inline-block;}
.site-page .about-cta h3 { text-wrap:balance;}
.site-page .course-grid .course-title { text-wrap:balance; line-height:1.55;}
.site-page .course-grid .course-card-meta { display:grid; grid-template-columns:1fr; gap:.35rem; margin:.5rem 0 1rem; line-height:1.7;}
.site-page .course-grid .course-desc { margin:0 0 1.5rem; line-height:1.9;}
.site-page .product-detail-content #detail-stock { font-family:var(--font-sans); color:var(--text-muted); font-size:.875rem; margin:0 0 1.1rem;}
.site-page .product-detail-content .product-detail-price { margin-bottom:.75rem;}
@media(max-width:768px) {
  .site-page .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .site-page .product-grid .product-title { white-space:normal; overflow-wrap:anywhere; line-height:1.6; min-height:3.2em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
  .site-page .product-detail-layout { grid-template-columns:minmax(0,1fr); gap:1.65rem;}
  .site-page .product-detail-img-box { height:auto; max-height:none; aspect-ratio:auto;}
  .site-page .product-detail-img-box img { height:auto; max-height:none; object-fit:contain;}
  .site-page .product-gallery { gap:.75rem;}
  .site-page .product-detail-title { font-size:1.5rem; line-height:1.55; letter-spacing:.025em; margin:0 0 .85rem;}
  .site-page .product-detail-categories { gap:.4rem; margin-bottom:1rem;}
  .site-page .product-detail-content .product-detail-price { font-size:1.4rem; margin-bottom:.5rem;}
  .site-page .product-detail-content .product-options-box { margin-top:0; padding-top:1rem; padding-bottom:1rem; margin-bottom:1.25rem;}
  .site-page .product-detail-content .custom-select { width:100%; max-width:100%; min-width:0;}
  .site-page .course-grid .course-title { font-size:1.15rem; margin-bottom:.75rem;}
  .site-page .course-grid .course-desc { font-size:.92rem;}
}
.site-page .product-grid .product-title { font-size:1.05rem !important; line-height:1.45; margin-bottom:0 !important;}
.site-page .product-subtitle { font-family:var(--font-sans); font-size:.78rem; line-height:1.5; color:var(--text-muted); margin:.1rem 0 .7rem; overflow-wrap:anywhere;}
.site-page .product-detail-subtitle { font-family:var(--font-sans); font-size:1rem; line-height:1.75; color:var(--text-muted); margin:0 0 1rem;}
.site-page .product-detail-subtitle[hidden] { display:none;}
.site-page .product-detail-content:has(.product-detail-subtitle:not([hidden])) .product-detail-title { margin-bottom:.35rem;}
.site-page .home-product h3 { font-size:1.05rem; line-height:1.45; margin-bottom:0;}
.site-page .home-product .home-product-subtitle { font-family:var(--font-sans); font-size:.78rem; color:var(--text-muted); white-space:normal; min-height:0; line-height:1.5; margin:.1rem 0 0;}
@media(max-width:768px) {
  .site-page .product-grid .product-title { min-height:0; font-weight:500 !important; line-height:1.45;}
  .site-page .product-subtitle { margin-top:.1rem; font-size:.78rem;}
  .site-page .product-detail-subtitle { font-size:.92rem; margin-bottom:.9rem;}
}

/* Shared photo corners; logo and icon artwork retain their own shape. */
.site-page { --photo-radius:8px;}
.site-page .product-detail-desc { white-space:pre-line; overflow-wrap:anywhere;}
.site-page img[src*="images/products/"],
.site-page img[src*="images/home/"],
.site-page img[src*="images/guides/"],
.site-page .timeline-img,
.site-page .home-intro-image,
.site-page #detail-main-img,
.site-page #lightbox-img { border-radius:var(--photo-radius);}
.site-page .home-slideshow,
.site-page .home-slideshow-images,
.site-page .home-product-image,
.site-page .product-img-box,
.site-page .product-detail-img-box,
.site-page .course-img-box,
.site-page .course-detail-img-box,
.site-page .other-course-img-box,
.site-page .timeline-img-box,
.site-page .thumb-item,
.site-page .cart-item-img,
.site-page .search-result-img { border-radius:var(--photo-radius); overflow:hidden;}

/* Vending information is a secondary note beneath store hours. */
.site-page .contact-social-links .btn-primary { background:var(--btn-dark); color:var(--bg-body); border:1px solid var(--btn-dark); box-shadow:none;}
.site-page .contact-social-links .btn-primary:hover { background:var(--btn-dark-hover); border-color:var(--btn-dark-hover);}
.site-page .store-route-link { display:inline-block; margin-top:.75rem; font-size:.92rem; color:var(--text-main); text-decoration:underline; text-underline-offset:4px;}
.site-page .store-vending { margin-top:1rem; scroll-margin-top:140px; color:var(--text-muted);}
.site-page .store-vending .vending-title { font-size:.92rem; margin:0 0 .4rem; color:#555;}
.site-page .store-vending .vending-summary { font-size:.78rem; line-height:1.8; margin:0;}
.site-page #store-map { scroll-margin-top:140px;}
.site-page .footer-route-link,
.site-page .footer-route-link:visited { color:inherit; text-decoration:underline; text-underline-offset:4px;}
.site-page .footer-route-link:hover,
.site-page .footer-route-link:focus-visible { color:inherit;}
@media(max-width:768px) {
  .site-page .store-vending,.site-page #store-map { scroll-margin-top:90px;}
  .site-page .store-vending .vending-summary { font-size:.8rem;}
}