/* ===================================================================
   MyPickDiary (選物日寄) brand theme overlay
   Loaded LAST (after style.css + inline overrides in css.blade.php)
   so it wins the cascade without needing !important almost anywhere.
   Do not delete zapolo/style.css — this file only re-skins colors,
   type, radius and a handful of components on top of it.
=================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
    /* brand palette */
    --mpd-cream:        #FBF3E7;
    --mpd-cream-deep:   #F4E7D3;
    --mpd-white:        #FFFFFF;
    --mpd-ink:          #3D3229;   /* headings / dark text */
    --mpd-body:         #6B5D52;   /* muted body text */
    --mpd-line:         rgba(61,50,41,.10);

    --mpd-primary:      #C1875A;   /* caramel brown — CTA */
    --mpd-primary-dark: #A66F45;
    --mpd-primary-light:#F2E3D3;

    --mpd-blue:         #4A90C4;   /* logo blue */
    --mpd-gold:         #E8A93E;   /* logo gold */
    --mpd-terracotta:   #D9773F;

    --mpd-footer-bg:    #40301F;
    --mpd-footer-bg-2:  #332617;

    --mpd-radius-lg: 28px;
    --mpd-radius-md: 18px;
    --mpd-radius-sm: 12px;
    --mpd-shadow-sm: 0 10px 24px rgba(61,50,41,.08);
    --mpd-shadow-md: 0 16px 40px rgba(61,50,41,.10);
    --mpd-shadow-lg: 0 26px 60px rgba(61,50,41,.14);

    --mpd-font-latin: 'Baloo 2', 'Quicksand', sans-serif;
    --mpd-font-zh:    'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;

    /* --- re-point the zapolo template's own variables at our palette ---
       most .btn-primary / badges / links / hovers read these already,
       so this alone re-colors a large share of the site safely. */
    --primary: var(--mpd-primary);
    --primary-hover: var(--mpd-primary-dark);
    --primary-dark: var(--mpd-primary-dark);
    --secondary: var(--mpd-blue);
    --rgba-primary-1: rgba(193,135,90,.1);
    --rgba-primary-2: rgba(193,135,90,.2);
    --rgba-primary-3: rgba(193,135,90,.3);
    --rgba-primary-4: rgba(193,135,90,.4);
    --rgba-primary-5: rgba(193,135,90,.5);
    --rgba-primary-6: rgba(193,135,90,.6);
    --rgba-primary-7: rgba(193,135,90,.7);
    --rgba-primary-8: rgba(193,135,90,.8);
    --rgba-primary-9: rgba(193,135,90,.9);
    --gradient: linear-gradient(135deg, #C1875A 0%, #D9A066 100%);
    --gradient-sec: linear-gradient(135deg, #4A90C4 0%, #6BAFD9 100%);
    --title: var(--mpd-ink);
    --font-family-base: var(--mpd-font-zh);
    --font-family-title: var(--mpd-font-latin), var(--mpd-font-zh);
    --border-radius-base: 14px;
}

/* ---------- 2. Base ---------- */
html, body{
    background: var(--mpd-cream);
    overflow-x: hidden;
}
body{
    color: var(--mpd-body);
    font-family: var(--mpd-font-zh);
}
h1,h2,h3,h4,h5,h6,
.title, .widget-title, .footer-title, .modal-title{
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    color: var(--mpd-ink);
    font-weight: 700;
}
a{ color: var(--mpd-primary); }
a:hover{ color: var(--mpd-primary-dark); }

::selection{ background: var(--mpd-primary-light); color: var(--mpd-ink); }

.page-content{ background: var(--mpd-cream) !important; }
.bg-white{ background: var(--mpd-cream) !important; }

/* ---------- 3. Buttons ---------- */
.btn{
    border-radius: 999px;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    font-weight: 700;
    letter-spacing: .01em;
}
.btn-primary, .wp-block-button__link{
    background: var(--mpd-primary) !important;
    border-color: var(--mpd-primary) !important;
    box-shadow: 0 14px 30px rgba(193,135,90,.28);
}
.btn-primary:hover, .wp-block-button__link:hover{
    background: var(--mpd-primary-dark) !important;
    border-color: var(--mpd-primary-dark) !important;
}
.btn-white{
    background: var(--mpd-white) !important;
    color: var(--mpd-ink) !important;
    border-color: var(--mpd-line) !important;
}
.btn-white:hover{
    background: var(--mpd-primary-light) !important;
    color: var(--mpd-primary-dark) !important;
}
.btn-outline-primary{
    color: var(--mpd-primary) !important;
    border-color: var(--mpd-primary) !important;
}
.btn-outline-primary:hover{
    background: var(--mpd-primary) !important;
    color: #fff !important;
}

/* ---------- 4. Cards / panels generic polish ---------- */
.card, .form-control, .form-select, .input-group-text{
    border-radius: var(--mpd-radius-sm) !important;
}
.shadow, .shadow-secondary{
    box-shadow: var(--mpd-shadow-md) !important;
}

/* ---------- 5. Header (MyPickDiary custom, self-contained) ---------- */
/* The header no longer uses the zapolo .site-header skeleton, so none of the
   theme's header CSS/JS applies. Height is a fixed design constant — content
   clearance below is pure CSS (no JS measurement, no timing races). */
:root{ --mpd-header-h: 72px; }
@media (max-width: 991.98px){ :root{ --mpd-header-h: 60px; } }

.page-content{ padding-top: var(--mpd-header-h); }

.mpd-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--mpd-header-h);
    background: #ffffff;
    border-bottom: 1px solid rgba(61,50,41,.08);
}
.mpd-header-inner{
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}
.mpd-header-logo{ flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; }
.mpd-header-logo .mpd-logo-image{ width:auto; height:58px; }

/* --- desktop nav --- */
.mpd-nav{ flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.mpd-nav-list{
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}
.mpd-nav-link{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: none; border: none; cursor: pointer;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    font-size: 14.5px; font-weight: 600;
    color: var(--mpd-ink);
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.mpd-nav-link:hover{ background: var(--mpd-primary-light); color: var(--mpd-primary-dark); }
.mpd-nav-link .fa-chevron-down{ font-size: 10px; opacity: .5; transition: transform .18s ease; }

.mpd-has-dropdown{ position: relative; }
/* invisible hover bridge so the pointer can travel into the dropdown */
.mpd-has-dropdown::before{
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}
.mpd-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--mpd-line);
    border-radius: 16px;
    box-shadow: var(--mpd-shadow-lg);
    padding: 8px;
    list-style: none; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1001;
}
@media (min-width: 992px){
    .mpd-has-dropdown:hover > .mpd-dropdown{
        opacity: 1; visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .mpd-has-dropdown:hover > .mpd-nav-link .fa-chevron-down{ transform: rotate(180deg); }
}
.mpd-dropdown li{ list-style: none; }
.mpd-dropdown a{
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--mpd-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.mpd-dropdown a:hover{ background: var(--mpd-primary-light); color: var(--mpd-primary-dark); }

.mpd-dropdown-wide{ min-width: 240px; }
.mpd-dropdown-group{ padding: 4px 0; }
.mpd-dropdown-group + .mpd-dropdown-group{ border-top: 1px dashed var(--mpd-line); margin-top: 4px; padding-top: 8px; }
.mpd-dropdown-title{
    display: block;
    padding: 4px 12px 2px;
    font-size: 12px; font-weight: 800;
    color: var(--mpd-body);
    letter-spacing: .04em;
}

/* currency / language tools */
.mpd-nav-tool .mpd-nav-link{ font-size: 13px; color: var(--mpd-body); padding: 8px 10px; }
.mpd-nav-tool-first{ margin-left: 8px; padding-left: 12px; border-left: 1px solid rgba(61,50,41,.12); }
.mpd-flag{ width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }

/* --- right actions --- */
.mpd-header-actions{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mpd-line-btn{
    width: 38px; height: 38px; border-radius: 50%;
    background: #06C755; color: #fff !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px;
    box-shadow: 0 6px 16px rgba(6,199,85,.25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mpd-line-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(6,199,85,.32); }
.mpd-header-cta{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #C1875A 0%, #D9A066 100%);
    color: #fff !important;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    font-size: 14px; font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(193,135,90,.3);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mpd-header-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(193,135,90,.38); }
.mpd-header-cta i{ font-size: 11px; }

.mpd-burger{ display: none; }
.mpd-nav-line-mobile{ display: none; }

/* mid-size desktop: tighten so one row always fits */
@media (min-width: 992px) and (max-width: 1399.98px){
    .mpd-nav-link{ font-size: 13px; padding: 8px 9px; }
    .mpd-nav-tool .mpd-nav-link{ font-size: 12px; padding: 7px 8px; }
    .mpd-header-cta{ padding: 8px 14px; font-size: 13px; }
    .mpd-line-btn{ width: 34px; height: 34px; font-size: 17px; }
}

/* --- mobile --- */
@media (max-width: 991.98px){
    .mpd-header-inner{ gap: 10px; }

    .mpd-burger{
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        width: 40px; height: 40px;
        border: none; border-radius: 12px;
        background: var(--mpd-primary);
        cursor: pointer;
    }
    .mpd-burger span{
        display: block; width: 18px; height: 2px;
        background: #fff; border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }
    .mpd-header.mpd-nav-open .mpd-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
    .mpd-header.mpd-nav-open .mpd-burger span:nth-child(2){ opacity: 0; }
    .mpd-header.mpd-nav-open .mpd-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

    .mpd-line-btn{ width: 36px; height: 36px; font-size: 18px; }
    .mpd-header-cta{ padding: 8px 13px; font-size: 12.5px; }

    .mpd-nav{
        position: fixed;
        top: var(--mpd-header-h); left: 0; right: 0;
        max-height: calc(100vh - var(--mpd-header-h));
        overflow-y: auto;
        background: #fff;
        display: block;
        padding: 12px;
        border-bottom: 1px solid var(--mpd-line);
        box-shadow: 0 24px 40px rgba(61,50,41,.16);
        opacity: 0; visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .mpd-header.mpd-nav-open .mpd-nav{
        opacity: 1; visibility: visible; transform: none;
    }

    .mpd-nav-list{ display: block; }
    .mpd-nav-item{ display: block; }
    .mpd-nav-link{
        width: 100%;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 15px;
    }
    .mpd-has-dropdown::before{ display: none; }
    .mpd-has-dropdown.mpd-open > .mpd-nav-link{ background: var(--mpd-primary-light); color: var(--mpd-primary-dark); }
    .mpd-has-dropdown.mpd-open > .mpd-nav-link .fa-chevron-down{ transform: rotate(180deg); }

    .mpd-dropdown{
        display: none;
        position: static;
        transform: none;
        opacity: 1; visibility: visible;
        min-width: 0;
        background: var(--mpd-cream);
        border: none; box-shadow: none;
        border-radius: 12px;
        margin: 2px 6px 8px;
        transition: none;
    }
    .mpd-has-dropdown.mpd-open > .mpd-dropdown{ display: block; }
    .mpd-dropdown a{ white-space: normal; }

    .mpd-nav-tool-first{
        border-left: none;
        margin: 10px 0 0; padding: 10px 0 0;
        border-top: 1px dashed var(--mpd-line);
    }
    .mpd-nav-line-mobile{ display: block; margin-top: 6px; }
}

/* ---------- 6. Parcel-tracking modal — light card to match brand ---------- */
.tracking-modal .tracking-modal-content{
    background: var(--mpd-white) !important;
    border: 1px solid var(--mpd-line) !important;
    border-radius: var(--mpd-radius-lg) !important;
    box-shadow: var(--mpd-shadow-lg) !important;
}
.tracking-modal .tracking-modal-content:before{ display: none; }
.tracking-modal .tracking-modal-header{
    background: var(--mpd-cream) !important;
    border-bottom: 1px solid var(--mpd-line) !important;
}
.tracking-modal .tracking-modal-icon{
    background: var(--mpd-primary) !important;
    border: none !important;
    color: #fff !important;
}
.tracking-modal .modal-title{ color: var(--mpd-ink) !important; }
.tracking-modal .tracking-modal-subtitle{ color: var(--mpd-body) !important; }
.tracking-modal .tracking-btn-close{ filter: none !important; }
.tracking-modal .tracking-label{ color: var(--mpd-ink) !important; }
.tracking-modal .tracking-input-prefix{
    background: var(--mpd-cream) !important;
    border: 1px solid var(--mpd-line) !important;
    color: var(--mpd-primary-dark) !important;
}
.tracking-modal .tracking-input{
    background: var(--mpd-white) !important;
    border: 1px solid var(--mpd-line) !important;
    color: var(--mpd-ink) !important;
}
.tracking-modal .tracking-input::placeholder{ color: rgba(61,50,41,.4) !important; }
.tracking-modal .tracking-input:focus{
    background: var(--mpd-white) !important;
    border-color: var(--mpd-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(193,135,90,.15) !important;
    color: var(--mpd-ink) !important;
}
.tracking-modal .tracking-btn-outline{
    border-color: var(--mpd-line) !important;
    color: var(--mpd-body) !important;
}
.tracking-modal .tracking-btn-outline:hover{
    background: var(--mpd-cream) !important;
}
.tracking-modal .tracking-modal-hint{ color: var(--mpd-body) !important; }

/* ---------- 7. Footer ---------- */
.site-footer.style-2{
    background: var(--mpd-footer-bg) !important;
}
.site-footer .footer-title{ color: #fff !important; }
.site-footer .footer-title:after{ background: var(--mpd-gold) !important; }
.site-footer .widget_getintuch li,
.site-footer .widget_services ul li a,
.site-footer .copyright-text,
.site-footer p{
    color: rgba(255,255,255,.72) !important;
}
.site-footer .widget_services ul li a:hover,
.site-footer .footer-link li a:hover{
    color: var(--mpd-gold) !important;
}
.site-footer .widget_getintuch li i{ color: var(--mpd-gold) !important; }
.site-footer .footer-bottom{
    background: var(--mpd-footer-bg-2) !important;
    border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .footer-box{
    background: var(--mpd-primary);
    border-radius: var(--mpd-radius-lg);
    padding: 40px;
}
.site-footer .footer-box .title{ color: #fff !important; }

/* Official supplied logo lockup (ring, airplane and all brand text). */
.mpd-logo{ display:inline-flex; align-items:center; text-decoration:none; }
.mpd-logo-picture{ display:block; line-height:0; }
.mpd-logo-image{ display:block; width:auto; height:58px; object-fit:contain; flex-shrink:0; }
.mpd-logo-full .mpd-logo-image{ height:180px; }

/* ---------- 8. Generic section rhythm helpers for reskinned pages ---------- */
.mpd-section{ padding: 90px 0; }
.mpd-section-alt{ background: var(--mpd-cream-deep); }
.mpd-kicker{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 18px; border-radius: 999px;
    background: var(--mpd-primary-light); color: var(--mpd-primary-dark);
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 16px;
}
.mpd-card{
    background: var(--mpd-white);
    border: 1px solid var(--mpd-line);
    border-radius: var(--mpd-radius-lg);
    box-shadow: var(--mpd-shadow-sm);
}

@media (max-width: 767.98px){
    .mpd-section{ padding: 56px 0; }
}

/* very small phones: drop the LINE dot from the bar (the in-menu LINE row covers it) */
@media (max-width: 419.98px){
    .mpd-line-btn{ display: none; }
}

/* ---------- 5c. Mobile menu polish ---------- */
.mpd-nav-label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mpd-nav-ico{ display: none; }

@media (max-width: 991.98px){
    /* leading icon chips make rows scannable and warmer */
    .mpd-nav-ico{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px; height: 34px;
        border-radius: 10px;
        background: var(--mpd-primary-light);
        color: var(--mpd-primary-dark);
        font-size: 14px;
        flex: 0 0 auto;
    }
    .mpd-nav-label{ gap: 12px; }

    /* hide LINE dot in the bar on all mobile — the menu has a full LINE button */
    .mpd-line-btn{ display: none; }

    /* menu panel: card look with rounded bottom */
    .mpd-nav{
        padding: 14px 14px 18px;
        border-radius: 0 0 20px 20px;
    }

    /* full-width LINE button inside the menu */
    .mpd-line-row{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px 16px;
        border-radius: 999px;
        background: #06C755;
        color: #fff !important;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(6,199,85,.25);
    }
    .mpd-line-row i{ font-size: 19px; }

    /* dim page behind the open menu */
    .mpd-header.mpd-nav-open::after{
        content: "";
        position: fixed;
        left: 0; right: 0;
        top: var(--mpd-header-h);
        bottom: 0;
        background: rgba(61,50,41,.35);
        z-index: -1;
    }
}

/* ---------- 5d. Mobile bar refinements ---------- */
/* push the action cluster (and burger) hard right on every viewport */
.mpd-header-actions{ margin-left: auto; }

/* LINE text pill: hidden on desktop (round dot + CTA live there) */
.mpd-header-line-cta{ display: none; }

@media (max-width: 991.98px){
    /* mobile bar = logo … LINE 客服 pill + burger (burger outermost right) */
    .mpd-header-cta{ display: none; }
    .mpd-header-line-cta{
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #06C755;
        color: #fff !important;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(6,199,85,.25);
    }
    .mpd-header-line-cta i{ font-size: 16px; }
}

/* ---------- 5e. Mobile menu — feminine brand pass ---------- */
.mpd-nav-hello, .mpd-nav-tagline{ display: none; }

@media (max-width: 991.98px){
    /* soft blush-cream panel */
    .mpd-nav{
        background: linear-gradient(180deg, #FFFDFA 0%, #FBF3E7 100%);
        padding: 16px 16px 20px;
    }

    /* friendly greeting on top */
    .mpd-nav-hello{
        display: block;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: 15px;
        font-weight: 800;
        color: var(--mpd-ink);
        padding: 2px 6px 12px;
    }

    /* nav rows as soft white cards */
    .mpd-nav-link{
        background: #fff;
        border: 1px solid rgba(61,50,41,.07);
        box-shadow: 0 6px 16px rgba(61,50,41,.05);
        border-radius: 16px;
        margin-bottom: 9px;
        padding: 11px 14px;
    }
    .mpd-has-dropdown.mpd-open > .mpd-nav-link{
        background: var(--mpd-primary-light);
        border-color: rgba(193,135,90,.25);
    }
    .mpd-nav-link .fa-chevron-down{ color: var(--mpd-primary); opacity: .6; }

    /* pastel icon chips — one hue per row, like a stationery set */
    .mpd-nav-ico{ border-radius: 12px; }
    .mpd-nav-list > li:nth-child(1) .mpd-nav-ico{ background: #F9E3E6; color: #C4707F; } /* blush */
    .mpd-nav-list > li:nth-child(2) .mpd-nav-ico{ background: #FAEDD3; color: #BC8F3C; } /* butter */
    .mpd-nav-list > li:nth-child(3) .mpd-nav-ico{ background: #E3EFF8; color: #5B93BC; } /* sky */
    .mpd-nav-list > li:nth-child(4) .mpd-nav-ico{ background: #E7F0E4; color: #74975B; } /* sage */
    .mpd-nav-list > li:nth-child(5) .mpd-nav-ico{ background: #F0E7F5; color: #9979B4; } /* lilac */

    /* accordion panels: blush inset card */
    .mpd-dropdown{
        background: #FFF9F0;
        border: 1px dashed rgba(193,135,90,.3);
        margin: -3px 6px 10px;
    }

    /* currency + language: two cute chips side by side */
    .mpd-nav-list{ display: flex; flex-wrap: wrap; column-gap: 8px; }
    .mpd-nav-list > li{ width: 100%; }
    .mpd-nav-list > li.mpd-nav-tool{ width: calc(50% - 4px); }
    .mpd-nav-tool-first{
        border-top: none;
        margin-top: 6px; padding-top: 0;
    }
    .mpd-nav-tool .mpd-nav-link{
        background: rgba(255,255,255,.7);
        border: 1px solid rgba(61,50,41,.08);
        box-shadow: none;
        border-radius: 999px;
        font-size: 13px;
        padding: 10px 14px;
    }
    /* the tool dropdowns span the panel width for easier tapping */
    .mpd-nav-tool .mpd-dropdown{ margin: 0 0 8px; }

    /* keep the LINE button full width below the tools */
    .mpd-nav-line-mobile{ width: 100% !important; margin-top: 6px; }

    /* sweet sign-off */
    .mpd-nav-tagline{
        display: block;
        text-align: center;
        font-size: 12px;
        letter-spacing: .06em;
        color: var(--mpd-body);
        padding-top: 12px;
    }
}

/* ---------- 5f. Floral accents (feminine touch) ---------- */
@media (max-width: 991.98px){
    .mpd-nav{
        background-image:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><g opacity='0.85'><path d='M18 132 C 48 96 78 62 116 28' stroke='%23A8BE9B' stroke-width='3' fill='none' stroke-linecap='round'/><ellipse cx='50' cy='90' rx='16' ry='7' fill='%23C5D8B6' transform='rotate(-42 50 90)'/><ellipse cx='72' cy='66' rx='15' ry='6.5' fill='%23D3E2C6' transform='rotate(-46 72 66)'/><ellipse cx='94' cy='46' rx='13' ry='6' fill='%23C5D8B6' transform='rotate(-50 94 46)'/><g transform='translate(118,24)'><circle cx='0' cy='-9' r='5.5' fill='%23F3C7CE'/><circle cx='8.6' cy='-2.8' r='5.5' fill='%23F3C7CE'/><circle cx='5.3' cy='7.3' r='5.5' fill='%23F3C7CE'/><circle cx='-5.3' cy='7.3' r='5.5' fill='%23F3C7CE'/><circle cx='-8.6' cy='-2.8' r='5.5' fill='%23F3C7CE'/><circle r='4' fill='%23E8A93E'/></g></g></svg>") ,
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 110'><g opacity='0.8'><path d='M20 100 C 34 78 44 62 52 40' stroke='%23A8BE9B' stroke-width='2.5' fill='none' stroke-linecap='round'/><ellipse cx='34' cy='76' rx='13' ry='5.5' fill='%23C5D8B6' transform='rotate(-58 34 76)'/><ellipse cx='46' cy='54' rx='12' ry='5' fill='%23D3E2C6' transform='rotate(-64 46 54)'/><g transform='translate(54,32)'><circle cx='0' cy='-8' r='5' fill='%23F3C7CE'/><circle cx='7.6' cy='-2.5' r='5' fill='%23F3C7CE'/><circle cx='4.7' cy='6.5' r='5' fill='%23F3C7CE'/><circle cx='-4.7' cy='6.5' r='5' fill='%23F3C7CE'/><circle cx='-7.6' cy='-2.5' r='5' fill='%23F3C7CE'/><circle r='3.5' fill='%23E8A93E'/></g><g transform='translate(96,78)'><circle cx='0' cy='-7' r='4.2' fill='%23F6D9DD'/><circle cx='6.6' cy='-2.2' r='4.2' fill='%23F6D9DD'/><circle cx='4.1' cy='5.7' r='4.2' fill='%23F6D9DD'/><circle cx='-4.1' cy='5.7' r='4.2' fill='%23F6D9DD'/><circle cx='-6.6' cy='-2.2' r='4.2' fill='%23F6D9DD'/><circle r='3' fill='%23E8C9A0'/></g><circle cx='120' cy='40' r='3' fill='%23E8A93E' opacity='0.7'/><circle cx='134' cy='60' r='2.2' fill='%23F3C7CE'/></g></svg>"),
            linear-gradient(180deg, #FFFDFA 0%, #FBF3E7 100%);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: right -14px top -10px, left -12px bottom -8px, center;
        background-size: 120px auto, 130px auto, cover;
    }

    /* tiny blossom beside the greeting */
    .mpd-nav-hello::before{
        content: "🌸";
        margin-right: 6px;
    }
}

/* ---------- 5g. Header feminine touches + mobile size bump ---------- */
/* pastel ribbon along the bar's bottom edge (replaces the plain hairline) */
.mpd-header{
    border-bottom: none;
}
.mpd-header::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #F3C7CE 0%, #E8C9A0 25%, #C5D8B6 50%, #A9C7E8 75%, #F3C7CE 100%);
    opacity: .6;
    pointer-events: none;
}

/* delicate floral sprigs tucked into the bar corners (desktop) */
@media (min-width: 992px){
    .mpd-header{
        background-image:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'><g opacity='0.4'><path d='M12 84 C 32 62 50 42 74 20' stroke='%23A8BE9B' stroke-width='2.5' fill='none' stroke-linecap='round'/><ellipse cx='34' cy='60' rx='11' ry='5' fill='%23C5D8B6' transform='rotate(-44 34 60)'/><ellipse cx='52' cy='42' rx='10' ry='4.5' fill='%23D3E2C6' transform='rotate(-48 52 42)'/><g transform='translate(76,18)'><circle cx='0' cy='-6' r='4' fill='%23F3C7CE'/><circle cx='5.7' cy='-1.9' r='4' fill='%23F3C7CE'/><circle cx='3.5' cy='4.9' r='4' fill='%23F3C7CE'/><circle cx='-3.5' cy='4.9' r='4' fill='%23F3C7CE'/><circle cx='-5.7' cy='-1.9' r='4' fill='%23F3C7CE'/><circle r='2.8' fill='%23E8A93E'/></g></g></svg>"),
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'><g opacity='0.35'><g transform='translate(30,38)'><circle cx='0' cy='-8' r='5' fill='%23F6D9DD'/><circle cx='7.6' cy='-2.5' r='5' fill='%23F6D9DD'/><circle cx='4.7' cy='6.5' r='5' fill='%23F6D9DD'/><circle cx='-4.7' cy='6.5' r='5' fill='%23F6D9DD'/><circle cx='-7.6' cy='-2.5' r='5' fill='%23F6D9DD'/><circle r='3.5' fill='%23E8C9A0'/></g><circle cx='52' cy='20' r='2.5' fill='%23E8A93E' opacity='0.8'/><circle cx='58' cy='44' r='2' fill='%23A9C7E8'/></g></svg>"),
            #ffffff;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: right -6px bottom -18px, left 220px bottom -18px, center;
        background-size: 78px auto, 60px auto, cover;
    }
}

/* mobile: bigger, friendlier bar */
@media (max-width: 991.98px){
    :root{ --mpd-header-h: 68px; }

    .mpd-header-logo .mpd-logo-image{ width:auto; height:45px; }

    .mpd-header-line-cta{
        padding: 9px 16px;
        font-size: 13.5px;
    }
    .mpd-header-line-cta i{ font-size: 17px; }

    .mpd-burger{ width: 44px; height: 44px; border-radius: 13px; }
    .mpd-burger span{ width: 20px; }

    /* a tiny blossom keeps the bar from feeling utilitarian */
    .mpd-header{
        background-image:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g opacity='0.3'><g transform='translate(30,34)'><circle cx='0' cy='-7' r='4.5' fill='%23F6D9DD'/><circle cx='6.7' cy='-2.2' r='4.5' fill='%23F6D9DD'/><circle cx='4.1' cy='5.7' r='4.5' fill='%23F6D9DD'/><circle cx='-4.1' cy='5.7' r='4.5' fill='%23F6D9DD'/><circle cx='-6.7' cy='-2.2' r='4.5' fill='%23F6D9DD'/><circle r='3' fill='%23E8C9A0'/></g><circle cx='48' cy='16' r='2' fill='%23E8A93E' opacity='0.8'/></g></svg>"),
            #ffffff;
        background-repeat: no-repeat, no-repeat;
        background-position: right 104px bottom -14px, center;
        background-size: 52px auto, cover;
    }
}

/* ---------- 5h. More florals in the header ---------- */
@media (min-width: 992px){
    .mpd-header{
        background-image:
            /* right corner: fuller sage sprig + daisy */
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 90'><g opacity='0.7'><path d='M10 86 C 34 62 58 40 92 16' stroke='%23A8BE9B' stroke-width='2.5' fill='none' stroke-linecap='round'/><path d='M38 62 C 50 58 60 58 72 62' stroke='%23A8BE9B' stroke-width='2' fill='none' stroke-linecap='round'/><ellipse cx='30' cy='66' rx='12' ry='5' fill='%23C5D8B6' transform='rotate(-44 30 66)'/><ellipse cx='48' cy='48' rx='11' ry='5' fill='%23D3E2C6' transform='rotate(-48 48 48)'/><ellipse cx='64' cy='34' rx='10' ry='4.5' fill='%23C5D8B6' transform='rotate(-50 64 34)'/><ellipse cx='76' cy='60' rx='9' ry='4' fill='%23D3E2C6' transform='rotate(28 76 60)'/><g transform='translate(94,14)'><circle cx='0' cy='-6.5' r='4.4' fill='%23F3C7CE'/><circle cx='6.2' cy='-2' r='4.4' fill='%23F3C7CE'/><circle cx='3.8' cy='5.3' r='4.4' fill='%23F3C7CE'/><circle cx='-3.8' cy='5.3' r='4.4' fill='%23F3C7CE'/><circle cx='-6.2' cy='-2' r='4.4' fill='%23F3C7CE'/><circle r='3' fill='%23E8A93E'/></g><circle cx='84' cy='42' r='2.4' fill='%23E8A93E' opacity='0.8'/></g></svg>"),
            /* left of nav: blossom pair + bud */
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70'><g opacity='0.62'><path d='M14 66 C 22 52 30 42 40 30' stroke='%23A8BE9B' stroke-width='2' fill='none' stroke-linecap='round'/><ellipse cx='24' cy='52' rx='9' ry='4' fill='%23C5D8B6' transform='rotate(-52 24 52)'/><g transform='translate(44,26)'><circle cx='0' cy='-7' r='4.6' fill='%23F6D9DD'/><circle cx='6.7' cy='-2.2' r='4.6' fill='%23F6D9DD'/><circle cx='4.1' cy='5.7' r='4.6' fill='%23F6D9DD'/><circle cx='-4.1' cy='5.7' r='4.6' fill='%23F6D9DD'/><circle cx='-6.7' cy='-2.2' r='4.6' fill='%23F6D9DD'/><circle r='3.2' fill='%23E8C9A0'/></g><g transform='translate(70,48)'><circle cx='0' cy='-5' r='3.4' fill='%23F3C7CE'/><circle cx='4.8' cy='-1.5' r='3.4' fill='%23F3C7CE'/><circle cx='2.9' cy='4.1' r='3.4' fill='%23F3C7CE'/><circle cx='-2.9' cy='4.1' r='3.4' fill='%23F3C7CE'/><circle cx='-4.8' cy='-1.5' r='3.4' fill='%23F3C7CE'/><circle r='2.4' fill='%23E8A93E'/></g><circle cx='78' cy='20' r='2' fill='%23A9C7E8'/><circle cx='60' cy='12' r='1.8' fill='%23E8A93E' opacity='0.8'/></g></svg>"),
            /* center-right filler: scattered petals + dots */
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'><g opacity='0.55'><ellipse cx='20' cy='40' rx='7' ry='3.6' fill='%23F3C7CE' transform='rotate(-28 20 40)'/><ellipse cx='70' cy='20' rx='6' ry='3' fill='%23F6D9DD' transform='rotate(20 70 20)'/><ellipse cx='120' cy='42' rx='7' ry='3.4' fill='%23F3C7CE' transform='rotate(-15 120 42)'/><circle cx='45' cy='46' r='2' fill='%23E8A93E'/><circle cx='95' cy='38' r='1.8' fill='%23A9C7E8'/><circle cx='145' cy='18' r='2' fill='%23C5D8B6'/></g></svg>"),
            #ffffff;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
        background-position: right 4px bottom -6px, left 210px bottom -4px, right 250px center, center;
        background-size: 84px auto, 64px auto, 150px auto, cover;
    }
}

@media (max-width: 991.98px){
    .mpd-header{
        background-image:
            /* blossom behind the action buttons */
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g opacity='0.55'><g transform='translate(30,34)'><circle cx='0' cy='-7' r='4.5' fill='%23F6D9DD'/><circle cx='6.7' cy='-2.2' r='4.5' fill='%23F6D9DD'/><circle cx='4.1' cy='5.7' r='4.5' fill='%23F6D9DD'/><circle cx='-4.1' cy='5.7' r='4.5' fill='%23F6D9DD'/><circle cx='-6.7' cy='-2.2' r='4.5' fill='%23F6D9DD'/><circle r='3' fill='%23E8C9A0'/></g><circle cx='48' cy='16' r='2' fill='%23E8A93E' opacity='0.8'/></g></svg>"),
            /* small sprig curling from under the logo */
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60'><g opacity='0.6'><path d='M8 56 C 22 44 34 34 50 22' stroke='%23A8BE9B' stroke-width='2' fill='none' stroke-linecap='round'/><ellipse cx='22' cy='44' rx='9' ry='4' fill='%23C5D8B6' transform='rotate(-46 22 44)'/><ellipse cx='36' cy='32' rx='8' ry='3.6' fill='%23D3E2C6' transform='rotate(-50 36 32)'/><g transform='translate(54,18)'><circle cx='0' cy='-5' r='3.4' fill='%23F3C7CE'/><circle cx='4.8' cy='-1.5' r='3.4' fill='%23F3C7CE'/><circle cx='2.9' cy='4.1' r='3.4' fill='%23F3C7CE'/><circle cx='-2.9' cy='4.1' r='3.4' fill='%23F3C7CE'/><circle cx='-4.8' cy='-1.5' r='3.4' fill='%23F3C7CE'/><circle r='2.4' fill='%23E8A93E'/></g></g></svg>"),
            #ffffff;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: right 104px bottom -4px, left -2px bottom -2px, center;
        background-size: 48px auto, 58px auto, cover;
    }
}

/* ---------- 9. Global inner-page element reskin ---------- */
/* Applied site-wide so all ~120 inner pages inherit the brand feel without
   per-page edits. Pages with their own inline styles win where they must. */

/* tables — rounded cream card look */
.page-content table{
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--mpd-line);
    background: #fff;
}
.page-content table thead th{
    background: linear-gradient(180deg, #F8ECDA 0%, #F2E3D3 100%);
    color: var(--mpd-ink);
    font-weight: 700;
    border-bottom: 1px solid var(--mpd-line) !important;
}
.page-content table tbody tr:nth-child(even){ background: #FDFAF5; }
.page-content table td, .page-content table th{ border-color: rgba(61,50,41,.07) !important; }
.page-content .table-hover tbody tr:hover{ background: var(--mpd-primary-light); }

/* forms */
.page-content .form-control,
.page-content .form-select{
    border: 1px solid rgba(61,50,41,.15);
    background: #fff;
    color: var(--mpd-ink);
}
.page-content .form-control:focus,
.page-content .form-select:focus{
    border-color: var(--mpd-primary);
    box-shadow: 0 0 0 .2rem rgba(193,135,90,.15);
}
.page-content .form-label, .page-content label{ color: var(--mpd-ink); font-weight: 600; }
.page-content .form-check-input:checked{
    background-color: var(--mpd-primary);
    border-color: var(--mpd-primary);
}

/* pagination */
.page-content .pagination .page-link{
    border-radius: 999px !important;
    margin: 0 3px;
    border: 1px solid var(--mpd-line);
    color: var(--mpd-body);
}
.page-content .pagination .page-item.active .page-link{
    background: var(--mpd-primary);
    border-color: var(--mpd-primary);
    color: #fff;
}
.page-content .pagination .page-link:hover{
    background: var(--mpd-primary-light);
    color: var(--mpd-primary-dark);
}

/* generic cards */
.page-content .card{
    border: 1px solid var(--mpd-line);
    box-shadow: var(--mpd-shadow-sm);
    border-radius: var(--mpd-radius-md) !important;
    overflow: hidden;
}
.page-content .card .card-header{
    background: linear-gradient(180deg, #FDF7ED 0%, #F8ECDA 100%);
    border-bottom: 1px dashed rgba(193,135,90,.3);
    color: var(--mpd-ink);
    font-weight: 700;
}

/* alerts & badges soften */
.page-content .alert{ border-radius: 14px; }
.page-content .badge{ border-radius: 999px; font-weight: 700; }

/* modals */
.modal-content{
    border-radius: 22px;
    border: 1px solid var(--mpd-line);
}
.modal-header{
    background: linear-gradient(180deg, #FDF7ED 0%, #F8ECDA 100%);
    border-bottom: 1px dashed rgba(193,135,90,.3);
}

/* Bootstrap 5 JS + Bootstrap 4 CSS 相容修正：
   本站 JS 是 Bootstrap 5，但佈景的 style.css 仍是 Bootstrap 4，
   造成 modal 開啟時只出現黑色遮罩、對話框卻被壓在遮罩底下看不到。
   以下強制對話框顯示於遮罩之上，並確保開啟時可見。 */
/* z-index 要高於手機底部快捷列(1030) 才不會被壓在底下 */
.modal-backdrop{ z-index: 1990 !important; }
/* modal 本身固定滿版並可捲動（BS4 的 overflow:hidden 會讓長表單卡住、上方被切掉）*/
.modal{
    z-index: 2000 !important;
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
/* 用 flex + margin:auto 置中：內容短時置中，內容長時貼齊頂端可往下捲、不被切掉 */
.modal.show{ display: flex !important; }
.modal .modal-dialog{
    margin: auto !important;
    width: calc(100% - 1.5rem) !important;
    pointer-events: none;
}
.modal-content{ pointer-events: auto; }
.modal.fade .modal-dialog{ transform: translate(0, -40px); transition: transform .25s ease-out; }
.modal.show .modal-dialog{ transform: none !important; }
/* 取消 scrollable/centered 造成的固定高度與垂直置中，改由 .modal 捲動 */
.modal .modal-dialog-centered{ display: block !important; min-height: 0 !important; }
.modal .modal-dialog-scrollable{ height: auto !important; }
.modal .modal-dialog-scrollable .modal-content{ max-height: none !important; overflow: visible !important; }
.modal .modal-dialog-scrollable .modal-body{ overflow: visible !important; }

/* section headings on inner pages: flower before centered h2.section-title-ish */
.page-content .section-head h2,
.page-content .section-head .title{
    color: var(--mpd-ink);
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
}

/* nav-tabs → soft pills */
.page-content .nav-tabs{
    border-bottom: none;
    gap: 8px;
}
.page-content .nav-tabs .nav-link{
    border: 1px solid var(--mpd-line);
    border-radius: 999px;
    color: var(--mpd-body);
    font-weight: 600;
    background: #fff;
}
.page-content .nav-tabs .nav-link.active{
    background: var(--mpd-primary);
    border-color: var(--mpd-primary);
    color: #fff;
}

/* ---------- 10. Site-wide "page garden" — animated side decorations ---------- */
/* Fixed along the viewport's side gutters on wide screens: falling petals,
   twinkling stars, floating hearts, swaying flowers. Every page gets it via
   the master layout. pointer-events:none, hidden for reduced-motion users. */
.mpd-page-garden{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 6; /* above content sections (z-index 2-3), far below header (1000) */
    display: none;
}
@media (min-width: 1200px){
    .mpd-page-garden{ display: block; }
}

/* falling petals along both gutters */
.mpd-pg-petal{
    position: absolute;
    top: -30px;
    width: 16px; height: 16px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><ellipse cx='10' cy='10' rx='8' ry='4.6' fill='%23F3C7CE' transform='rotate(-30 10 10)'/></svg>") no-repeat center / contain;
    opacity: 0;
    animation: mpdPgFall linear infinite;
}
.mpd-pg-petal-1{ left: 8px;   animation-duration: 18s; animation-delay: 0s; }
.mpd-pg-petal-2{ left: 26px;  animation-duration: 23s; animation-delay: 7s;  width: 13px; height: 13px; }
.mpd-pg-petal-3{ right: 10px; animation-duration: 20s; animation-delay: 3s;  width: 18px; height: 18px; }
.mpd-pg-petal-4{ right: 28px; animation-duration: 25s; animation-delay: 12s; width: 14px; height: 14px; }
@keyframes mpdPgFall{
    0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; }
    4%   { opacity: .75; }
    90%  { opacity: .75; }
    100% { transform: translate3d(30px, 105vh, 0) rotate(340deg); opacity: 0; }
}

/* twinkling stars */
.mpd-pg-star{
    position: absolute;
    width: 13px; height: 13px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z' fill='%23E8A93E'/></svg>") no-repeat center / contain;
    animation: mpdPgTwinkle 3.4s ease-in-out infinite;
}
.mpd-pg-star-1{ top: 22%; left: 12px; }
.mpd-pg-star-2{ top: 58%; left: 30px; animation-delay: 1.2s; width: 10px; height: 10px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z' fill='%23A9C7E8'/></svg>"); }
.mpd-pg-star-3{ top: 34%; right: 14px; animation-delay: .6s;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z' fill='%23F3C7CE'/></svg>"); }
.mpd-pg-star-4{ top: 72%; right: 32px; animation-delay: 2s; width: 11px; height: 11px; }
@keyframes mpdPgTwinkle{
    0%, 100% { transform: scale(.5) rotate(0deg);  opacity: .3; }
    50%      { transform: scale(1)  rotate(22deg); opacity: .9; }
}

/* hearts that float gently upward like bubbles */
.mpd-pg-heart{
    position: absolute;
    bottom: -24px;
    font-size: 15px;
    color: rgba(217,119,63,.6);
    opacity: 0;
    animation: mpdPgRise ease-in infinite;
}
.mpd-pg-heart-1{ left: 18px;  animation-duration: 16s; animation-delay: 5s; }
.mpd-pg-heart-2{ right: 20px; animation-duration: 19s; animation-delay: 11s; font-size: 12px; color: rgba(196,112,127,.55); }
@keyframes mpdPgRise{
    0%   { transform: translate3d(0,0,0) scale(.8); opacity: 0; }
    6%   { opacity: .8; }
    85%  { opacity: .6; }
    100% { transform: translate3d(-24px, -105vh, 0) scale(1.15); opacity: 0; }
}

/* swaying flowers anchored at the bottom corners */
.mpd-pg-sway{
    position: absolute;
    bottom: -4px;
    width: 58px; height: 78px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 96'><g opacity='0.7'><path d='M37 94 C 36 70 36 50 38 26' stroke='%23A8BE9B' stroke-width='3' fill='none' stroke-linecap='round'/><ellipse cx='28' cy='62' rx='12' ry='5' fill='%23C5D8B6' transform='rotate(-34 28 62)'/><ellipse cx='47' cy='46' rx='11' ry='4.6' fill='%23D3E2C6' transform='rotate(30 47 46)'/><g transform='translate(38,20)'><circle cx='0' cy='-8' r='5.4' fill='%23F3C7CE'/><circle cx='7.6' cy='-2.5' r='5.4' fill='%23F3C7CE'/><circle cx='4.7' cy='6.6' r='5.4' fill='%23F3C7CE'/><circle cx='-4.7' cy='6.6' r='5.4' fill='%23F3C7CE'/><circle cx='-7.6' cy='-2.5' r='5.4' fill='%23F3C7CE'/><circle r='3.8' fill='%23E8A93E'/></g></g></svg>") no-repeat center bottom / contain;
    transform-origin: bottom center;
    animation: mpdPgSway 6s ease-in-out infinite;
}
.mpd-pg-sway-l{ left: 4px; }
.mpd-pg-sway-r{ right: 6px; animation-delay: 1.8s; width: 48px; height: 66px; }
@keyframes mpdPgSway{
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3.5deg); }
}

@media (prefers-reduced-motion: reduce){
    .mpd-page-garden{ display: none !important; }
}

/* ---------- 11. Auth pages (login/register/forgot/verify) brand skin ---------- */
/* #bg prefix outranks each page's inline <style> so the shared skin wins. */
#bg .login-section{
    background:
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 170'><g opacity='0.6'><path d='M16 164 C 48 126 86 88 148 44' stroke='%23A8BE9B' stroke-width='3.5' fill='none' stroke-linecap='round'/><ellipse cx='50' cy='128' rx='19' ry='8' fill='%23C5D8B6' transform='rotate(-42 50 128)'/><ellipse cx='84' cy='94' rx='17' ry='7' fill='%23D3E2C6' transform='rotate(-46 84 94)'/><ellipse cx='116' cy='66' rx='15' ry='6.5' fill='%23C5D8B6' transform='rotate(-50 116 66)'/><g transform='translate(150,40)'><circle cx='0' cy='-10' r='7' fill='%23F3C7CE'/><circle cx='9.5' cy='-3.1' r='7' fill='%23F3C7CE'/><circle cx='5.9' cy='8.1' r='7' fill='%23F3C7CE'/><circle cx='-5.9' cy='8.1' r='7' fill='%23F3C7CE'/><circle cx='-9.5' cy='-3.1' r='7' fill='%23F3C7CE'/><circle r='5' fill='%23E8A93E'/></g></g></svg>") no-repeat left -20px bottom -18px / 170px auto,
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'><g opacity='0.55'><path d='M130 114 C 108 88 88 66 62 40' stroke='%23A8BE9B' stroke-width='2.5' fill='none' stroke-linecap='round'/><ellipse cx='108' cy='88' rx='14' ry='6' fill='%23C5D8B6' transform='rotate(46 108 88)'/><ellipse cx='88' cy='64' rx='13' ry='5.5' fill='%23D3E2C6' transform='rotate(50 88 64)'/><g transform='translate(56,34)'><circle cx='0' cy='-8' r='5.2' fill='%23F6D9DD'/><circle cx='7.8' cy='-2.5' r='5.2' fill='%23F6D9DD'/><circle cx='4.8' cy='6.6' r='5.2' fill='%23F6D9DD'/><circle cx='-4.8' cy='6.6' r='5.2' fill='%23F6D9DD'/><circle cx='-7.8' cy='-2.5' r='5.2' fill='%23F6D9DD'/><circle r='3.6' fill='%23E8C9A0'/></g><circle cx='34' cy='70' r='2.6' fill='%23E8A93E' opacity='0.8'/></g></svg>") no-repeat right -14px top 120px / 130px auto,
        radial-gradient(480px 240px at 18% 22%, rgba(243,199,206,.35), transparent 70%),
        radial-gradient(420px 220px at 84% 70%, rgba(169,199,232,.28), transparent 70%),
        linear-gradient(180deg, #FDF7ED 0%, #F4E7D3 100%) !important;
}

/* card */
#bg .login-section .tt-login-col{
    border-radius: 26px !important;
    border: 1px solid var(--mpd-line) !important;
    box-shadow: var(--mpd-shadow-lg) !important;
    background: rgba(255,255,255,.9) !important;
}

/* title with a little heart */
#bg .login-section h2{
    color: var(--mpd-ink) !important;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
}
#bg .login-section h2::after{
    content: " ♡";
    color: var(--mpd-terracotta);
    font-size: .7em;
}

/* inputs */
#bg .login-section .theme-input{
    border-radius: 14px !important;
    border: 1px solid rgba(61,50,41,.15) !important;
    box-shadow: none !important;
}
#bg .login-section .theme-input:focus{
    border-color: var(--mpd-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(193,135,90,.15) !important;
}
#bg .login-section .input-field label{
    color: var(--mpd-ink) !important;
}

/* primary submit */
#bg .login-section .sign-up-btn{
    background: linear-gradient(135deg, #C1875A 0%, #D9A066 100%) !important;
    box-shadow: 0 14px 32px rgba(193,135,90,.3) !important;
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
}
#bg .login-section .sign-up-btn:hover{
    box-shadow: 0 18px 40px rgba(193,135,90,.38) !important;
}

/* links */
#bg .login-section a{
    color: var(--mpd-primary-dark);
}
#bg .login-section a:hover{ color: var(--mpd-terracotta); }

/* checkbox */
#bg .login-section .theme-checkbox .checkbox-field{
    border-radius: 6px;
    border-color: rgba(193,135,90,.5);
}
#bg .login-section .theme-checkbox input:checked + .checkbox-field{
    background: var(--mpd-primary);
    border-color: var(--mpd-primary);
}

/* ===================================================================
   12. Route pages (routeJPtoTW / AU / NZ / TWtoHK-MO-PH-SG) reskin
   Overrides routeCSS.css (loads earlier) + page-local <style> blocks
   (body-prefixed + !important where the page-local rules use it).
=================================================================== */

/* ---------- FAQ section ---------- */
.faq-section{
    background: linear-gradient(180deg, #FDF7ED 0%, #F4E7D3 100%);
}
.faq-section::before{ background: rgba(196,112,127,.08); }
.faq-section::after{ background: rgba(232,169,62,.10); }

.aw-faq-kicker{
    background: var(--mpd-primary-light);
    color: var(--mpd-primary-dark);
}
.aw-faq-title{
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    color: var(--mpd-ink);
    font-weight: 800;
}
.aw-faq-desc{ color: var(--mpd-body); }

.aw-faq-contact{
    background: #06C755;
    box-shadow: 0 14px 30px rgba(6,199,85,.25);
}
.aw-faq-contact:hover{ box-shadow: 0 18px 34px rgba(6,199,85,.3); }

.aw-faq-accordion .accordion-item{
    box-shadow: var(--mpd-shadow-sm);
    border: 1px solid var(--mpd-line) !important;
}
.aw-faq-accordion .accordion-button,
.aw-faq-accordion .accordion-button:not(.collapsed){
    color: var(--mpd-ink) !important;
}
.aw-faq-accordion .accordion-button::after{
    filter: sepia(1) saturate(2.4) hue-rotate(-12deg);
}
.aw-faq-icon{
    background: #F9E3E6;
    color: #C4707F;
}
.aw-faq-accordion .accordion-body{ color: var(--mpd-body); }

/* ---------- hero / top info cards ---------- */
.aw-au-clean-hero{
    box-shadow: 0 24px 50px rgba(101,74,50,.24);
    background:
        linear-gradient(90deg, rgba(77,56,38,.78) 0%, rgba(166,111,69,.46) 45%, rgba(244,231,211,.20) 100%),
        var(--route-hero-bg) center center / cover no-repeat;
}
@media (max-width: 575px){
    .aw-au-clean-hero{
        background:
            linear-gradient(180deg, rgba(77,56,38,.78) 0%, rgba(166,111,69,.5) 48%, rgba(244,231,211,.22) 100%),
            var(--route-hero-bg-mobile, var(--route-hero-bg)) 58% center / cover no-repeat;
    }
}
.aw-au-clean-title{ font-family: var(--mpd-font-latin), var(--mpd-font-zh); }

.aw-au-clean-card,
.aw-au-clean-warehouse{
    border: 1px solid var(--mpd-line);
    box-shadow: var(--mpd-shadow-sm);
}
.aw-au-clean-icon{
    background: #FAEDD3;
    color: #BC8F3C;
}
.aw-au-clean-card h3{ color: var(--mpd-ink); }
.aw-au-clean-card p{ color: var(--mpd-body); }

.aw-au-clean-warehouse-label{ color: var(--mpd-primary-dark); }
.aw-au-clean-warehouse-name{ color: var(--mpd-ink); }
.aw-au-clean-badge{ background: linear-gradient(135deg, #C1875A, #D9A066); }
.aw-au-clean-mark{
    background: linear-gradient(135deg, #FBF3E7, #F4E7D3);
    color: var(--mpd-primary);
}
.aw-au-clean-detail{
    background: #FDFAF5;
    border: 1px solid rgba(193,135,90,.16);
}
.aw-au-clean-detail small{ color: var(--mpd-body); }
.aw-au-clean-detail div{ color: var(--mpd-ink); }
.aw-au-clean-service{ border-top: 1px solid rgba(193,135,90,.2); }
.aw-au-clean-service h4{ color: var(--mpd-ink); }
.aw-au-clean-service-item{ color: var(--mpd-body); }
.aw-au-clean-service-item i{ color: #74975B; }

/* ---------- rate stage / cards ---------- */
.aw-rate-stage{
    background: linear-gradient(135deg, #FDF7ED 0%, #F9EFE0 48%, #FBF3E7 100%);
    box-shadow: var(--mpd-shadow-md);
}
.aw-rate-stage::before{
    background:
        radial-gradient(circle at 12% 18%, rgba(196,112,127,.08) 0 70px, transparent 71px),
        radial-gradient(circle at 88% 12%, rgba(232,169,62,.09) 0 90px, transparent 91px),
        radial-gradient(circle at 18% 86%, rgba(193,135,90,.08) 0 110px, transparent 111px);
}
.aw-rate-stage-head h2{
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    color: var(--mpd-ink);
}
.aw-rate-card{
    border: 1px solid var(--mpd-line);
    box-shadow: var(--mpd-shadow-sm);
}
.aw-rate-card::before,
.aw-rate-card::after{ background: #FBF3E7; }
.aw-rate-icon{
    background: linear-gradient(135deg, #FAEDD3, #F2E3D3);
    color: var(--mpd-primary);
    box-shadow: 0 12px 26px rgba(193,135,90,.16);
}
.aw-rate-icon-purple{
    background: linear-gradient(135deg, #F0E7F5, #EFE0F2);
    color: #9979B4;
    box-shadow: 0 12px 26px rgba(153,121,180,.16);
}
.aw-rate-price{ color: var(--mpd-ink); }
.aw-rate-price .unit{ color: var(--mpd-body); }
.aw-rate-title{ color: var(--mpd-ink); }
.aw-rate-time{
    background: #E3EFF8;
    color: #4A749B;
}
.aw-rate-chip{
    background: #FAEDD3;
    color: #96702C;
}
.aw-rate-chip-danger{
    background: #F9E3E6;
    color: #B4576A;
}
.aw-rate-local-fee{ color: var(--mpd-terracotta); }
.aw-rate-local-fee span{ color: var(--mpd-body); }
.aw-rate-state-wrap span{
    border: 1px solid rgba(193,135,90,.28);
    color: var(--mpd-body);
}
.aw-rate-btn-blue{
    background: linear-gradient(135deg, #C1875A, #D9A066) !important;
    box-shadow: 0 12px 24px rgba(193,135,90,.32);
}
.aw-rate-btn-purple{
    background: linear-gradient(135deg, #D9773F, #E8944D) !important;
    box-shadow: 0 12px 24px rgba(217,119,63,.3);
}

/* ---------- guide / tabs ---------- */
.aw-guide-stage{
    background:
        radial-gradient(circle at 10% 12%, rgba(196,112,127,.08) 0 70px, transparent 71px),
        radial-gradient(circle at 88% 14%, rgba(232,169,62,.09) 0 95px, transparent 96px),
        radial-gradient(circle at 14% 88%, rgba(193,135,90,.08) 0 120px, transparent 121px),
        linear-gradient(135deg, #FDF7ED 0%, #F9EFE0 48%, #FBF3E7 100%);
    box-shadow: var(--mpd-shadow-md);
}
.aw-guide-head h2{
    font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    color: var(--mpd-ink);
}
.aw-guide-nav .nav-link{
    color: var(--mpd-ink);
    box-shadow: var(--mpd-shadow-sm);
}
.aw-guide-nav .nav-link.active,
.aw-guide-nav .nav-link.show{
    background: linear-gradient(135deg, #C1875A, #D9A066) !important;
    box-shadow: 0 16px 28px rgba(193,135,90,.3);
}
.aw-guide-icon{
    background: linear-gradient(135deg, #FAEDD3, #F2E3D3);
    color: var(--mpd-primary);
}
.aw-guide-content{
    border: 1px solid var(--mpd-line);
    box-shadow: var(--mpd-shadow-sm);
}
.aw-guide-pane h4{ color: var(--mpd-ink); }
.aw-guide-pane h4::before{ background: linear-gradient(180deg, #E8A93E, #C1875A); }
.aw-guide-pane ol,
.aw-guide-pane ul{ color: var(--mpd-body); }
.aw-guide-pane a{ color: var(--mpd-primary-dark); }

/* ---------- journey flow ---------- */
.aw-journey-pane{
    background:
        radial-gradient(circle at 8% 12%, rgba(196,112,127,.06) 0 70px, transparent 71px),
        radial-gradient(circle at 92% 18%, rgba(232,169,62,.06) 0 90px, transparent 91px);
}
.aw-journey-flow::before{
    background: linear-gradient(180deg, #E8A93E 0%, #C1875A 45%, #D9773F 100%);
    box-shadow: 0 0 0 8px rgba(193,135,90,.06);
}
/* pastel dots — beat per-stop inline --stop-color */
.aw-journey-stop:nth-child(7n+1) .aw-journey-dot{ --stop-color:#C4707F !important; }
.aw-journey-stop:nth-child(7n+2) .aw-journey-dot{ --stop-color:#BC8F3C !important; }
.aw-journey-stop:nth-child(7n+3) .aw-journey-dot{ --stop-color:#5B93BC !important; }
.aw-journey-stop:nth-child(7n+4) .aw-journey-dot{ --stop-color:#74975B !important; }
.aw-journey-stop:nth-child(7n+5) .aw-journey-dot{ --stop-color:#9979B4 !important; }
.aw-journey-stop:nth-child(7n+6) .aw-journey-dot{ --stop-color:#D9773F !important; }
.aw-journey-stop:nth-child(7n+7) .aw-journey-dot{ --stop-color:#C1875A !important; }
.aw-journey-dot{ border-color: #FDF7ED; }
.aw-journey-stop.is-left .aw-journey-card-wrap::after{
    background: linear-gradient(90deg, rgba(193,135,90,.18), rgba(193,135,90,.55));
}
.aw-journey-stop.is-right .aw-journey-card-wrap::after{
    background: linear-gradient(90deg, rgba(193,135,90,.55), rgba(193,135,90,.18));
}
@media (max-width: 991px){
    .aw-journey-stop.is-left .aw-journey-card-wrap::after,
    .aw-journey-stop.is-right .aw-journey-card-wrap::after{
        background: linear-gradient(90deg, rgba(193,135,90,.55), rgba(193,135,90,.18));
    }
}
.aw-journey-card{
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(253,250,245,.96));
    border: 1px solid var(--mpd-line);
    box-shadow: var(--mpd-shadow-sm);
}
.aw-journey-card::before{ background: rgba(232,169,62,.08); }
.aw-journey-card::after{ background: linear-gradient(180deg, #E8A93E, #C1875A); }
.aw-journey-chip{
    background: #FAEDD3;
    color: #96702C;
}
.aw-journey-title{ color: var(--mpd-ink); }
.aw-journey-desc{ color: var(--mpd-body); }
.aw-journey-action a{ color: var(--mpd-primary-dark); }

/* ---------- JP page-local warehouse-rate blocks (page styles use
   !important, so these need body-prefix + !important to win) ---------- */
body .aw-warehouse-rate-stage{
    border: 3px solid rgba(193,135,90,.22) !important;
    box-shadow: 0 24px 60px rgba(101,74,50,.14) !important;
}
body .aw-warehouse-rate-stage.warehouse-tokyo{
    border: 3px solid rgba(91,147,188,.4) !important;
    box-shadow:
        0 28px 70px rgba(91,147,188,.16),
        0 0 0 8px rgba(91,147,188,.06) !important;
    background: linear-gradient(180deg, rgba(227,239,248,.6) 0%, #ffffff 18%, #ffffff 100%) !important;
}
body .aw-warehouse-rate-stage.warehouse-osaka{
    border: 3px solid rgba(193,135,90,.28) !important;
    background: linear-gradient(180deg, rgba(250,237,211,.55) 0%, #ffffff 20%, #ffffff 100%) !important;
}
body .aw-warehouse-rate-head{
    border-bottom: 2px solid rgba(193,135,90,.16) !important;
}
body .aw-warehouse-rate-kicker{
    background: var(--mpd-primary-light) !important;
    color: var(--mpd-primary-dark) !important;
}
body .aw-warehouse-rate-title{
    font-family: var(--mpd-font-latin), var(--mpd-font-zh) !important;
    color: var(--mpd-ink) !important;
}
body .aw-warehouse-rate-desc{ color: var(--mpd-body) !important; }
body .aw-warehouse-rate-recommend{
    background: linear-gradient(135deg, #C1875A, #D9A066) !important;
}
body .aw-warehouse-rate-chip{
    background: #FDFAF5 !important;
    border: 1px solid rgba(193,135,90,.24) !important;
    color: var(--mpd-body) !important;
}
body .aw-warehouse-rate-subsection{
    background: linear-gradient(180deg, #ffffff 0%, #FDFAF5 100%) !important;
    border: 2px solid rgba(193,135,90,.16) !important;
}
body .warehouse-tokyo .aw-warehouse-rate-subsection{
    border-color: rgba(91,147,188,.24) !important;
}
body .warehouse-osaka .aw-warehouse-rate-subsection{
    border-color: rgba(193,135,90,.2) !important;
}
body .aw-warehouse-rate-subhead h3{ color: var(--mpd-ink) !important; }
body .aw-warehouse-rate-subhead h3 span{ color: var(--mpd-primary-dark) !important; }

/* ===================================================================
   13. Route pages v2 shared skin (mpd-jpv2-*) — JP/AU/NZ route pages
=================================================================== */

    /* =========================================================
       選物日寄 日本寄台灣 v2 — 日本購物日記 (mpd-jpv2)
    ========================================================= */
    .mpd-jpv2{ background: #fff; }
    .mpd-jpv2 .container{ max-width: 1160px; }

    /* airmail 紅藍斜紋帶(郵件主題) */
    .mpd-jpv2-airmail{
        height: 10px;
        background: repeating-linear-gradient(-45deg,
            #D9773F 0 14px, #FDFAF5 14px 28px,
            #5B93BC 28px 42px, #FDFAF5 42px 56px);
        opacity: .8;
        border-radius: 999px;
        margin: 0 auto;
        max-width: 1160px;
    }

    /* ---------- 手帳 hero ---------- */
    .mpd-jpv2-hero{
        position: relative;
        padding: 66px 0 74px;
        overflow: hidden;
        background:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><g opacity='0.5'><path d='M18 132 C 48 96 78 62 116 28' stroke='%23A8BE9B' stroke-width='3' fill='none' stroke-linecap='round'/><ellipse cx='50' cy='90' rx='16' ry='7' fill='%23C5D8B6' transform='rotate(-42 50 90)'/><ellipse cx='72' cy='66' rx='15' ry='6.5' fill='%23D3E2C6' transform='rotate(-46 72 66)'/><g transform='translate(118,24)'><circle cx='0' cy='-9' r='5.5' fill='%23F3C7CE'/><circle cx='8.6' cy='-2.8' r='5.5' fill='%23F3C7CE'/><circle cx='5.3' cy='7.3' r='5.5' fill='%23F3C7CE'/><circle cx='-5.3' cy='7.3' r='5.5' fill='%23F3C7CE'/><circle cx='-8.6' cy='-2.8' r='5.5' fill='%23F3C7CE'/><circle r='4' fill='%23E8A93E'/></g></g></svg>") no-repeat left -18px bottom 8px / 130px auto,
            linear-gradient(180deg, #FFFFFF 0%, #FDF7ED 20%, #FBF3E7 100%);
    }
    .mpd-jpv2-hero-row{
        display: flex;
        align-items: center;
        gap: 46px;
        flex-wrap: wrap;
    }
    .mpd-jpv2-hero-copy{ flex: 1 1 460px; min-width: 300px; }
    .mpd-jpv2-kicker{
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 18px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid rgba(193,135,90,.3);
        color: var(--mpd-primary-dark);
        font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
        margin-bottom: 16px;
    }
    .mpd-jpv2-kicker .jpdot{
        width: 14px; height: 14px;
        border-radius: 50%;
        background: #D9534F;
        box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(217,83,79,.3);
    }
    .mpd-jpv2-hero-copy h1{
        margin: 0 0 16px;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: clamp(30px, 4.4vw, 48px);
        font-weight: 800;
        color: var(--mpd-ink);
        line-height: 1.35;
    }
    .mpd-jpv2-hero-copy h1 .accent{
        position: relative;
        color: var(--mpd-terracotta);
        white-space: nowrap;
    }
    .mpd-jpv2-hero-copy h1 .accent::after{
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 2px;
        height: 10px;
        background: rgba(232,169,62,.35);
        border-radius: 999px;
        z-index: -1;
    }
    .mpd-jpv2-hero-copy > p{
        max-width: 520px;
        margin: 0 0 24px;
        color: var(--mpd-body);
        font-size: 15px;
        line-height: 2.05;
    }
    .mpd-jpv2-hero-btns{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
    .mpd-jpv2-btn{
        display: inline-flex; align-items: center; gap: 8px;
        padding: 13px 28px;
        border-radius: 999px;
        font-size: 15px; font-weight: 800;
        text-decoration: none;
        transition: transform .2s ease;
    }
    .mpd-jpv2-btn:hover{ transform: translateY(-2px); }
    .mpd-jpv2-btn-primary{
        background: linear-gradient(135deg, #C1875A 0%, #D9A066 100%);
        color: #fff !important;
        box-shadow: 0 12px 26px rgba(193,135,90,.35);
    }
    .mpd-jpv2-btn-line{
        background: #06C755;
        color: #fff !important;
        box-shadow: 0 12px 26px rgba(6,199,85,.28);
    }
    .mpd-jpv2-btn-ghost{
        background: #fff;
        border: 1.5px solid rgba(193,135,90,.45);
        color: var(--mpd-primary-dark) !important;
    }
    /* 快速數字 */
    .mpd-jpv2-stats{
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 10px;
        max-width: 520px;
    }
    .mpd-jpv2-stat{
        background: #fff;
        border: 1px solid var(--mpd-line);
        border-radius: 16px;
        padding: 12px 8px;
        text-align: center;
        box-shadow: var(--mpd-shadow-sm);
    }
    .mpd-jpv2-stat b{
        display: block;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: 19px; font-weight: 800;
        color: var(--mpd-terracotta);
        line-height: 1.3;
    }
    .mpd-jpv2-stat span{ font-size: 11.5px; font-weight: 700; color: var(--mpd-body); }

    /* 拍立得拼貼 */
    .mpd-jpv2-collage{
        flex: 1 1 400px;
        min-width: 300px;
        position: relative;
        min-height: 420px;
    }
    .mpd-jpv2-polaroid{
        position: absolute;
        background: #fff;
        padding: 10px 10px 34px;
        border-radius: 6px;
        box-shadow: 0 18px 40px rgba(61,50,41,.18);
    }
    .mpd-jpv2-polaroid img{ display: block; border-radius: 3px; object-fit: cover; }
    .mpd-jpv2-polaroid .cap{
        position: absolute;
        left: 0; right: 0; bottom: 8px;
        text-align: center;
        font-size: 12.5px; font-weight: 700;
        color: var(--mpd-body);
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
    }
    .mpd-jpv2-p1{ left: 4%; top: 6%; transform: rotate(-3.5deg); z-index: 2; }
    .mpd-jpv2-p1 img{ width: min(300px, 58vw); height: 340px; }
    .mpd-jpv2-p2{ right: 2%; top: 0; transform: rotate(4deg); z-index: 1; }
    .mpd-jpv2-p2 img{ width: 180px; height: 210px; }
    .mpd-jpv2-p3{ right: 8%; bottom: 0; transform: rotate(-5deg); z-index: 3; }
    .mpd-jpv2-p3 img{ width: 170px; height: 130px; }
    .mpd-jpv2-tape{
        position: absolute;
        top: -12px; left: 50%;
        width: 86px; height: 24px;
        transform: translateX(-50%) rotate(-4deg);
        border-radius: 3px;
        background: rgba(243,199,206,.85);
        z-index: 4;
    }
    .mpd-jpv2-p2 .mpd-jpv2-tape{ background: rgba(232,201,160,.85); transform: translateX(-50%) rotate(5deg); }
    .mpd-jpv2-p3 .mpd-jpv2-tape{ background: rgba(197,216,182,.85); }
    /* 郵戳 */
    .mpd-jpv2-postmark{
        position: absolute;
        left: -6px; bottom: 12%;
        width: 92px; height: 92px;
        border: 2.5px solid rgba(196,112,127,.55);
        border-radius: 50%;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        color: rgba(196,112,127,.75);
        font-family: var(--mpd-font-latin), sans-serif;
        font-size: 10px; font-weight: 800; letter-spacing: .1em;
        transform: rotate(-12deg);
        z-index: 5;
        background: rgba(255,255,255,.5);
    }
    .mpd-jpv2-postmark b{ font-size: 17px; line-height: 1.1; }
    .mpd-jpv2-heart{
        position: absolute;
        font-size: 22px;
        color: #C4707F;
        z-index: 5;
        animation: jpv2Heart 3s ease-in-out infinite;
    }
    @keyframes jpv2Heart{
        0%,100%{ transform: translateY(0) rotate(-8deg); }
        50%{ transform: translateY(-8px) rotate(8deg); }
    }

    /* ---------- section 共用 ---------- */
    .mpd-jpv2-sec{ padding: 64px 0; }
    .mpd-jpv2-sec.alt{ background: #FDFAF5; }
    .mpd-jpv2-head{ text-align: center; max-width: 660px; margin: 0 auto 36px; }
    .mpd-jpv2-head .kicker{
        display: inline-flex; align-items: center; gap: 8px;
        padding: 7px 16px;
        border-radius: 999px;
        background: var(--mpd-primary-light);
        color: var(--mpd-primary-dark);
        font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
        margin-bottom: 12px;
    }
    .mpd-jpv2-head h2{
        margin: 0;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: clamp(23px, 3vw, 32px);
        font-weight: 800;
        color: var(--mpd-ink);
    }
    .mpd-jpv2-head .sub{ margin: 12px 0 0; color: var(--mpd-body); font-size: 14px; line-height: 2; }

    /* ---------- 熱門戰利品 ---------- */
    .mpd-jpv2-haul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .mpd-jpv2-haul-card{
        flex: 0 1 158px;
        text-align: center;
        background: #fff;
        border: 1px solid var(--mpd-line);
        border-radius: 18px;
        padding: 18px 10px 14px;
        box-shadow: var(--mpd-shadow-sm);
        text-decoration: none;
        transition: transform .22s ease, box-shadow .22s ease;
    }
    .mpd-jpv2-haul-card:hover{ transform: translateY(-5px); box-shadow: var(--mpd-shadow-md); }
    .mpd-jpv2-haul-emoji{
        width: 52px; height: 52px;
        margin: 0 auto 10px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px;
    }
    .mpd-jpv2-haul-card:nth-child(6n+1) .mpd-jpv2-haul-emoji{ background:#F9E3E6; }
    .mpd-jpv2-haul-card:nth-child(6n+2) .mpd-jpv2-haul-emoji{ background:#FAEDD3; }
    .mpd-jpv2-haul-card:nth-child(6n+3) .mpd-jpv2-haul-emoji{ background:#E3EFF8; }
    .mpd-jpv2-haul-card:nth-child(6n+4) .mpd-jpv2-haul-emoji{ background:#E7F0E4; }
    .mpd-jpv2-haul-card:nth-child(6n+5) .mpd-jpv2-haul-emoji{ background:#F0E7F5; }
    .mpd-jpv2-haul-card:nth-child(6n+6) .mpd-jpv2-haul-emoji{ background:#FBE9DC; }
    .mpd-jpv2-haul-card b{ display:block; font-size: 14px; font-weight: 800; color: var(--mpd-ink); margin-bottom: 4px; }
    .mpd-jpv2-haul-card span{ font-size: 11.5px; color: var(--mpd-body); line-height: 1.6; display: block; }
    .mpd-jpv2-haul-note{ text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--mpd-body); }
    .mpd-jpv2-haul-note a{ color: var(--mpd-primary-dark); font-weight: 800; }

    /* ---------- 倉庫明信片 ---------- */
    .mpd-jpv2-wh-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr));
        gap: 22px;
    }
    .mpd-jpv2-wh{
        position: relative;
        background: #fff;
        border-radius: 14px;
        padding: 26px 28px 24px;
        box-shadow: var(--mpd-shadow-md);
        /* 明信片邊框 */
        border: 1px solid var(--mpd-line);
        outline: 6px solid #fff;
        outline-offset: -10px;
        background-image: repeating-linear-gradient(-45deg,
            rgba(217,119,63,.5) 0 10px, transparent 10px 20px,
            rgba(91,147,188,.5) 20px 30px, transparent 30px 40px);
        background-size: 100% 6px;
        background-repeat: no-repeat;
        background-position: top;
    }
    .mpd-jpv2-wh-top{
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 14px;
        padding-top: 6px;
        margin-bottom: 16px;
    }
    .mpd-jpv2-wh-top h3{
        margin: 0 0 6px;
        font-size: 21px; font-weight: 800;
        color: var(--mpd-ink);
    }
    .mpd-jpv2-wh-to{
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 13px;
        border-radius: 999px;
        background: #FAEDD3;
        color: #96702C;
        font-size: 12px; font-weight: 800;
    }
    /* 郵票 */
    .mpd-jpv2-stamp{
        flex-shrink: 0;
        width: 58px; height: 68px;
        background: #FDFAF5;
        border: 2px dashed rgba(193,135,90,.45);
        border-radius: 6px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        font-size: 22px;
        transform: rotate(3deg);
    }
    .mpd-jpv2-stamp small{
        font-size: 9px; font-weight: 800; letter-spacing: .08em;
        color: var(--mpd-primary-dark);
        font-family: var(--mpd-font-latin), sans-serif;
    }
    .mpd-jpv2-wh-rows{ display: grid; gap: 8px; margin-bottom: 14px; }
    .mpd-jpv2-wh-row{
        display: flex; gap: 12px;
        padding: 10px 14px;
        background: #FDFAF5;
        border-radius: 12px;
        border: 1px solid rgba(193,135,90,.14);
        font-size: 13.5px;
        line-height: 1.8;
    }
    .mpd-jpv2-wh-row small{
        flex: 0 0 74px;
        font-weight: 800;
        color: var(--mpd-primary-dark);
        padding-top: 1px;
    }
    .mpd-jpv2-wh-row div{ color: var(--mpd-ink); font-weight: 700; word-break: break-word; }
    .mpd-jpv2-wh-row .hint{ font-weight: 400; font-size: 12px; color: var(--mpd-body); }
    .mpd-jpv2-wh-row .em{ color: var(--mpd-terracotta); }
    .mpd-jpv2-wh-warn{
        background: #FDF4E4;
        border: 1px dashed rgba(193,135,90,.4);
        border-radius: 12px;
        padding: 12px 15px;
        font-size: 12.5px; line-height: 1.9;
        color: #96702C;
        margin-bottom: 14px;
    }
    .mpd-jpv2-wh-svc{ display: flex; flex-wrap: wrap; gap: 8px; }
    .mpd-jpv2-wh-svc span{
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 13px;
        border-radius: 999px;
        background: #E7F0E4;
        color: #5C7A47;
        font-size: 12px; font-weight: 700;
    }

    /* ---------- 運費票券 ---------- */
    .mpd-jpv2-rate-wh{ margin-bottom: 40px; }
    .mpd-jpv2-rate-wh:last-child{ margin-bottom: 0; }
    .mpd-jpv2-rate-whhead{
        display: flex; align-items: center; justify-content: center; gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }
    .mpd-jpv2-rate-whhead h3{
        margin: 0;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: 24px; font-weight: 800;
        color: var(--mpd-ink);
    }
    .mpd-jpv2-reco{
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #C4707F, #D98995);
        color: #fff;
        font-size: 12px; font-weight: 800;
        box-shadow: 0 8px 16px rgba(196,112,127,.28);
    }
    .mpd-jpv2-rate-whdesc{
        text-align: center;
        max-width: 700px;
        margin: 0 auto 22px;
        color: var(--mpd-body);
        font-size: 13px; line-height: 1.9;
    }
    .mpd-jpv2-duty{
        margin-bottom: 22px;
    }
    .mpd-jpv2-duty-title{
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 14px;
    }
    .mpd-jpv2-duty-title::before,
    .mpd-jpv2-duty-title::after{
        content: "";
        flex: 1;
        border-top: 1px dashed rgba(193,135,90,.35);
    }
    .mpd-jpv2-duty-title span{
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 20px;
        border-radius: 999px;
        background: var(--mpd-primary-light);
        color: var(--mpd-primary-dark);
        font-size: 14.5px; font-weight: 800;
    }
    .mpd-jpv2-tickets{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
        gap: 16px;
    }
    /* 票券:左價格右內容,打孔缺口 */
    .mpd-jpv2-ticket{
        position: relative;
        display: flex;
        background: #fff;
        border: 1px solid var(--mpd-line);
        border-radius: 18px;
        box-shadow: var(--mpd-shadow-sm);
        overflow: hidden;
        transition: transform .22s ease, box-shadow .22s ease;
    }
    .mpd-jpv2-ticket:hover{ transform: translateY(-4px); box-shadow: var(--mpd-shadow-md); }
    .mpd-jpv2-ticket-left{
        flex: 0 0 128px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 4px;
        padding: 18px 10px;
        background: linear-gradient(160deg, #FDF7ED, #F4E7D3);
        border-right: 2px dashed rgba(193,135,90,.35);
        text-align: center;
    }
    .mpd-jpv2-ticket-left .price{
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: 26px; font-weight: 800;
        color: var(--mpd-terracotta);
        line-height: 1.1;
        word-break: break-word;
    }
    .mpd-jpv2-ticket-left .unit{ font-size: 11.5px; font-weight: 700; color: var(--mpd-body); }
    .mpd-jpv2-ticket-left .old{
        font-size: 13px; color: var(--mpd-body);
        text-decoration: line-through;
    }
    .mpd-jpv2-ticket-left .promo{
        display: inline-flex;
        padding: 2px 9px;
        border-radius: 999px;
        background: #C4707F; color: #fff;
        font-size: 10.5px; font-weight: 800;
    }
    /* 打孔 */
    .mpd-jpv2-ticket::before,
    .mpd-jpv2-ticket::after{
        content: "";
        position: absolute;
        left: 128px;
        width: 18px; height: 18px;
        margin-left: -9px;
        border-radius: 50%;
        background: #FDFAF5;
        border: 1px solid var(--mpd-line);
        z-index: 1;
    }
    .mpd-jpv2-sec:not(.alt) .mpd-jpv2-ticket::before,
    .mpd-jpv2-sec:not(.alt) .mpd-jpv2-ticket::after{ background: #fff; }
    .mpd-jpv2-ticket::before{ top: -10px; }
    .mpd-jpv2-ticket::after{ bottom: -10px; }
    .mpd-jpv2-ticket-body{ flex: 1; padding: 16px 18px; min-width: 0; }
    .mpd-jpv2-ticket-body h4{
        margin: 0 0 6px;
        font-size: 16.5px; font-weight: 800;
        color: var(--mpd-ink);
        display: flex; align-items: center; gap: 8px;
        flex-wrap: wrap;
    }
    .mpd-jpv2-ticket-time{
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 10px;
        border-radius: 999px;
        background: #E3EFF8; color: #4A749B;
        font-size: 11.5px; font-weight: 700;
    }
    .mpd-jpv2-ticket-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .mpd-jpv2-ticket-chips span{
        display: inline-flex;
        padding: 4px 10px;
        border-radius: 999px;
        background: #FAEDD3; color: #96702C;
        font-size: 11px; font-weight: 700;
    }
    .mpd-jpv2-ticket-chips span.danger{ background: #F9E3E6; color: #B4576A; }
    .mpd-jpv2-ticket-fee{
        font-size: 13px; font-weight: 800;
        color: var(--mpd-terracotta);
        margin-bottom: 6px;
    }
    .mpd-jpv2-ticket-fee small{ font-weight: 700; color: var(--mpd-body); }
    .mpd-jpv2-ticket-states{ display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
    .mpd-jpv2-ticket-states span{
        padding: 3px 9px;
        border-radius: 999px;
        background: #FDFAF5;
        border: 1px solid rgba(193,135,90,.22);
        color: var(--mpd-body);
        font-size: 11px; font-weight: 700;
    }
    .mpd-jpv2-ticket-cta{
        display: inline-flex; align-items: center; gap: 7px;
        padding: 8px 18px;
        border-radius: 999px;
        background: linear-gradient(135deg, #C1875A 0%, #D9A066 100%);
        color: #fff !important;
        font-size: 12.5px; font-weight: 800;
        text-decoration: none;
        box-shadow: 0 8px 16px rgba(193,135,90,.28);
    }

    /* ---------- 流程(橫向) ---------- */
    .mpd-jpv2-flow{
        display: grid;
        grid-template-columns: repeat(7, minmax(0,1fr));
        gap: 10px;
        position: relative;
    }
    .mpd-jpv2-flow::before{
        content: "";
        position: absolute;
        left: 4%; right: 4%; top: 26px;
        border-top: 2px dashed rgba(193,135,90,.35);
    }
    .mpd-jpv2-step{
        position: relative;
        text-align: center;
        padding-top: 2px;
        text-decoration: none;
    }
    .mpd-jpv2-step-dot{
        position: relative; z-index: 1;
        width: 48px; height: 48px;
        margin: 0 auto 10px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: #fff;
        border: 2px solid rgba(193,135,90,.4);
        color: var(--mpd-primary);
        font-size: 17px;
        transition: all .22s ease;
    }
    .mpd-jpv2-step:hover .mpd-jpv2-step-dot{
        background: linear-gradient(135deg, #C1875A, #D9A066);
        border-color: transparent;
        color: #fff;
        transform: translateY(-4px);
    }
    .mpd-jpv2-step-num{
        position: absolute;
        top: -4px; right: calc(50% - 32px);
        z-index: 2;
        width: 20px; height: 20px;
        border-radius: 50%;
        background: var(--mpd-gold);
        color: #fff;
        font-size: 11px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--mpd-font-latin), sans-serif;
    }
    .mpd-jpv2-step b{
        display: block;
        font-size: 13px; font-weight: 800;
        color: var(--mpd-ink);
        line-height: 1.5;
        margin-bottom: 3px;
    }
    .mpd-jpv2-step span{ font-size: 11px; color: var(--mpd-body); line-height: 1.6; display: block; }
    .mpd-jpv2-flow-note{ text-align: center; margin-top: 24px; }
    .mpd-jpv2-flow-note a{
        display: inline-flex; align-items: center; gap: 7px;
        color: var(--mpd-primary-dark);
        font-size: 13.5px; font-weight: 800;
        text-decoration: none;
    }

    /* ---------- guide 頁籤(上方 pills) ---------- */
    .mpd-jpv2-tabs{
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 10px;
        margin-bottom: 24px;
        padding: 0; list-style: none;
    }
    .mpd-jpv2-tabs .nav-link{
        display: inline-flex; align-items: center; gap: 8px;
        padding: 11px 22px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--mpd-line);
        color: var(--mpd-ink);
        font-size: 14px; font-weight: 800;
        box-shadow: var(--mpd-shadow-sm);
        transition: all .22s ease;
    }
    .mpd-jpv2-tabs .nav-link i{ color: var(--mpd-primary); }
    .mpd-jpv2-tabs .nav-link:hover{ transform: translateY(-2px); }
    .mpd-jpv2-tabs .nav-link.active{
        background: linear-gradient(135deg, #C1875A, #D9A066) !important;
        color: #fff !important;
        border-color: transparent;
        box-shadow: 0 12px 24px rgba(193,135,90,.3);
    }
    .mpd-jpv2-tabs .nav-link.active i{ color: #fff; }
    .mpd-jpv2-pane-card{
        max-width: 900px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid var(--mpd-line);
        border-radius: 22px;
        box-shadow: var(--mpd-shadow-sm);
        padding: 30px 32px;
    }
    .mpd-jpv2-pane-card h4{
        position: relative;
        margin: 0 0 12px;
        padding-left: 15px;
        font-size: 17.5px; font-weight: 800;
        color: var(--mpd-ink);
    }
    .mpd-jpv2-pane-card h4::before{
        content: "";
        position: absolute;
        left: 0; top: 4px;
        width: 5px; height: calc(100% - 8px);
        border-radius: 999px;
        background: linear-gradient(180deg, #E8A93E, #C1875A);
    }
    .mpd-jpv2-pane-card ol, .mpd-jpv2-pane-card ul{
        color: var(--mpd-body);
        font-size: 14px; line-height: 2;
        padding-left: 22px;
        margin-bottom: 22px;
    }
    .mpd-jpv2-pane-card li{ margin-bottom: 6px; }
    .mpd-jpv2-pane-card a{ color: var(--mpd-primary-dark); font-weight: 700; }
    .mpd-jpv2-pane-card strong{ color: var(--mpd-ink); }
    .mpd-jpv2-pane-card p{ color: var(--mpd-body); font-size: 14px; line-height: 2; padding-left: 22px; }

    /* ---------- FAQ 兩欄 ---------- */
    .mpd-jpv2-faq{
        columns: 2;
        column-gap: 14px;
        max-width: 1000px;
        margin: 0 auto;
    }
    .mpd-jpv2-faq-item{
        break-inside: avoid;
        background: #fff;
        border: 1px solid var(--mpd-line);
        border-radius: 16px;
        box-shadow: var(--mpd-shadow-sm);
        margin-bottom: 14px;
        overflow: hidden;
    }
    .mpd-jpv2-faq-item summary{
        list-style: none;
        display: flex; align-items: center; gap: 10px;
        padding: 14px 18px;
        cursor: pointer;
        font-size: 14px; font-weight: 800;
        color: var(--mpd-ink);
        transition: background .2s ease;
    }
    .mpd-jpv2-faq-item summary::-webkit-details-marker{ display: none; }
    .mpd-jpv2-faq-item summary:hover{ background: #FDFAF5; }
    .mpd-jpv2-faq-q{
        flex: 0 0 24px;
        width: 24px; height: 24px;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: #F9E3E6;
        color: #C4707F;
        font-family: var(--mpd-font-latin), sans-serif;
        font-size: 12px; font-weight: 800;
    }
    .mpd-jpv2-faq-arrow{ margin-left: auto; color: var(--mpd-primary); transition: transform .25s ease; flex-shrink: 0; font-size: 12px; }
    .mpd-jpv2-faq-item[open] .mpd-jpv2-faq-arrow{ transform: rotate(180deg); }
    .mpd-jpv2-faq-a{
        padding: 0 18px 14px 52px;
        color: var(--mpd-body);
        font-size: 13px; line-height: 1.95;
    }
    .mpd-jpv2-faq-more{ text-align: center; margin-top: 24px; }
    .mpd-jpv2-faq-more a{ margin: 0 6px 10px; }

    /* ---------- 收尾 CTA ---------- */
    .mpd-jpv2-cta{
        position: relative;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        border-radius: 28px;
        background: linear-gradient(135deg, #FDF7ED 0%, #F4E7D3 100%);
        border: 1px solid var(--mpd-line);
        box-shadow: var(--mpd-shadow-sm);
        padding: 44px 30px 40px;
        overflow: hidden;
    }
    .mpd-jpv2-cta::before{
        content: "";
        position: absolute;
        right: -10px; top: -14px;
        width: 110px; height: 110px;
        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g opacity='0.5'><g transform='translate(60,60)'><circle cx='0' cy='-14' r='9' fill='%23F3C7CE'/><circle cx='13.3' cy='-4.3' r='9' fill='%23F3C7CE'/><circle cx='8.2' cy='11.3' r='9' fill='%23F3C7CE'/><circle cx='-8.2' cy='11.3' r='9' fill='%23F3C7CE'/><circle cx='-13.3' cy='-4.3' r='9' fill='%23F3C7CE'/><circle r='6.5' fill='%23E8A93E'/></g></g></svg>") no-repeat center / contain;
        pointer-events: none;
    }
    .mpd-jpv2-cta h3{
        margin: 0 0 10px;
        font-family: var(--mpd-font-latin), var(--mpd-font-zh);
        font-size: clamp(21px, 2.6vw, 28px);
        font-weight: 800;
        color: var(--mpd-ink);
    }
    .mpd-jpv2-cta p{
        max-width: 560px;
        margin: 0 auto 24px;
        color: var(--mpd-body);
        font-size: 14.5px; line-height: 2;
    }

    /* ---------- 含稅方案 highlight ---------- */
    .mpd-jpv2-duty.is-duty{
        position: relative;
        border-radius: 24px;
        padding: 20px 18px 22px;
        background: linear-gradient(135deg, #FDF3E3 0%, #FBEBD8 55%, #F9E7E0 100%);
        border: 2px solid rgba(232,169,62,.5);
        box-shadow: 0 18px 40px rgba(193,135,90,.16);
        overflow: hidden;
    }
    .mpd-jpv2-duty.is-duty::before{
        content: "";
        position: absolute;
        top: -60%; left: -30%;
        width: 55%; height: 220%;
        background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
        transform: rotate(10deg);
        animation: jpv2Shine 4.5s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes jpv2Shine{
        0%, 55%, 100%{ left: -60%; }
        30%{ left: 130%; }
    }
    .mpd-jpv2-duty-hero{
        position: relative;
        text-align: center;
        margin-bottom: 16px;
    }
    .mpd-jpv2-duty-ribbon{
        display: inline-flex; align-items: center; gap: 7px;
        padding: 8px 20px;
        border-radius: 999px;
        background: linear-gradient(135deg, #E8A93E, #D9773F);
        color: #fff;
        font-size: 13px; font-weight: 800; letter-spacing: .04em;
        box-shadow: 0 10px 22px rgba(217,119,63,.35);
        margin-bottom: 12px;
        animation: jpv2Bob 2.6s ease-in-out infinite;
    }
    @keyframes jpv2Bob{
        0%,100%{ transform: translateY(0); }
        50%{ transform: translateY(-4px); }
    }
    .mpd-jpv2-duty-hero h4{
        margin: 0 0 12px;
        font-size: clamp(17px, 2.2vw, 21px);
        font-weight: 800;
        color: var(--mpd-ink);
    }
    .mpd-jpv2-duty-perks{
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 8px;
    }
    .mpd-jpv2-duty-perks span{
        display: inline-flex; align-items: center; gap: 7px;
        padding: 7px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(232,169,62,.35);
        color: #96702C;
        font-size: 12.5px; font-weight: 800;
        box-shadow: 0 6px 14px rgba(193,135,90,.12);
    }
    .mpd-jpv2-duty-perks i{ color: var(--mpd-terracotta); }
    .mpd-jpv2-duty.is-duty .mpd-jpv2-ticket{
        border: 1.5px solid rgba(232,169,62,.45);
        box-shadow: 0 14px 30px rgba(193,135,90,.18);
    }
    .mpd-jpv2-duty.is-duty .mpd-jpv2-ticket::before,
    .mpd-jpv2-duty.is-duty .mpd-jpv2-ticket::after{ background: #FBEBD8; }
    .mpd-jpv2-duty.is-duty .mpd-jpv2-ticket-left{
        background: linear-gradient(160deg, #FBEBCB, #F6DFC0);
    }
    .mpd-jpv2-duty.is-duty .mpd-jpv2-ticket-cta{
        background: linear-gradient(135deg, #E8A93E, #D9773F);
        box-shadow: 0 10px 22px rgba(217,119,63,.32);
    }

    /* ---------- 動態點綴 ---------- */
    .mpd-jpv2-polaroid{ animation: jpv2Sway 6s ease-in-out infinite; }
    .mpd-jpv2-p1{ animation-delay: 0s; }
    .mpd-jpv2-p2{ animation-delay: 1.4s; }
    .mpd-jpv2-p3{ animation-delay: 2.8s; }
    @keyframes jpv2Sway{
        0%,100%{ translate: 0 0; }
        50%{ translate: 0 -7px; }
    }
    .mpd-jpv2-postmark{ animation: jpv2Stamp 5s ease-in-out infinite; }
    @keyframes jpv2Stamp{
        0%,88%,100%{ transform: rotate(-12deg) scale(1); }
        93%{ transform: rotate(-10deg) scale(1.08); }
    }
    .mpd-jpv2-sparkle{
        position: absolute;
        color: var(--mpd-gold);
        animation: jpv2Twinkle 2.8s ease-in-out infinite;
        pointer-events: none;
        z-index: 5;
    }
    @keyframes jpv2Twinkle{
        0%,100%{ opacity: .25; transform: scale(.8) rotate(0deg); }
        50%{ opacity: 1; transform: scale(1.15) rotate(20deg); }
    }
    /* airmail 帶上的飛機 */
    .mpd-jpv2-airwrap{ position: relative; max-width: 1160px; margin: 0 auto; }
    .mpd-jpv2-airplane{
        position: absolute;
        top: -16px; left: 0;
        font-size: 20px;
        color: var(--mpd-blue);
        animation: jpv2Fly 9s linear infinite;
        pointer-events: none;
    }
    @keyframes jpv2Fly{
        0%{ left: -4%; transform: translateY(0) rotate(8deg); opacity: 0; }
        6%{ opacity: 1; }
        50%{ transform: translateY(-9px) rotate(4deg); }
        94%{ opacity: 1; }
        100%{ left: 102%; transform: translateY(0) rotate(8deg); opacity: 0; }
    }
    .mpd-jpv2-stat{ transition: transform .22s ease, box-shadow .22s ease; }
    .mpd-jpv2-stat:hover{ transform: translateY(-4px) rotate(-1deg); box-shadow: var(--mpd-shadow-md); }
    .mpd-jpv2-haul-emoji{ transition: transform .25s ease; }
    .mpd-jpv2-haul-card:hover .mpd-jpv2-haul-emoji{ transform: scale(1.18) rotate(-8deg); }
    .mpd-jpv2-stamp{ transition: transform .25s ease; }
    .mpd-jpv2-wh:hover .mpd-jpv2-stamp{ transform: rotate(-4deg) scale(1.06); }
    .mpd-jpv2-cta h3 .beat{ display: inline-block; animation: jpv2Beat 1.6s ease-in-out infinite; color: #C4707F; }
    @keyframes jpv2Beat{
        0%,100%{ transform: scale(1); }
        12%{ transform: scale(1.25); }
        24%{ transform: scale(1); }
        36%{ transform: scale(1.18); }
        48%{ transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce){
        .mpd-jpv2 *{ animation: none !important; }
    }

    /* ---------- responsive ---------- */
    @media (max-width: 991.98px){
        .mpd-jpv2-haul{ grid-template-columns: repeat(3, minmax(0,1fr)); }
        .mpd-jpv2-flow{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px 10px; }
        .mpd-jpv2-flow::before{ content: none; }
        .mpd-jpv2-faq{ columns: 1; }
    }
    @media (max-width: 575.98px){
        .mpd-jpv2-hero{ padding: 46px 0 54px; }
        .mpd-jpv2-collage{ min-height: 350px; }
        .mpd-jpv2-p1 img{ height: 260px; }
        .mpd-jpv2-p2 img{ width: 140px; height: 160px; }
        .mpd-jpv2-p3 img{ width: 140px; height: 105px; }
        .mpd-jpv2-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
        .mpd-jpv2-sec{ padding: 46px 0; }
        .mpd-jpv2-haul{ grid-template-columns: repeat(2, minmax(0,1fr)); }
        .mpd-jpv2-wh{ padding: 22px 18px 20px; }
        .mpd-jpv2-ticket{ flex-direction: column; }
        .mpd-jpv2-ticket-left{
            flex-basis: auto;
            border-right: 0;
            border-bottom: 2px dashed rgba(193,135,90,.35);
            flex-direction: row;
            justify-content: center;
            gap: 10px;
            padding: 12px;
        }
        .mpd-jpv2-ticket::before,
        .mpd-jpv2-ticket::after{
            left: auto; top: 62px;
            margin-left: 0;
        }
        .mpd-jpv2-ticket::before{ left: -10px; }
        .mpd-jpv2-ticket::after{ right: -10px; left: auto; bottom: auto; }
        .mpd-jpv2-flow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
        .mpd-jpv2-pane-card{ padding: 22px 18px; }
        .mpd-jpv2-faq-a{ padding: 0 16px 12px 16px; }
    }

/* --- route v2: 拼貼鏡像變化版(紐西蘭等,與澳洲/日本區隔) --- */
.mpd-collage-alt .mpd-jpv2-p1{ left: auto; right: 4%; transform: rotate(3deg); }
.mpd-collage-alt .mpd-jpv2-p2{ right: auto; left: 2%; top: 4%; transform: rotate(-5deg); }
.mpd-collage-alt .mpd-jpv2-p3{ right: auto; left: 8%; bottom: 0; transform: rotate(4deg); }
.mpd-collage-alt .mpd-jpv2-p1 .mpd-jpv2-tape{ background: rgba(197,216,182,.85); transform: translateX(-50%) rotate(5deg); }
.mpd-collage-alt .mpd-jpv2-p2 .mpd-jpv2-tape{ background: rgba(243,199,206,.85); transform: translateX(-50%) rotate(-4deg); }
.mpd-collage-alt .mpd-jpv2-postmark{ left: auto; right: -6px; transform: rotate(10deg); border-color: rgba(116,151,91,.55); color: rgba(116,151,91,.8); }

/* ---------- 11b. Auth 動態花園(登入等頁) ---------- */
/* 移除主題 banner-two 的圓圈/三角形 pattern */
#bg .login-section.banner-two::before,
#bg .login-section.banner-two::after{
    background-image: none !important;
    content: none !important;
}
#bg .login-section{ position: relative; overflow: hidden !important; }
#bg .login-section .container{ position: relative; z-index: 2; }

.mpd-auth-garden{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.mpd-auth-garden span{ position: absolute; display: block; }

/* 搖曳花叢 */
.mag-flower{
    width: 150px; height: 170px;
    bottom: -10px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 170'><g><path d='M75 168 C 74 120 76 92 78 62' stroke='%23A8BE9B' stroke-width='4' fill='none' stroke-linecap='round'/><path d='M76 120 C 60 112 50 98 48 84' stroke='%23A8BE9B' stroke-width='3' fill='none' stroke-linecap='round'/><ellipse cx='56' cy='104' rx='16' ry='7' fill='%23C5D8B6' transform='rotate(-38 56 104)'/><ellipse cx='94' cy='128' rx='15' ry='6.5' fill='%23D3E2C6' transform='rotate(34 94 128)'/><g transform='translate(78,52)'><circle cx='0' cy='-14' r='10' fill='%23F3C7CE'/><circle cx='13.3' cy='-4.3' r='10' fill='%23F3C7CE'/><circle cx='8.2' cy='11.3' r='10' fill='%23F3C7CE'/><circle cx='-8.2' cy='11.3' r='10' fill='%23F3C7CE'/><circle cx='-13.3' cy='-4.3' r='10' fill='%23F3C7CE'/><circle r='7' fill='%23E8A93E'/></g><g transform='translate(46,80)'><circle cx='0' cy='-7' r='5' fill='%23F6D9DD'/><circle cx='6.7' cy='-2.2' r='5' fill='%23F6D9DD'/><circle cx='4.1' cy='5.7' r='5' fill='%23F6D9DD'/><circle cx='-4.1' cy='5.7' r='5' fill='%23F6D9DD'/><circle cx='-6.7' cy='-2.2' r='5' fill='%23F6D9DD'/><circle r='3.5' fill='%23E8C9A0'/></g></g></svg>") no-repeat bottom / contain;
    transform-origin: bottom center;
    animation: magSway 5.5s ease-in-out infinite;
}
.mag-flower-l{ left: 2%; }
.mag-flower-r{ right: 2%; transform: scaleX(-1); animation-delay: 1.4s; animation-duration: 6.5s; }
@keyframes magSway{
    0%,100%{ rotate: -2.5deg; }
    50%{ rotate: 2.5deg; }
}
.mag-sprout{
    width: 64px; height: 54px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 54'><g><path d='M32 52 C 31 38 32 30 32 20' stroke='%23A8BE9B' stroke-width='3' fill='none' stroke-linecap='round'/><ellipse cx='22' cy='34' rx='11' ry='5' fill='%23C5D8B6' transform='rotate(-36 22 34)'/><ellipse cx='42' cy='28' rx='11' ry='5' fill='%23D3E2C6' transform='rotate(32 42 28)'/><circle cx='32' cy='14' r='5' fill='%23F6D9DD'/></g></svg>") no-repeat bottom / contain;
    transform-origin: bottom center;
    animation: magSway 4.8s ease-in-out infinite;
}

/* 飄落花瓣 */
.mag-petal{
    top: -30px;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><ellipse cx='10' cy='10' rx='8' ry='4.6' fill='%23F3C7CE' transform='rotate(-30 10 10)'/></svg>") no-repeat center / contain;
    animation: magFall linear infinite;
    opacity: 0;
}
.mag-petal-b{
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><ellipse cx='10' cy='10' rx='8' ry='4.6' fill='%23E8C9A0' transform='rotate(24 10 10)'/></svg>") no-repeat center / contain;
}
@keyframes magFall{
    0%{ transform: translateY(-4vh) translateX(0) rotate(0deg); opacity: 0; }
    8%{ opacity: .9; }
    50%{ transform: translateY(45vh) translateX(-32px) rotate(200deg); }
    92%{ opacity: .8; }
    100%{ transform: translateY(96vh) translateX(24px) rotate(400deg); opacity: 0; }
}

/* 蝴蝶 */
.mag-butterfly{
    left: -60px;
    width: 34px; height: 30px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'><g><ellipse cx='12' cy='10' rx='9' ry='7' fill='%23F3C7CE' transform='rotate(-24 12 10)'/><ellipse cx='22' cy='10' rx='9' ry='7' fill='%23F6D9DD' transform='rotate(24 22 10)'/><ellipse cx='13' cy='21' rx='7' ry='5.5' fill='%23E8C9A0' transform='rotate(-18 13 21)'/><ellipse cx='21' cy='21' rx='7' ry='5.5' fill='%23F3C7CE' transform='rotate(18 21 21)'/><rect x='16' y='6' width='2.4' height='19' rx='1.2' fill='%23A66F45'/><path d='M16 6 C 14 2 12 1 10 1 M18 6 C 20 2 22 1 24 1' stroke='%23A66F45' stroke-width='1.4' fill='none' stroke-linecap='round'/></g></svg>") no-repeat center / contain;
    animation: magFly 16s linear infinite;
}
.mag-butterfly-2{ animation-duration: 20s; transform: scale(.75); }
@keyframes magFly{
    0%{ left: -6%; transform: translateY(0) rotate(6deg); }
    12%{ transform: translateY(-26px) rotate(-6deg); }
    25%{ transform: translateY(6px) rotate(8deg); }
    38%{ transform: translateY(-30px) rotate(-8deg); }
    50%{ transform: translateY(0) rotate(6deg); }
    62%{ transform: translateY(-24px) rotate(-6deg); }
    75%{ transform: translateY(8px) rotate(8deg); }
    88%{ transform: translateY(-20px) rotate(-6deg); }
    100%{ left: 106%; transform: translateY(0) rotate(6deg); }
}

/* 愛心與星星 */
.mag-heart{
    width: 20px; height: 18px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'><path d='M10 17 C 3 12 0 8 0 5 C 0 2 2 0 5 0 C 7 0 9 1.5 10 3.5 C 11 1.5 13 0 15 0 C 18 0 20 2 20 5 C 20 8 17 12 10 17 Z' fill='%23E9A6B3'/></svg>") no-repeat center / contain;
    animation: magHeart 4s ease-in-out infinite;
}
@keyframes magHeart{
    0%,100%{ transform: translateY(0) scale(1); opacity: .75; }
    50%{ transform: translateY(-12px) scale(1.15); opacity: 1; }
}
.mag-star{
    width: 16px; height: 16px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0 L12 8 L20 10 L12 12 L10 20 L8 12 L0 10 L8 8 Z' fill='%23E8A93E'/></svg>") no-repeat center / contain;
    animation: magTwinkle 2.6s ease-in-out infinite;
}
@keyframes magTwinkle{
    0%,100%{ transform: scale(.7) rotate(0deg); opacity: .3; }
    50%{ transform: scale(1.15) rotate(24deg); opacity: 1; }
}

@media (max-width: 767.98px){
    .mag-flower{ width: 104px; height: 118px; }
    .mag-butterfly-2{ display: none; }
}
@media (prefers-reduced-motion: reduce){
    .mpd-auth-garden{ display: none; }
}

/* auth 頁高度收斂:不強撐滿版高 */
#bg .login-section.allwin-auth{
    min-height: 0 !important;
    padding-bottom: 56px !important;
}

/* Official supplied PNG logo. */
.mpd-logo-image{ display:block; object-fit:contain; flex-shrink:0; }

/* ---------- 14. 手機版底部快捷列 ---------- */
.mpd-botnav{ display: none; }
@media (max-width: 991.98px){
    .mpd-botnav{
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--mpd-line);
        box-shadow: 0 -6px 20px rgba(61,50,41,.10);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .mpd-botnav-item{
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        text-decoration: none !important;
        color: var(--mpd-body);
        transition: color .18s ease;
    }
    .mpd-botnav-item i{
        font-size: 19px;
        line-height: 1;
        color: var(--mpd-primary);
    }
    .mpd-botnav-item span{
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .mpd-botnav-item:active{ color: var(--mpd-primary-dark); }
    /* LINE 客服:綠色圓底突顯 */
    .mpd-botnav-line i{
        color: #fff;
        background: #06C755;
        width: 34px; height: 34px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 14px rgba(6,199,85,.35);
        margin-top: -2px;
    }
    .mpd-botnav-line span{ color: #06A548; }

    /* 內容底部留白,避免被固定列蓋住;上移浮動的置頂/LINE 按鈕 */
    .page-content{ padding-bottom: 68px !important; }
    .scroltop{ bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 15. 手機底部幣別鈕 + 往上彈出的幣別選單 ---------- */
.mpd-botnav-cur{
    background: none; border: none; cursor: pointer;
    font-family: inherit;
}
.mpd-botnav-cur i.fa-coins{ color: var(--mpd-gold) !important; }
.mpd-botnav-cur span{ font-family: var(--mpd-font-latin), var(--mpd-font-zh); }

.mpd-cursheet{
    position: fixed; inset: 0;
    z-index: 1040;
    background: rgba(61,50,41,.28);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
}
.mpd-cursheet.open{ opacity: 1; visibility: visible; }
.mpd-cursheet-panel{
    position: absolute;
    left: 0; right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(61,50,41,.18);
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(20px);
    transition: transform .24s ease;
    max-height: 60vh; overflow-y: auto;
}
.mpd-cursheet.open .mpd-cursheet-panel{ transform: translateY(0); }
.mpd-cursheet-head{
    text-align: center;
    font-size: 13px; font-weight: 800; letter-spacing: .05em;
    color: var(--mpd-body);
    padding: 8px 0 10px;
    border-bottom: 1px dashed var(--mpd-line);
    margin-bottom: 6px;
}
.mpd-cursheet-item{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--mpd-ink);
    font-weight: 700; font-size: 16px;
    text-decoration: none !important;
}
.mpd-cursheet-item:active{ background: var(--mpd-primary-light); }
.mpd-cursheet-item.is-active{ background: var(--mpd-primary-light); color: var(--mpd-primary-dark); }
.mpd-cursheet-item.is-active i{ color: var(--mpd-primary); }
/* 只在手機顯示彈窗 */
@media (min-width: 992px){ .mpd-cursheet{ display: none; } }