/* Shared public-site chrome. Namespaced to coexist with legacy Bootstrap. */
.pg-header,
.pg-footer {
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}
.pg-header *,
.pg-footer * {
    box-sizing: border-box;
}
.pg-header {
    position: relative;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.pg-header-inner {
    max-width: 1320px;
    padding: 18px 24px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.pg-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #0f172a;
    flex-shrink: 0;
}
.pg-brand img {
    width: 150px;
    height: 49px;
    object-fit: contain;
}
.pg-brand > span {
    padding-left: 16px;
    border-left: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 700;
}
.pg-brand small {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
}
.pg-desktop-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.pg-header nav a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    font-size: 16px;
    color: #334155;
}
.pg-header nav a:hover,
.pg-header nav a[aria-current] {
    background: #e0f2fe;
    color: #0369a1;
}
.pg-header nav .pg-rose {
    color: #be123c;
}
.pg-header nav .pg-green {
    color: #047857;
}
.pg-header nav .pg-amber {
    color: #b45309;
}
.pg-account {
    color: #fff !important;
    background: linear-gradient(110deg, #4f46e5, #9333ea);
    padding: 10px 16px;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 700;
    text-decoration: none !important;
}
.pg-mobile-menu {
    display: none;
}
.pg-home-search {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.pg-home-search input {
    flex: 1 1 200px;
}
.pg-home-search input,
.pg-home-search select,
.pg-home-search button {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
}
.pg-home-search button {
    background: #0284c7;
    color: #fff;
}
.pg-header a:focus-visible,
.pg-header summary:focus-visible,
.pg-footer a:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}
.pg-footer {
    background: #0f172a;
    color: #e2e8f0;
    margin-top: 48px;
    padding: 48px 24px 24px;
}
.pg-footer a {
    color: #e2e8f0;
    text-decoration: none;
}
.pg-footer a:hover {
    color: #fcd34d;
    text-decoration: underline;
}
.pg-footer-inner {
    max-width: 1240px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.2fr 0.7fr 1fr;
    gap: 48px;
}
.pg-footer h2 {
    color: #fff;
    font-size: 18px;
    margin: 0 0 16px;
    font-weight: 700;
}
.pg-footer p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.75;
    color: #cbd5e1;
}
.pg-footer-brand strong {
    font-size: 24px;
    color: #fff;
}
.pg-footer-brand strong span {
    color: #f59e0b;
}
.pg-footer-brand p {
    margin-top: 12px;
}
.pg-footer .pg-footer-passport {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    background: #f59e0b;
    color: #0f172a;
    font-weight: 700;
}
.pg-footer-inner nav a {
    display: block;
    width: fit-content;
    padding: 5px 0;
}
.pg-footer-bottom {
    max-width: 1240px;
    margin: 30px auto 0;
    border-top: 1px solid #334155;
    padding-top: 24px;
}
.pg-footer-bottom nav {
    display: flex;
    gap: 12px 24px;
    flex-wrap: wrap;
}
.portal-themed {
    background: #f1f5f9;
    color: #1e293b;
    padding-top: 0 !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
.portal-themed .bannerSec.banner-inner {
    margin: 24px auto 0;
    width: calc(100% - 48px);
    max-width: 1240px;
    min-height: 220px;
    height: auto;
    padding: 40px 24px;
    border-radius: 24px;
    overflow: hidden;
}
.portal-themed:not(.portal-activity-detail) .bannerSec.banner-inner {
    background: linear-gradient(120deg, #0c4a6e, #0284c7, #059669) !important;
}
.portal-themed:not(.portal-activity-detail) .bannerSec .overlay {
    display: none;
}
.portal-themed .bannerSec :is(h1, h3, a, .breadcrumb-item) {
    color: #fff;
    position: relative;
}
.portal-themed .bannerSec h1 {
    font-size: 36px;
    line-height: 1.4;
    margin: 8px 0 16px;
}
.portal-themed .bannerSec h3 {
    font-size: 16px;
    letter-spacing: 2px;
}
.portal-themed .breadcrumb {
    margin: 0;
    background: transparent;
    flex-wrap: wrap;
}
.portal-themed .breadcrumb.solo {
    padding: 24px 0;
}
.portal-themed :is(.pd-top-120, .pd-top-100) {
    padding-top: 48px;
}
.portal-themed :is(.pd-bottom-100, .pd-bottom-120) {
    padding-bottom: 48px;
}
.portal-themed
    :is(.bill-payment-wrap, .single-blog-inner, .single-product-wrap) {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 4px 16px #0f172a06;
}
.portal-themed
    :is(input.form-control, select.form-control, textarea.form-control) {
    border-radius: 12px;
    border-color: #cbd5e1;
    min-height: 46px;
}
.portal-themed .btn {
    border-radius: 12px;
}
.portal-themed .btn-secondary {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}
.portal-themed .btn-base {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
}
.portal-themed :is(h1, h2, h3, h4, h5) {
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
.portal-themed .contact-area .title {
    background: #e0f2fe;
    color: #0c4a6e;
    border-radius: 12px;
}
.portal-themed .single-input-wrap input {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
}
.portal-themed .section-title .sub-title {
    color: #0284c7;
}
.portal-themed .product-nav .nav-link.active {
    background: #0284c7;
    color: #fff;
}
.portal-themed .page-item.active .page-link {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}
.portal-themed .contact-area .nav-link.active {
    background: #4f46e5;
    color: #fff;
}
@media (max-width: 1199px) {
    .pg-brand > span {
        display: none;
    }
    .pg-header-inner {
        gap: 12px;
    }
}
@media (max-width: 991px) {
    .pg-desktop-nav {
        display: none;
    }
    .pg-account {
        margin-left: auto;
    }
    .pg-mobile-menu {
        display: block;
    }
    .pg-mobile-menu summary {
        list-style: none;
        cursor: pointer;
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        color: #0f172a;
        background: #f8fafc;
        white-space: nowrap;
    }
    .pg-mobile-menu summary::-webkit-details-marker {
        display: none;
    }
    .pg-mobile-menu nav {
        position: absolute;
        left: 16px;
        right: 16px;
        top: calc(100% - 1px);
        background: #fff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 12px 24px #0f172a22;
        padding: 12px;
        border-radius: 0 0 18px 18px;
        max-height: 75vh;
        overflow: auto;
    }
    .pg-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .pg-footer-brand {
        grid-column: 1/-1;
    }
}
@media (max-width: 768px) {
    .pg-header-inner {
        padding: 12px 16px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .pg-brand img {
        width: 106px;
        height: 36px;
    }
    .pg-account,
    .pg-mobile-menu summary {
        padding: 8px 10px;
        font-size: 16px;
    }
    .pg-footer {
        padding: 32px 20px calc(110px + env(safe-area-inset-bottom));
    }
    .pg-footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .portal-themed .bannerSec.banner-inner {
        width: calc(100% - 32px);
        min-height: 160px;
        margin-top: 16px;
        padding: 24px 16px;
        border-radius: 18px;
    }
    .portal-themed .bannerSec h1 {
        font-size: 28px;
    }
    .portal-themed :is(.pd-top-120, .pd-top-100, .pd-top-80, .pd-top-60) {
        padding-top: 28px;
    }
    .portal-themed
        :is(
            p,
            label,
            input,
            select,
            textarea,
            .form-control,
            .btn,
            .nav-link,
            .breadcrumb-item,
            .nice-select,
            .nice-select .option
        ) {
        font-size: 16px;
        line-height: 1.65;
    }
    .portal-themed :is(h2, h3, h4, h5) {
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .portal-themed .contact-area .nav.px-5 {
        padding-inline: 0 !important;
    }
    .portal-themed .bill-payment-wrap {
        padding: 24px 16px;
    }
    .portal-themed .breadcrumb.solo {
        padding: 20px 0;
    }
    .portal-themed .pg-footer {
        padding-bottom: 32px;
    }
}
@media print {
    .pg-header,
    .pg-footer {
        display: none;
    }
}

/* Public navigation and offer pages, shared by desktop and PWA. */
.pg-header-inner { gap: 12px; flex-wrap: nowrap; }
.pg-brand > span { display: none; }
.pg-header nav a { font-size: 14px; padding: 12px 9px; }
.pg-header nav .pg-purple { color: #9333ea; }
.pg-header nav .pg-nav-icon { width: 1.25em; margin-right: 6px; text-align: center; }
.pg-announcements { display: flex; align-items: center; gap: 12px; padding: 7px 24px; background: linear-gradient(100deg,#104b69,#303079,#075442); color: #fff; font-size: 12px; }
.pg-announcement-label { flex-shrink: 0; background: #fbbf24; color: #172337; border-radius: 20px; padding: 2px 10px; }
.pg-marquee { flex: 1; min-width: 0; overflow: hidden; }
.pg-marquee-track { width: max-content; display: flex; gap: 48px; animation: pg-ticker 38s linear infinite; }
.pg-marquee a,.pg-hotline a { color: #fff; text-decoration: none; }
.pg-marquee:hover .pg-marquee-track,.pg-marquee:focus-within .pg-marquee-track { animation-play-state: paused; }
.pg-announcement-list summary { cursor: pointer; white-space: nowrap; }
.pg-announcement-list > div { position: absolute; top: 42px; right: 20px; width: min(540px,calc(100vw - 40px)); padding: 16px; background: #fff; box-shadow: 0 12px 30px #0f172a33; border-radius: 12px; z-index: 50; }
.pg-announcement-list a { display: block; color: #24354d; padding: 10px; border-bottom: 1px solid #edf2f7; overflow-wrap: anywhere; }
.pg-announcement-list p { color: #24354d; }
.pg-hotline { white-space: nowrap; }
@keyframes pg-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.browse-breadcrumb { font-size: 13px; color: #64748b; padding: 4px 0 24px; }
.browse-breadcrumb + .section-title h1 { font-size: clamp(26px,4vw,36px); line-height: 1.4; margin: 8px 0 16px; }
.offer-filter-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 30px; padding: 20px; background: #fff; border: 1px solid #e6edf5; border-radius: 20px; box-shadow: 0 3px 6px #0f172a0b; }
.offer-category-tabs { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.offer-category-tabs button { border: 0; border-radius: 15px; background: #f0f5fc; color: #34455f; padding: 10px 15px; font-size: 14px; line-height: 1.35; font-weight: 700; white-space: nowrap; cursor: pointer; }
.offer-category-tabs button[aria-pressed="true"] { background: #d97706; color: #fff; }
.offer-category-tabs button small { color: #8493aa; font-size: 12px; font-weight: 500; }
.offer-category-tabs button[aria-pressed="true"] small { color: #fff; }
.offer-category-tabs button:focus-visible { outline: 2px solid #1e40af; outline-offset: 3px; }
.offer-filter-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.offer-filter-tools .offer-search { display: block; width: clamp(220px,26vw,360px); margin: 0; }
.offer-filter-tools .offer-search input { width: 100%; margin: 0; border: 1px solid #d8e3f4; border-radius: 15px; background: #f9fbff; padding: 10px 14px; font-size: 14px; }
.offer-result-count { border-radius: 15px; background: #f0f5fc; color: #52647a; padding: 10px 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.offer-result-count strong { color: #c76b0a; }
.merchant-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.merchant-card { background: #fff; border: 1px solid #e6edf5; border-radius: 26px; overflow: hidden; box-shadow: 0 3px 5px #0f172a07; display: flex; flex-direction: column; min-width: 0; }
.merchant-photo { position: relative; aspect-ratio: 1.4; background: linear-gradient(145deg,#ccece6,#e6eee8); overflow: hidden; }
.merchant-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; }
.merchant-placeholder { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #365b55; font-weight: 800; font-size: 25px; }
.merchant-placeholder small { font-size: 9px; letter-spacing: 2px; }
.merchant-category,.merchant-discount { position: absolute; left: 12px; border-radius: 18px; padding: 4px 12px; font-size: 12px; font-weight: 800; }
.merchant-category { top: 12px; background: #ed385e; color: white; }
.merchant-discount { bottom: 12px; background: #172033e8; color: #fcd34d; }
.offer-content { padding: 20px 20px 10px; min-width: 0; flex: 1; }
.offer-content h2 { font-size: 17px; line-height: 1.6; margin: 0 0 5px; overflow-wrap: anywhere; }
.merchant-name { color: #7890a9; font-size: 12px; margin: 0 0 6px; }
.merchant-description { font-size: 13px; color: #71839a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.merchant-offer-cost { display: block; margin-top: 8px; color: #9a3412; font-size: 15px; line-height: 1.5; }
.offer-terms { font-size: 12px; color: #52647a; margin-top: 10px; }
.offer-terms summary { cursor: pointer; font-weight: 700; }
.offer-terms p { white-space: pre-line; overflow-wrap: anywhere; }
.offer-action { padding: 12px 20px 20px; }
.offer-action button,.offer-action .button { background: #f59e00; color: #172337; border-radius: 13px; font-size: 13px; padding: 10px 14px; border: 0; font-weight: 800; text-align: center; }
.merchant-card .offer-action > * { width: 100%; display: block; }
.merchant-actions { margin: 0 20px 20px; padding-top: 12px; border-top: 1px solid #edf2f7; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.merchant-actions .offer-action { padding: 0; }
.merchant-actions .offer-terms { margin: 0; }
.merchant-actions summary { list-style: none; background: #f1f5f9; border-radius: 13px; padding: 11px 6px; text-align: center; }
.merchant-actions summary::-webkit-details-marker { display: none; }
.offer-action button:disabled { background: #e2e8f0; color: #64748b; cursor: default; }
.reward-banner { background: linear-gradient(110deg,#f3a000,#ff7315 45%,#f73568); color: white; padding: 32px; border-radius: 25px; box-shadow: 0 8px 14px #0f172a15; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.reward-banner h1 { font-size: clamp(23px,3vw,32px); line-height: 1.5; margin: 8px 0 0; color: white; }
.reward-banner p { margin: 0; font-size: 14px; }
.reward-banner .pill { color: white; background: #ffffff33; }
.reward-balance { flex-shrink: 0; border: 1px solid #ffffff55; border-radius: 18px; padding: 16px 24px; text-align: center; }
.reward-balance span { display: block; font-size: 12px; }
.reward-balance strong { font-size: 27px; color: #fff9ab; }
.reward-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.reward-item { display: flex; align-items: center; background: #fff; border: 1px solid #dce5ef; border-radius: 18px; padding: 20px; min-width: 0; gap: 12px; }
.reward-icon { padding: 12px; background: #fff8e8; border-radius: 16px; font-size: 23px; }
.reward-item .offer-content { padding: 0; }
.reward-item .offer-content h2 { font-size: 14px; line-height: 1.5; }
.reward-item .offer-action { padding: 0; flex-shrink: 0; }
.reward-cost { color: #d97706; font-size: 13px; }
.merchant-grid [hidden],.reward-grid [hidden] { display: none; }
@media(min-width: 992px) and (max-width: 1199px) { .pg-header-inner { flex-wrap: wrap; } .pg-desktop-nav { order: 3; width: 100%; justify-content: center; } .pg-account { margin-left: auto; } }
@media(max-width: 1100px) { .merchant-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .reward-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 1100px) { .offer-filter-panel { align-items: stretch; flex-direction: column; } .offer-filter-tools .offer-search { flex: 1; width: auto; } }
@media(max-width: 767px) { .pg-hotline { display: none; } .pg-announcements { padding: 7px 12px; gap: 8px; } .merchant-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .reward-grid { grid-template-columns: 1fr; } .reward-banner { padding: 24px; align-items: flex-start; flex-direction: column; } .reward-balance { align-self: stretch; padding: 10px; } .pg-header-inner { gap: 8px; flex-wrap: wrap; } }
@media(max-width: 480px) { .offer-filter-panel { padding: 15px; } .offer-category-tabs button { padding: 9px 11px; font-size: 13px; } .offer-category-tabs button small { display: none; } .offer-filter-tools { flex-wrap: wrap; } .offer-filter-tools .offer-search { flex-basis: 100%; } }
@media(max-width: 480px) { .merchant-grid { grid-template-columns: 1fr; } .reward-item { padding: 16px; gap: 10px; flex-wrap: wrap; } .reward-item .offer-content { flex-basis: 140px; } .reward-item .offer-action { margin-left: auto; } }
@media(prefers-reduced-motion: reduce) { .pg-marquee-track { animation: none; } .pg-marquee { overflow: auto; } }

/* Keep all shared header text at the requested size across breakpoints. */
.pg-header,
.pg-header * {
    font-size: 12pt !important;
}

/* Shared, independently editable banners for the six public sections. */
.pg-page-banner {
    box-sizing: border-box;
    font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 24px;
    min-height: 220px;
    padding: 36px 24px;
    margin: 10px 0 16px;
    background: linear-gradient(120deg, #0c4a6e, #0079ae, #008568);
    color: #fff;
    text-align: center;
}
.portal-themed > .pg-page-banner { margin-inline: 24px; }
.portal-themed > .pg-page-breadcrumb { margin-inline: 24px; }
.pg-page-banner-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.pg-page-banner.pg-page-banner-with-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 27, 43, .62);
    z-index: -1;
}
.pg-page-banner .pg-page-banner-content { overflow-wrap: anywhere; font-size: 18px; line-height: 1.8; }
.pg-page-banner .pg-page-banner-content :is(h1, h2, h3, h4, p, a) { color: inherit; }
.pg-page-banner .pg-page-banner-content h1 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; line-height: 1.4; margin: 10px 0 18px; }
.pg-page-banner .pg-page-banner-content h3 { font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: 1.5px; margin: 0; }
.pg-page-breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0 0 1rem; padding: 0; text-align: left; font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; }
.pg-page-breadcrumb > a,
.pg-page-breadcrumb > span { margin: 0; padding: 0; font-size: 16px; line-height: 1.7; color: #334155; overflow-wrap: anywhere; }
.pg-page-breadcrumb > a { color: #075985; text-decoration: underline; text-underline-offset: 4px; }
.pg-page-breadcrumb a:focus-visible { outline: 2px solid #075985; outline-offset: 4px; }
.pg-readable-page { font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; font-size: 16px; line-height: 1.75; color: #243449; }
.pg-readable-page :is(main#content, .local-stores, .populer-area) :is(p, label, input, select, button, .button, summary, li, small) { font-size: 16px; line-height: 1.7; }
.pg-readable-page :is(.merchant-description, .merchant-name, .local-heading p, .local-count, .local-tools label, .local-card p, .calendar-event, .calendar-month, .pill, .eyebrow) { font-size: 16px; line-height: 1.7; }
.pg-readable-page :is(.merchant-description, .local-heading p, .local-count, .local-tools label) { color: #475569; }
.pg-readable-page :is(.merchant-card h2, .set-card h3, .local-card h3) { font-size: 22px; line-height: 1.5; }
#shop .merchant-card h2 { font-size: 22px; line-height: 1.5; }
#shop .merchant-card :is(.merchant-name, .merchant-description, .offer-terms, .offer-action button, .offer-action .button) { font-size: 16px; line-height: 1.7; }
@media (min-width: 769px) and (max-width: 991px) {
    .portal-themed > :is(.pg-page-banner, .pg-page-breadcrumb) { margin-inline: 28px; }
}
@media (max-width: 768px) {
    .portal-themed > :is(.pg-page-banner, .pg-page-breadcrumb) { margin-inline: 16px; }
}
@media (max-width: 600px) {
    .pg-page-banner { padding: 28px 18px; border-radius: 18px; }
}