/* 兌換中心介紹 — design-system polish over legacy .pagehtml. 750-space px.
   Loaded after css.css + page-redesign.css. */

#wrapper { background: var(--ds-bg); font-family: var(--ds-font); }
.newweb-head { height: 104px !important; min-height: 104px !important; box-shadow: none !important; }
.newweb-head .head-title { font-size: 32px; font-weight: 500; }

.index-banner {
    /* Legacy css.css fixes this at 750x320; with the 30px side margins that
       overflowed the canvas (banner poked out the right edge and made the
       page horizontally scrollable, which blocks vertical touch scrolling
       on iOS). Let it size to the margin box instead. */
    width: auto;
    height: auto;
    margin: 4px 30px 0;
    border-radius: 32px;
    background: var(--ds-bg-secondary);
    overflow: hidden;
    box-shadow: var(--ds-shadow-100);
}
#index-banner, #index-banner .swiper-wrapper { width: 100%; }
#index-banner .swiper-wrapper .swiper-slide { width: 100% !important; border-radius: 32px; overflow: hidden; }
#index-banner .swiper-wrapper .swiper-slide img { width: 100%; height: 286px; object-fit: cover; }
#index-banner .swiper-pagination-bullet { background: #fff; opacity: .65; }
#index-banner .swiper-pagination-bullet-active { width: 28px; border-radius: 8px; opacity: 1; }

/* content card */
.pagehtml {
    border-radius: 24px !important;
    box-shadow: var(--ds-shadow-card) !important;
    background: var(--ds-surface) !important;
    margin: 22px 30px 0 !important;
    padding: 36px !important;
    line-height: normal !important;
}

/* section headings (bold divs) get a blue accent bar */
.pagehtml > .font-bold {
    position: relative; color: var(--ds-text) !important; font-size: 30px !important;
    font-weight: 600; padding-left: 26px; margin-top: 40px;
}
.pagehtml > .font-bold:first-child { margin-top: 0; }
.pagehtml > .font-bold::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 8px;
    border-radius: 4px; background: var(--ds-primary);
}

/* intro text */
#js-title { color: var(--ds-text); font-size: 34px; }
#js-info { color: var(--ds-text-tertiary) !important; font-size: 26px !important; line-height: 40px !important; }

/* contact rows */
.pagehtml .flex-heng-center { align-items: center; margin-top: 18px !important; }
.pagehtml .flex-heng-center img { width: 40px; height: 40px; margin-right: 18px !important; flex: 0 0 40px; }
.pagehtml .flex-heng-center .color--orange { color: var(--ds-primary) !important; font-size: 26px !important; font-weight: 600; line-height: 38px; }
/* tel:/map 連結沿用原有外觀（client feedback 2026-08 p.7 一按即通／開地圖）*/
.pagehtml #js-tel a,
.pagehtml #js-address a { color: inherit; text-decoration: none; }
.pagehtml #js-time { color: var(--ds-text-tertiary) !important; font-size: 26px !important; line-height: 38px; }

/* on-site photo grid */
.imglist { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px !important; }
.imglist img { width: 100%; height: 220px; object-fit: cover; border-radius: 18px; display: block; }