* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    color: var(--ink);
    font-family: "PingFang TC","Microsoft JhengHei",sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font: inherit;
}

header {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4.5%;
    border-bottom: 1px solid var(--line);
}

.logo {
    width: 185px;
    height: auto;
}

nav {
    display: flex;
    gap: 32px;
    font-size: 14px;
    letter-spacing: .12em;
}

nav a:hover,.text-link:hover {
    color: #3387b5;
}

.edition {
    font: 12px Arial, sans-serif;
    letter-spacing: .1em;
}

.hero {
    display: grid;
    grid-template-columns: 53% 47%;
    min-height: 660px;
    max-height: 900px;
    height: calc(100vw * .52);
    overflow: hidden;
}

.hero-copy {
    position: relative;
    padding: 32px 8% 20px;
}

.eyebrow {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    letter-spacing: .1em;
    border-bottom: 1px solid #94aab8;
}

.issue {
    font: 13px Georgia, serif;
    margin: 28px 0 14px;
}

h1 {
    font-family: "Songti TC","Noto Serif CJK TC",serif;
    font-size: clamp(40px,4.8vw,78px);
    line-height: 1.25;
    margin: 0;
}

h1 span {
    display: block;
    font: 400 clamp(18px,1.65vw,28px)/1.8 "PingFang TC","Microsoft JhengHei",sans-serif;
    letter-spacing: .3em;
    margin: 16px 0 2px;
}

.tagline {
    font-size: 16px;
    letter-spacing: .15em;
    margin: 20px 0;
}

.hero-products {
    display: flex;
    align-items: end;
    justify-content: center;
    height: 28%;
    gap: 7px;
    min-height: 145px;
    margin-top: 16px;
}

.hero-products img {
    height: 82%;
    max-width: 25%;
    object-fit: contain;
}

.hero-products img.main-product {
    height: 100%;
    width: 23%;
}

.hero-products img:last-child {
    width: 27%;
    height: 70%;
}

.text-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid currentColor;
    padding: 8px 0;
    letter-spacing: .1em;
    font-size: 14px;
}

.hero-link {
    margin-top: 15px;
    display: flex;
    width: 100%;
}

.hero-person {
    position: relative;
}

.hero-person>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.person-caption {
    position: absolute;
    right: 6%;
    top: 18px;
    font-size: 12px;
    line-height: 1.5;
}

.person-caption strong {
    font-size: 14px;
}

.person-name {
    position: absolute;
    font: clamp(64px,8.3vw,135px)/1 Arial,sans-serif;
    white-space: nowrap;
}

.ribbon {
    padding: 19px 4.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.ribbon>span {
    font: 12px Georgia, serif;
    letter-spacing: .15em;
}

.ribbon a {
    letter-spacing: .16em;
    font-size: 19px;
}

.ribbon b {
    font: 32px Georgia, serif;
    margin: 0 6px;
}

.ribbon a span {
    margin-left: 40px;
}

.section {
    padding: 95px 6%;
    max-width: 1600px;
    margin: auto;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 25px;
}

.kicker {
    font: 12px Arial, sans-serif;
    letter-spacing: .16em;
    margin: 0 0 18px;
}

h2 {
    font-family: "Songti TC","Noto Serif CJK TC",serif;
    font-size: clamp(28px,3vw,46px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em;
    margin: 0;
}

h2 em {
    font-style: normal;
    display: inline;
}

.section-heading>p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
}

.gift-grid {
    display: grid;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.gift {
    border-right: 1px solid var(--line);
}

.gift:first-child {
    padding-left: 0;
}

.gift:last-child {
    border: 0;
    padding-right: 0;
}

.gift-top {
    font-size: 12px;
    letter-spacing: .08em;
}

.threshold {
    font-size: 14px;
}

.threshold b {
    font: 36px Georgia, serif;
    margin: 0 3px;
}

.gift-display,.gift-type {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gift-display img {
    object-fit: contain;
}

.gift-display>span {
    font: 24px Georgia, serif;
    color: #718c9d;
}

.gift-type {
    flex-direction: column;
    align-items: start;
    font: clamp(21px,2.7vw,40px)/1.1 Georgia, serif;
}

.gift-type i {
    font-weight: 400;
}

.gift-type span {
    font: 10px Arial, sans-serif;
    margin-top: 20px;
}

.gift:nth-child(3) .gift-type {
    background: #c9dce8;
}

.gift:nth-child(4) .gift-type {
    background: #244864;
    color: #e8eef2;
}

.gift h3 {
    margin: 0 0 6px;
    font-weight: 500;
}

.gift>p:not(.threshold) {
    font-size: 14px;
    margin: 0;
}

.gift small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.gift-note {
    font-size: 13px;
    color: var(--muted);
    margin: 18px 0 0;
}

.editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.editorial-photo {
    height: 650px;
    overflow: hidden;
}

.editorial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.editorial-copy {
    padding: 90px 13%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.editorial-copy h2 {
    font-size: clamp(32px,3.5vw,54px);
}

.editorial-copy>p:not(.kicker):not(.editorial-sign) {
    color: var(--muted);
    font-size: 16px;
    line-height: 2;
    margin-top: 30px;
}

.editorial-sign {
    font: italic 64px Georgia, serif;
    margin: 28px 0;
}

details {
    border-bottom: 1px solid var(--line);
}

summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 70px 1fr auto 40px;
    align-items: center;
    gap: 22px;
    padding: 24px 0;
}

summary::-webkit-details-marker {
    display: none;
}

.set-no {
    font: 36px Georgia, serif;
}

summary h3 {
    font-size: 22px;
    font-weight: 400;
    margin: 3px 0;
}

summary small {
    font: 11px Arial, sans-serif;
    letter-spacing: .14em;
}

.set-price {
    text-align: right;
    display: flex;
    gap: 22px;
    align-items: center;
}

.set-price del {
    font: 14px Arial, sans-serif;
    color: #74808a;
}

.set-price b {
    font: 30px Georgia, serif;
}

.plus {
    font-size: 24px;
    text-align: right;
}

details[open] .plus {
    transform: rotate(45deg);
}

.set-detail {
    display: flex;
    align-items: center;
    gap: 45px;
    padding: 5px 8% 30px;
}

.set-detail img {
    height: 175px;
    width: 140px;
    object-fit: contain;
}

.set-detail p {
    font-size: 16px;
    line-height: 2;
}

.set-badge {
    font-size: 13px;
    margin-left: auto;
    min-width: 80px;
    text-align: left;
}

.set-badge strong {
    display: block;
    font: 42px Georgia, serif;
}

.set-badge small {
    font: 14px sans-serif;
    margin-left: 3px;
}

.credits {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 50px;
    padding-top: 65px;
    padding-bottom: 65px;
    max-width: none;
}

.credits>a {
    border-left: 1px solid #ffffff40;
    padding-left: 35px;
}

.credits>a>span:first-child {
    font: 11px Arial, sans-serif;
    letter-spacing: .13em;
}

.credits h3 {
    font-weight: 400;
    font-size: 23px;
    margin: 16px 0 0;
}

.credits p b {
    font: 38px Georgia, serif;
}

.credits h2 {
    font-size: 34px;
}

.credits .text-link {
    margin-top: 10px;
}

.category-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 25px;
    overflow-x: auto;
}

.category-tabs button {
    color: var(--muted);
    border: 0;
    background: none;
    padding: 16px 25px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 3px solid transparent;
}

.category-tabs button[aria-selected=true] {
    color: var(--ink);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.product {
    border-bottom: 1px solid var(--line);
}

.product-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.product-visual .product-number {
    font: 80px Georgia, serif;
}

.product-visual small {
    position: absolute;
    bottom: 15px;
    font: 11px Arial, sans-serif;
    letter-spacing: .14em;
}

.product h3 {
    font-size: 17px;
    font-weight: 500;
    margin: 18px 0 4px;
}

.product>span {
    font-size: 13px;
    color: var(--muted);
}

.closing {
    padding: 75px 6%;
    text-align: center;
}

.closing>p {
    font: 12px Arial, sans-serif;
    letter-spacing: .2em;
}

.closing h2 {
    font-size: 44px;
    margin: 22px 0;
}

.closing>span {
    display: block;
    font: 20px Georgia, serif;
    letter-spacing: .1em;
    margin: 28px 0 0;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 5%;
    gap: 25px;
}

footer p {
    font-size: 11px;
    letter-spacing: .1em;
}

footer a {
    font-size: 14px;
}

:focus-visible {
    outline: 2px solid #1680b5;
    outline-offset: 5px;
}

@media(min-width: 1550px) {
    .hero {
        height:820px;
    }

    .hero-products {
        height: 29%;
    }
}

@media(max-width: 1000px) {
    .edition {
        display:none;
    }

    .hero {
        min-height: 600px;
    }

    .hero-copy {
        padding: 25px 7%;
    }

    h1 {
        font-size: 47px;
    }

    .hero-products {
        height: 24%;
        min-height: 130px;
    }

    .person-caption {
        font-size: 11px;
    }

    .person-caption strong {
        font-size: 12px;
    }

    .ribbon>span {
        display: none;
    }

    .ribbon {
        justify-content: center;
    }

    .section {
        padding: 65px 5%;
    }

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

    .gift:nth-child(2) {
        border-right: 0;
    }

    .gift:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .editorial-photo {
        height: 570px;
    }

    .editorial-copy {
        padding: 50px 9%;
    }

    .credits {
        gap: 25px;
    }

    .credits>a {
        padding-left: 22px;
    }

    .product-visual {
        height: 200px;
    }
}

@media(max-width: 650px) {
    header {
        height:70px;
        padding: 0 5%;
    }

    .logo {
        width: 142px;
    }

    nav {
        gap: 15px;
        font-size: 12px;
        letter-spacing: 0;
    }

    nav a:last-child {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr 1fr;
        height: 620px;
        min-height: 0;
        max-height: none;
        position: relative;
        background: #dbe5eb;
    }

    .hero-copy {
        padding: 20px 18px;
        z-index: 2;
        background: transparent;
    }

    .eyebrow {
        white-space: nowrap;
        position: relative;
        z-index: 3;
        padding-bottom: 13px;
    }

    .issue {
        white-space: nowrap;
        margin-top: 24px;
    }

    h1 {
        font-size: 32px;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    h1 span {
        font-size: 15px;
        letter-spacing: .12em;
        margin-top: 14px;
    }

    h1 strong {
        font-size: 32px;
    }

    .tagline {
        font-size: 11px;
        letter-spacing: .015em;
        white-space: nowrap;
        margin-top: 18px;
    }

    .hero-products {
        position: absolute;
        left: 17px;
        bottom: 83px;
        width: 175px;
        height: 150px;
        min-height: 0;
        flex-wrap: wrap;
        gap: 0;
        justify-content: start;
        align-items: end;
    }

    .hero-products img {
        max-width: 45%;
        width: 44%;
        height: 78px;
    }

    .hero-products img.main-product {
        height: 115px;
        width: 37%;
    }

    .hero-products img:nth-child(3) {
        position: absolute;
        left: 87px;
        bottom: 0;
        height: 88px;
        width: 43px;
    }

    .hero-products img:last-child {
        height: 65px;
        width: 90px;
        max-width: 90px;
    }

    .hero-link {
        position: absolute;
        bottom: 22px;
        left: 18px;
        width: calc(200% - 36px);
        font-size: 12px;
        z-index: 4;
    }

    .hero-person {
        margin-top: 68px;
        margin-bottom: 68px;
        background: none;
    }

    .hero-person>img {
        object-fit: cover;
        object-position: 49% 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 130%;
        max-width: none;
        height: 100%;
    }

    .person-caption {
        z-index: 3;
        top: auto;
        bottom: 18px;
        right: 12px;
        font-size: 9px;
    }

    .person-caption strong {
        font-size: 10px;
    }

    .person-name {
        letter-spacing: -.04em;
    }

    .ribbon {
        padding: 16px;
    }

    .ribbon a {
        font-size: 22px;
        letter-spacing: .08em;
    }

    .ribbon b {
        font-size: 34px;
    }

    .ribbon a span {
        margin-left: 15px;
    }

    .section {
        padding: 52px 5%;
    }

    .section-heading {
        display: block;
        margin-bottom: 25px;
    }

    .section-heading>p {
        margin-top: 17px;
        font-size: 13px;
    }

    .section-heading h2 {
        font-size: 29px;
    }

    h2 em {
        display: block;
    }

    .kicker {
        font-size: 10px;
    }

    .threshold b {
        margin: 0 4px;
    }

    .gift-display,.gift-type {
        height: 150px;
    }

    .gift-type {
        padding: 13px;
    }

    .gift-display>span {
        font-size: 18px;
    }

    .gift-note {
        font-size: 12px;
    }

    .editorial {
        grid-template-columns: 1fr;
    }

    .editorial-photo {
        height: 430px;
    }

    .editorial-photo img {
        object-position: 50% 10%;
    }

    .editorial-copy {
        padding: 45px 7%;
    }

    .editorial-copy h2 {
        font-size: 34px;
    }

    .editorial-copy>p:not(.kicker):not(.editorial-sign) {
        margin-top: 22px;
        font-size: 14px;
    }

    .editorial-sign {
        font-size: 52px;
        margin: 18px 0;
    }

    .set-no {
        font-size: 23px;
    }

    summary {
        grid-template-columns: 30px 1fr auto 16px;
        gap: 10px;
        padding: 22px 0;
    }

    summary h3 {
        font-size: 16px;
    }

    summary small {
        font-size: 8px;
        letter-spacing: .07em;
    }

    .set-price {
        display: block;
    }

    .set-price del {
        font-size: 11px;
        display: block;
    }

    .set-price b {
        font-size: 22px;
    }

    .plus {
        font-size: 18px;
    }

    .set-detail {
        padding: 0 0 25px;
    }

    .set-detail img {
        height: 100px;
        width: 68px;
    }

    .set-detail p {
        line-height: 1.9;
    }

    .set-badge {
        font-size: 10px;
        min-width: 46px;
    }

    .set-badge strong {
        font-size: 28px;
    }

    .credits {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .credits>div {
        grid-column: 1/-1;
    }

    .credits h2 br {
        display: none;
    }

    .credits>a {
        padding-left: 16px;
    }

    .credits h3 {
        font-size: 18px;
    }

    .credits>a>span:first-child {
        font-size: 9px;
    }

    .credits p {
        font-size: 14px;
    }

    .credits p b {
        font-size: 28px;
    }

    .credits .text-link {
        font-size: 11px;
    }

    .category-tabs button {
        font-size: 14px;
        padding: 12px 16px;
    }

    .product-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product h3 {
        font-size: 15px;
    }

    .product-visual .product-number {
        font-size: 64px;
    }

    .closing {
        padding: 50px 6%;
    }

    .closing h2 {
        font-size: 34px;
    }

    footer {
        flex-wrap: wrap;
    }

    footer p {
        order: 3;
        width: 100%;
        margin: 0;
        font-size: 10px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Ice-blue editorial direction, informed by the three supplied references. */
:root {
    --ink: #103f66;
    --navy: #153e66;
    --champagne: #aa9161
;}

:is(header) {
    background: #f5fafd;
    border-color: #c8dce9;
}

:is(.hero) {
    background: linear-gradient(112deg,#f2faff 0%,#d8e9f5 49%,#b3c7da 100%);
    position: relative;
    isolation: isolate;
}

:is(.hero-copy) {
    background: transparent;
    z-index: 2;
    padding-left: 10%;
    padding-right: 7%;
}

:is(.eyebrow) {
    border-color: #99b4c8;
}

.eyebrow span:last-child {
    background: #ad9569;
    color: white;
    padding: 4px 13px;
    letter-spacing: .08em;
}

:is(:is(.eyebrow)) {
    align-items: center;
    padding-bottom: 13px;
}

:is(.issue) {
    color: #537796;
    letter-spacing: .28em;
}

:is(h1) {
    font-weight: 400;
    letter-spacing: .1em;
}

h1 strong {
    font-weight: 400;
    color: #174d79;
}

:is(h1 span) {
    font-weight: 300;
}

:is(.tagline) {
    color: #446b86;
}

:is(.hero-person) {
    background: transparent;
    overflow: hidden;
}

:is(.hero-person>img) {
    mask-image: linear-gradient(90deg,transparent 0%,#000 22%);
    object-position: 50% 12%;
}

:is(.person-caption) {
    color: #143853;
}

:is(.person-name) {
    font-family: Georgia,"Times New Roman",serif;
    font-style: italic;
    font-size: 7.3vw;
    letter-spacing: -.055em;
    bottom: 7px;
    left: 6%;
    color: #ffffffc9;
}

:is(.hero-products) {
    border-bottom: 1px solid #ffffffb0;
    padding-bottom: 9px;
}

:is(.hero-products img) {
    filter: drop-shadow(5px 14px 10px #244c6e24);
}

:is(.ribbon) {
    border-top: 1px solid #ffffffb0;
    border-bottom: 1px solid #ffffffa0;
}

:is(.ribbon b) {
    color: #d4ed33;
}

.gifts {
    padding-top: 80px;
}

:is(.gift-grid) {
    border: 0;
    grid-template-columns: repeat(2,1fr);
    gap: 25px;
}

:is(.gift) {
    border: 1px solid #ffffff!important;
    border-radius: 16px;
    display: grid;
    position: relative;
}

.gift-soldout-overlay {
    position: absolute;
    z-index: 20;
    top: 56%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: min(52%,270px);
    aspect-ratio: 1;
    padding: 18px;
    border: 2px solid rgb(255 255 255 / 35%);
    border-radius: 50%;
    box-sizing: border-box;
    color: #fff;
    background: rgb(50 59 68 / 76%);
    box-shadow: 0 8px 22px rgb(30 51 67 / 25%);
    font-family: "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
    letter-spacing: .04em;
    line-height: 1.35;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%,-50%);
}

.gift-soldout-overlay span {
    font-size: clamp(13px,1.35vw,20px);
    font-weight: 600;
}

.gift-soldout-overlay strong {
    margin-top: .18em;
    font-size: clamp(16px,1.8vw,26px);
    font-weight: 800;
}

:is(.gift-top) {
    grid-column: 1/-1;
    padding-bottom: 12px;
    color: #486e8b;
}

.gift-top span:first-child {
    letter-spacing: 0.15em;
}

:is(.threshold) {
    grid-column: 2;
    margin: 20px 0 13px;
    align-self: end;
    white-space: nowrap;
}

:is(.threshold b) {
    font-size: 38px;
    color: #89734b;
}

:is(.gift-display),:is(.gift-type) {
    grid-column: 1;
    grid-row: 2/6;
    height: 205px;
    margin: 18px 0 0;
    background: transparent!important;
    align-self: center;
}

.gift-display {
    position: relative;
}

:is(.gift-display img) {
    height: 190px;
    width: 75%;
    transform: rotate(-5deg);
}

:is(.gift-display>span) {
    display: none;
}

:is(.gift-type) {
    font-size: clamp(24px,2.75vw,40px);
    padding: 15px 0;
    color: #3a6a8a!important;
    border-top: 1px solid #c3ae81;
    border-bottom: 1px solid #c3ae81;
    height: 190px;
}

:is(.gift-type i) {
    color: #8c7857;
}

:is(.gift-type span) {
    font-size: 9px;
    letter-spacing: .11em;
}

:is(.gift h3) {
    font-size: 16px;
}

:is(.gift small) {
    margin-top: 11px;
}

:is(.gift-note) {
    text-align: center;
    margin-top: 25px;
}

:is(.editorial) {
    background: linear-gradient(110deg,#b9cedd,#eef7fb);
}

:is(.editorial-photo img) {
    mask-image: linear-gradient(to right,#000 85%,transparent);
}

.editorial-copy .kicker {
    color: #597e97;
}

:is(.editorial-sign) {
    color: #699bbd;
}

.set-list {
    border-top: 0;
    display: grid;
    gap: 14px;
}

.set-list details {
    background: #ffffffa8;
    border: 1px solid #ffffff;
    border-radius: 12px;
    padding: 0 25px;
    box-shadow: 0 5px 12px #3d6c8e08;
}

:is(.set-no) {
    color: #ae986b;
}

:is(.set-price b) {
    color: #234f77;
}

:is(.set-badge) {
    color: #8f774b;
}

:is(.credits) {
    background: linear-gradient(110deg,#b6d0e8,#dfedf6 60%,#c0d8eb);
    color: var(--ink);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

:is(.credits>a) {
    border-color: #96b5cc;
}

:is(.credits>a>span:first-child) {
    color: #567a94;
}

:is(.category-tabs) {
    border-color: #b7ccdd;
}

:is(.category-tabs button[aria-selected=true]) {
    border-color: #a48b5d;
}

:is(.product-visual .product-number) {
    color: #7fa3be;
}

:is(.closing) {
    background: linear-gradient(120deg,#c4dcef,#eef8fc 50%,#bfd9ec);
    border-top: 1px solid white;
}

:is(.closing>p) {
    color: #60839b;
}

:is(.closing>span) {
    color: #8c7856;
}

:is(footer) {
    background: #f5f9fc;
}

@media(min-width: 1550px) {
    .person-name {
        font-size:115px;
    }
}

@media(max-width: 1000px) {

    .gift h3 {
        font-size: 16px;
    }

    .threshold b {
        font-size: 31px;
    }

    .gift-display img {
        height: 160px;
    }

    .gift-type {
        font-size: 27px;
    }

    .gift-type span {
        font-size: 8px;
    }

    .gift-top {
        font-size: 11px;
    }
}

@media(max-width: 650px) {
    :is(.hero-copy) {
        padding-left:18px;
        padding-right: 18px;
    }

    :is(.eyebrow) {
        width: calc(200% - 4px);
        font-size: 9px;
        gap: 12px;
    }

    .eyebrow span:last-child {
        padding: 3px 8px;
    }

    :is(.issue) {
        font-size: 8px;
        letter-spacing: .08em;
    }

    :is(.hero-person) {
        overflow: visible;
    }

    :is(.hero-person>img) {
        mask-image: linear-gradient(to right,transparent,#000 25%);
    }

    :is(.person-name) {
        font-size: 36px;
        left: -17%;
        bottom: -2px;
    }

    .gift-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gift {
        border-radius: 14px;
    }

    .gift-top {
        font-size: 11px;
    }

    :is(.gift-type) {
        font-size: 29px;
        height: 165px;
    }

    .gift-type span {
        font-size: 8px;
    }

    .gift-display {
        height: 175px;
    }

    .gift-display img {
        height: 170px;
    }

    .threshold {
        margin: 18px 0 10px;
    }

    :is(.threshold b) {
        font-size: 34px;
    }

    :is(.gift-note) {
        text-align: left;
    }

    .gifts {
        padding-top: 50px;
    }

    :is(.editorial-photo img) {
        mask-image: none;
    }

    .set-list {
        gap: 12px;
    }

    .set-list details {
        padding: 0 12px;
    }

    .set-list summary {
        grid-template-columns: 25px 1fr auto 14px;
        gap: 7px;
    }

    :is(.set-detail) {
        gap: 9px;
    }

    :is(.set-detail p) {
        font-size: 11px;
    }
}

/* Campaign structure: four gifts, two stories, five sets, two credits, six categories. */
.gift-stories {
    padding-top: 20px;
}

.gift-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid white;
    border-radius: 16px;
    margin-bottom: 28px;
}

.story-photo {
    position: relative;
    height: 510px;
    background: #d3e0e9;
    overflow: hidden;
}

.story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

.story-photo>span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #173a56aa;
    color: white;
    font-size: 12px;
    padding: 9px 15px;
}

.story-copy {
    padding: 45px 10%;
    align-self: center;
}

.story-copy h3 {
    font-family: "Songti TC","Noto Serif CJK TC",serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
    margin: 15px 0 23px;
}

.story-copy>p:not(.kicker) {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
}

.story-rule {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 20px;
    display: flex;
    gap: 20px;
    align-items: start;
}

.story-rule b {
    color: #947e55;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;
}

.story-rule span {
    font-size: 16px;
}

.story-word {
    font: italic 37px Georgia, serif;
    color: #698da7;
    display: block;
    margin-top: 27px;
}

.reverse .story-photo {
    order: 2;
}

.strap-photo img {
    object-position: center;
}

.set-cards {
    display: grid;
}

.combo-card {
    border: 1px solid white;
    border-radius: 15px;
}

.combo-title {
    align-items: center;
}

.combo-title .kicker {
    margin-bottom: 6px;
}

.combo-discount small {
    margin-left: 5px;
}

.combo-products {
    justify-content: center;
}

.combo-products figure {
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.combo-products img {
    width: 100%;
    height: 175px;
    object-fit: contain;
}

.asset-pending {
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    letter-spacing: .12em;
    width: 100%;
    border: 1px dashed #bdcddb;
}

.combo-products figcaption {
    text-align: center;
    line-height: 1.6;
}

.combo-products figcaption b {
    display: block;
    font-family: Georgia, serif;
    font-weight: 400;
    color: #8c7754;
}

.combo-bottom {
    justify-content: space-between;
    padding-top: 18px;
}

.combo-bottom>span:first-child {
    font-size: 14px;
    letter-spacing: .15em;
}

.combo-bottom>span:last-child {
    display: flex;
    align-items: center;
    gap: 25px;
}

.combo-bottom del {
    font-size: 13px;
    color: var(--muted);
}

.combo-bottom strong {
    font: 34px Georgia, serif;
    color: #c13046;
}

.credit-section {
    padding-top: 20px;
}

.credit-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.credit-pair>a {
    border: 1px solid white;
    background: linear-gradient(115deg,#c4dcee,#eaf5fc);
    border-radius: 15px;
    padding: 40px 9%;
    min-height: 270px;
}

.credit-pair>a:nth-child(2) {
    background: linear-gradient(115deg,#d4e3e9,#f2f8f5);
}

.credit-pair h3 {
    font-size: 25px;
    font-weight: 400;
    margin: 15px 0;
}

.credit-value {
    font-size: 24px;
    min-height: 66px;
    margin: 10px 0;
}

.credit-value b {
    font: 60px Georgia, serif;
}

.category-jumps {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.category-jumps a {
    font-size: 15px;
}

.product-category {
    margin-bottom: 65px;
}

.product-category:last-child {
    margin-bottom: 0;
}

.category-heading {
    display: flex;
    gap: 22px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 17px;
    margin-bottom: 25px;
}

.category-heading>span {
    font: 34px Georgia, serif;
    color: #a58d61;
}

.category-heading h3 {
    font-family: "Songti TC",serif;
    font-size: 30px;
    font-weight: 400;
    margin: 0;
}

.category-heading>p {
    margin-left: auto;
    font: 11px Arial, sans-serif;
    letter-spacing: .14em;
}

.product h4 {
    font-size: 17px;
    font-weight: 500;
}

.product-visual .asset-pending {
    border: 1px dashed #b6c8d7;
}

:is(:is(.closing)) {
    display: none;
}

@media(max-width: 850px) {
    .story-copy {
        padding:30px 8%;
    }

    .story-copy h3 {
        font-size: 29px;
    }

    .story-rule {
        display: block;
    }

    .story-rule span {
        display: block;
        margin-top: 6px;
    }

    .combo-products {
        gap: 15px;
    }

    .combo-card {
        padding: 24px;
    }

    .combo-title h3 {
        font-size: 22px;
    }
}

@media(max-width: 650px) {
    .gift-stories {
        padding-top:10px;
    }

    .gift-story {
        grid-template-columns: 1fr;
    }

    .story-photo {
        height: 350px;
    }

    .reverse .story-photo {
        order: 0;
    }

    .story-copy {
        padding: 30px 7%;
    }

    .story-copy h3 {
        font-size: 29px;
    }

    .story-rule {
        display: flex;
    }

    .story-rule span {
        font-size: 14px;
        margin: 0;
    }

    .story-rule b {
        font-size: 18px;
    }

    .story-word {
        font-size: 32px;
    }

    .combo-card {
        padding: 20px 15px;
    }

    .combo-title {
        gap: 12px;
    }

    .combo-title h3 {
        font-size: 18px;
    }

    .combo-title .kicker {
        font-size: 8px;
    }

    .combo-products {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 15px;
        padding: 24px 0;
    }

    .combo-products figure {
        max-width: none;
    }

    .combo-products img,.asset-pending {
        height: 135px;
    }

    .combo-products figcaption {
        font-size: 12px;
        margin-top: 10px;
    }

    .combo-products figcaption b {
        font-size: 17px;
    }

    .combo-bottom>span:last-child {
        display: block;
        text-align: right;
    }

    .combo-bottom del {
        display: block;
        font-size: 11px;
    }

    .combo-bottom strong {
        font-size: 29px;
    }

    .combo-bottom>span:first-child {
        font-size: 12px;
    }

    .credit-section {
        padding-top: 10px;
    }

    .credit-pair>a {
        padding: 25px 15px;
        min-height: 240px;
    }

    .credit-pair h3 {
        font-size: 18px;
    }

    .credit-pair .kicker {
        font-size: 8px;
    }

    .credit-value {
        font-size: 17px;
        min-height: 75px;
    }

    .credit-value b {
        font-size: 38px;
    }

    .credit-pair .text-link {
        font-size: 11px;
        letter-spacing: 0;
    }

    .category-heading {
        gap: 14px;
        flex-wrap: wrap;
    }

    .category-heading h3 {
        font-size: 26px;
    }

    .category-heading>span {
        font-size: 29px;
    }

    .category-heading>p {
        font-size: 8px;
        letter-spacing: .06em;
    }

    .product-category {
        margin-bottom: 45px;
    }

    .product-visual .asset-pending {
        font-size: 12px;
    }

    .collection {
        padding-top: 20px;
    }
}

/* Sticky navigation, full-image hero, and accessible back-to-top link. */

:is(html) {
    scroll-padding-top: var(--header-offset);
}

body>header nav a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    white-space: nowrap;
}

.hero-image {
    margin: 0;
    padding: 0;
}

.hero-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 6% 4%,#eefaff 0%,transparent 42%),radial-gradient(ellipse at 94% 8%,#8dcbf5 0%,transparent 45%),linear-gradient(180deg,#cfeeff 0%,#abd9f5 55%,#5ba8e8 100%);
}

.hero-image>img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.visually-hidden {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.back-to-top {
    position: fixed;
    right: max(24px,env(safe-area-inset-right));
    bottom: max(24px,env(safe-area-inset-bottom));
    z-index: 1100;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #164d78;
    color: #fff;
    border: 1px solid #ffffffc0;
    box-shadow: 0 4px 15px #16344e30;
    font: 12px/1.3 Arial,sans-serif;
    letter-spacing: .08em;
}

.back-to-top>span:first-child {
    font-size: 20px;
    line-height: 1;
}

.back-to-top:hover {
    background: #27688f;
}

:is(:is(footer)) {
    padding-right: 100px;
}

@media(max-width: 650px) {
    :root {
        --header-offset:125px
    ;}

    body>header {
        height: auto;
        min-height: 105px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 16px 4px;
    }

    body>header .logo {
        width: 142px;
    }

    body>header nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    body>header nav a,body>header nav a:last-child {
        display: inline-flex;
        min-height: 44px;
    }

    .back-to-top {
        width: 52px;
        height: 52px;
        right: max(16px,env(safe-area-inset-right));
        bottom: max(16px,env(safe-area-inset-bottom));
        font-size: 11px;
    }

    :is(footer) {
        padding-right: 80px;
    }
}

/* Keep category navigation on a second sticky row. */
:is(:root) {
    --category-nav-height: 66px;}

:is(.category-jumps) {
    display: flex;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

:is(.category-jumps a) {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

@media(max-width: 650px) {

    .category-jumps a {
        font-size: 14px;
    }
}

/* Center the desktop campaign within a 1000px canvas. */
@media (min-width: 1001px) {
    body>header, body>main, body>footer {
        width:100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    body>footer {
        padding-left: 32px;
    }
}

/* Primary navigation scrolls normally; product categories alone stay at the top. */
:is(:is(:root)) {
    --primary-nav-height: 0px;}

@media(max-width: 650px) {
    :is(:root) {
        --primary-nav-height:0px
    ;}
}

/* The primary navigation spans the full desktop viewport. */
@media (min-width: 1001px) {
    body>header {
        width:100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 4.5%;
        padding-right: 4.5%;
    }
}

/* Full-width primary navigation stays fixed; categories form the second row. */
:is(:is(:is(:root))) {
    --header-offset: calc(var(--primary-nav-height) + var(--category-nav-height) + 12px)
;}

body>header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 3px 16px #123b5712;
}

body>header nav .official-link {
    color: #174d79;
    font-weight: 600;
}

body>header nav .official-link span {
    font-size: 12px;
    margin-left: 3px;
}

/* Right-top quick guide: compact by default, expanded on hover or focus. */
.quick-guide {
    position: fixed;
    z-index: 2100;
    top: 104px;
    right: 0;
    width: 64px;
    min-height: 250px;
    overflow: hidden;
    border: 1px solid #ffffff52;
    border-right: 0;
    border-radius: 28px 0 0 28px;
    background: #132c45eb;
    box-shadow: -8px 10px 28px #102d4930;
    transition: width .28s ease,background-color .28s ease;
}

.quick-guide-toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 18px 0;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.quick-guide-toggle span {
    display: inline-block;
    font: 700 20px/1.2 "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
    letter-spacing: .08em;
    writing-mode: vertical-rl;
}

.quick-guide-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 260px;
    padding: 22px 28px;
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
    transition: opacity .2s ease .04s,transform .28s ease;
}

.quick-guide-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid #ffffff26;
    color: #fff;
    font: 700 20px/1.2 "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
}

.quick-guide-links a:last-child {
    border-bottom: 0;
}

.quick-guide-links a:hover,
.quick-guide-links a:focus-visible {
    color: #9fddff;
}

.quick-guide:hover,
.quick-guide:focus-within,
.quick-guide.is-open {
    width: 260px;
    min-height: 460px;
    background: #142b43f2;
}

.activity-info {
    width: 100%;
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
    scroll-margin-top: calc(var(--header-offset) + 12px);
    padding-right: 0;
    padding-left: 0;
    padding-top: clamp(38px,5vw,72px);
    padding-bottom: clamp(38px,5vw,72px);
}

.activity-info-panel {
    padding: clamp(26px,4vw,54px);
    border: 0;
    border-radius: 24px;
    background: #ffffff78;
    box-shadow: 0 16px 40px #315f7c14;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.activity-info h2 {
    margin: 0 0 22px;
    color: #315f7c;
    font-family: "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
    font-size: clamp(17px,1.35vw,22px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .02em;
}

.activity-info ol {
    margin: 0;
    padding-left: 1.75em;
    color: #476d89;
    font-size: clamp(12px,.85vw,14px);
    font-weight: 400;
    line-height: 1.75;
}

.activity-info li {
    padding-left: .4em;
}

.donghae-faq{width:100%;max-width:1600px;margin:clamp(38px,5vw,72px) auto 0;padding:0;scroll-margin-top:calc(var(--header-offset) + 12px)}
.donghae-faq-panel{padding:clamp(26px,4vw,54px);border:1px solid #ffffff78;border-radius:24px;background:#ffffff70;box-shadow:0 16px 40px #315f7c14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.donghae-faq .kicker{margin:0 0 6px;color:#5f91af}.donghae-faq h2{margin:0 0 clamp(18px,2.2vw,28px);color:#315f7c;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:clamp(24px,2.2vw,34px);font-weight:700;line-height:1.3;letter-spacing:.025em;text-align:left}
.faq-list{display:grid;gap:12px}.faq-item{overflow:hidden;border:1px solid #6f9db94d;border-radius:16px;background:#edf8fc91;transition:border-color 260ms ease,background-color 260ms ease,box-shadow 260ms ease}.faq-item.is-open{border-color:#5b95b8a8;background:#e6f5faad;box-shadow:0 10px 24px #315f7c12}.faq-item h3{margin:0}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:18px 22px;border:0;color:#315f7c;background:transparent;font:inherit;font-size:clamp(15px,1.2vw,19px);font-weight:600;line-height:1.5;letter-spacing:.01em;text-align:left;cursor:pointer}.faq-question:hover,.faq-question:focus-visible{background:#ffffff4d}.faq-question:focus-visible{outline:3px solid #75b2d399;outline-offset:-3px}
.faq-icon{position:relative;flex:0 0 22px;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%}.faq-icon::before,.faq-icon::after{position:absolute;top:50%;left:50%;width:10px;height:1.5px;border-radius:2px;background:currentColor;content:"";transform:translate(-50%,-50%);transition:transform 260ms ease}.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}.faq-question[aria-expanded="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-answer{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 260ms ease,opacity 260ms ease,visibility 0s linear 260ms}.faq-answer>div{min-height:0;overflow:hidden;padding:0 22px}.faq-item.is-open .faq-answer{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows 260ms ease,opacity 260ms ease}.faq-item.is-open .faq-answer>div{padding-bottom:21px}.faq-answer p{margin:0;color:#476d89;font-size:clamp(14px,1vw,16px);font-weight:400;line-height:1.75;text-align:left}.faq-answer strong{color:#d7658d;font-weight:800}.faq-answer p+p{margin-top:10px}.faq-answer a{color:#277eae;font-weight:600;text-decoration-thickness:1px;text-underline-offset:.16em}

.quick-guide:hover .quick-guide-toggle,
.quick-guide:focus-within .quick-guide-toggle,
.quick-guide.is-open .quick-guide-toggle {
    pointer-events: none;
    opacity: 0;
}

.quick-guide:hover .quick-guide-links,
.quick-guide:focus-within .quick-guide-links,
.quick-guide.is-open .quick-guide-links {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

@media(min-width:651px) {
    body>header nav {
        display: none;
    }
}

@media(max-width:650px) {
    .quick-guide {
        display: none;
    }

    .activity-info {
        width: 100%;
        padding: 28px 5%;
    }

    .donghae-faq{width:100%;margin-top:28px;padding:0 5%}.donghae-faq-panel{padding:24px 20px;border-radius:18px}.donghae-faq .kicker{font-size:11px}.donghae-faq h2{margin-bottom:18px;font-size:24px}.faq-list{gap:10px}.faq-item{border-radius:13px}.faq-question{gap:14px;padding:15px 16px;font-size:15px}.faq-icon{flex-basis:20px;width:20px;height:20px}.faq-answer>div{padding:0 16px}.faq-item.is-open .faq-answer>div{padding-bottom:16px}.faq-answer p{font-size:13px;line-height:1.72}

    .activity-info-panel {
        padding: 24px 20px;
        border-radius: 18px;
        background: #ffffff78;
    }

    .activity-info h2 {
        margin-bottom: 16px;
        font-size: 17px;
        font-weight: 500;
    }

    .activity-info ol {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.7;
    }
}

/* Desktop uses the right-side quick guide in place of the white top strip. */
@media(min-width:651px) {
    :root {
        --primary-nav-height: 0px;
        --header-offset: calc(var(--category-nav-height) + 12px)
    ;}

    body>header {
        display: none;
    }

    .category-jumps,
    .category-jumps.is-fixed {
        top: 0!important;
    }

    .quick-guide {
        top: 12px;
        width: 54px;
        min-height: 206px;
        border-radius: 24px 0 0 24px;
    }

    .quick-guide-toggle span {
        font-size: 17px;
    }

    .quick-guide-links {
        width: 230px;
        padding: 18px 24px;
    }

    .quick-guide-links a,
    .quick-guide-activity {
        min-height: 47px;
        font-size: 18px;
    }

    .quick-guide:hover,
    .quick-guide:focus-within,
    .quick-guide.is-open {
        width: 230px;
        min-height: 412px;
    }
}

@media(max-width: 650px) {
    :is(body>header nav) {
        gap:clamp(10px,3.5vw,18px);
    }

    :is(body>header nav a),:is(body>header nav a:last-child) {
        font-size: 13px;
    }
}

/* Transparent, centered company footer. */
body>footer {
    display: block;
    background: transparent;
    text-align: center;
    padding: 42px 20px;
}

body>footer .footer-official-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    max-width: calc(100% - 32px);
    margin: 0 auto 28px;
    padding: 12px 56px;
    border: 2px solid #164d78;
    border-radius: 999px;
    background: linear-gradient(180deg,#2e75a4 0%,#164d78 56%,#0d385d 100%);
    box-shadow: inset 0 0 0 3px #eef8ff,inset 0 0 0 5px #79afd0,0 5px 14px #123f6638;
    color: #fff;
    font-family: "Noto Serif TC","Songti TC",serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .12em;
    text-indent: .12em;
    text-decoration: none;
    text-shadow: 0 1px 2px #0a294c80;
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
}

body>footer .footer-official-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg,#3b86b5 0%,#1d5d89 56%,#124267 100%);
    box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 5px #92c5df,0 8px 18px #123f6648;
}

body>footer .footer-official-button:focus-visible {
    outline: 3px solid #68a8cf;
    outline-offset: 4px;
}

body>footer .footer-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: .03em;
}

body>footer .footer-copy span:last-child {
    font-family: Arial,sans-serif;
    font-size: 11px;
    letter-spacing: .04em;
}

/* Replaceable 1:1 gift artwork sits on the left of every gift card. */
.gift-placeholder {
    grid-column: 1;
    grid-row: 2/6;
    width: 100%;
    aspect-ratio: 1/1;
    margin: 18px 0 0;
    align-self: start;
    overflow: hidden;
    border: 1px solid #b8cedd;
    border-radius: 10px;
    background: #eaf3f8;
}

.gift-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}

/* A restrained lift, blue glow, and light sweep for the four gift cards. */
:is(:is(.gift)) {
    isolation: isolate;
    transition: box-shadow .35s ease,border-color .35s ease,transform .35s ease;
    will-change: transform;
}

.gift::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

@keyframes gift-bounce {
    0% {
        transform: translateY(0) scale(1);
    }

    48% {
        transform: translateY(-9px) scale(1.012);
    }

    72% {
        transform: translateY(-4px) scale(1.006);
    }

    100% {
        transform: translateY(-6px) scale(1.008);
    }
}

@media(hover: hover) {
    .gift:hover {
        animation:gift-bounce .55s cubic-bezier(.2,.72,.25,1) both;
        border-color: #a7cce4!important;
        box-shadow: 0 16px 32px #2578ac2b,0 0 24px #8ed3ff42,inset 0 0 0 1px #ffffffc9;
    }

    .gift:hover::after {
        animation: gift-shimmer .85s ease-out;
    }

    .gift:hover .gift-placeholder {
        border-color: #85badb;
        box-shadow: 0 0 20px #72bce650;
    }

    .gift:hover .gift-placeholder img {
        transform: scale(1.035);
        filter: brightness(1.07);
    }
}

@media(prefers-reduced-motion:reduce) {
    .gift,.gift-placeholder img {
        transition: none;
    }

    .gift:hover,.gift:hover::after {
        animation: none;
    }

    .gift:hover {
        transform: none;
    }
}

@media(max-width: 650px) {
    body>footer {
        padding:34px 18px 90px;
    }

    body>footer .footer-official-button {
        min-width: 250px;
        margin-bottom: 24px;
        padding: 11px 38px;
        font-size: 21px;
    }

    body>footer .footer-copy {
        font-size: 12px;
    }

    body>footer .footer-copy span:last-child {
        font-size: 10px;
    }
}

/* Two-column recommendation cards with a fully clickable purchase area. */

:is(.combo-card) {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px;
    color: var(--ink);
    transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.combo-link {
    cursor: pointer;
}

:is(.combo-title) {
    gap: 14px;
}

.combo-discount {
    font-size: 31px;
}

:is(.combo-products) {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: start;
    gap: 14px;
    padding: 24px 0;
    flex: 1;
}

.combo-products:has(figure:nth-child(4)) {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

:is(.combo-products figure) {
    max-width: none;
    min-width: 0;
}

.combo-products img,.combo-products .asset-pending {
    height: 122px;
}

:is(.combo-products figcaption) {
    font-size: 12px;
    margin-top: 10px;
}

:is(.combo-products figcaption b) {
    font-size: 17px;
}

.combo-bottom .combo-price strong {
    font-size: 29px;
    line-height: 1;
}

.combo-bottom>span.combo-buy,.combo-feature .combo-buy {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    margin-top: 4px;
    padding: 14px 18px;
    border-radius: 999px;
    background: linear-gradient(100deg,#174e79,#2c79a7);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .14em;
    text-align: center;
    box-shadow: 0 5px 12px #164d7822;
    transition: background .28s ease,color .28s ease,box-shadow .28s ease,transform .28s ease;
}

.combo-bottom .combo-buy>span,.combo-feature .combo-buy>span {
    font-size: 21px;
    line-height: 1;
    transform: translateY(-1px);
}

.combo-link:hover {
    transform: translateY(-5px);
    border-color: #a8cde4;
    box-shadow: 0 16px 32px #245f8426,0 0 22px #8ed3ff2e;
}

.combo-link:hover .combo-buy {
    background: linear-gradient(100deg,#89734b,#b69a62);
    box-shadow: 0 9px 22px #89734b4a;
    transform: translateY(-2px);
}

.combo-link:focus-visible {
    outline: 3px solid #69a9d0;
    outline-offset: 4px;
}

.combo-feature {
    position: relative;
    min-height: 510px;
    padding: 0;
    overflow: hidden;
    background: #aeb9c9;
}

.combo-feature>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
}

.combo-feature-overlay {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 26px 24px;
    background: linear-gradient(0deg,#102f4bea 0%,#153c5fa8 58%,transparent 100%);
    color: #fff;
}

.combo-feature-overlay>small {
    display: block;
    margin-bottom: 9px;
    font: 10px Arial,sans-serif;
    letter-spacing: .18em;
}

.combo-feature-overlay>strong {
    display: block;
    margin-bottom: 18px;
    font: 500 27px/1.45 "Songti TC","Noto Serif CJK TC",serif;
    letter-spacing: .08em;
}

@media(max-width: 760px) {
    .set-cards {
        grid-template-columns:1fr;
        gap: 18px;
    }

    .combo-card {
        padding: 20px 15px;
    }

    .combo-products {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 18px 12px;
    }

    .combo-products:has(figure:nth-child(4)) {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .combo-products img,.combo-products .asset-pending {
        height: 135px;
    }

    .combo-bottom .combo-price {
        display: block;
    }

    .combo-feature {
        min-height: 560px;
        padding: 0;
    }

    .combo-bottom>span.combo-buy,.combo-feature .combo-buy {
        padding: 13px 16px;
        font-size: 16px;
    }

    .combo-bottom .combo-buy>span,.combo-feature .combo-buy>span {
        font-size: 20px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .combo-card {
        transition: none;
    }

    .combo-link:hover {
        transform: none;
    }
}

/* Editorial category rail: numbered capsules replace the rigid boxed menu. */
:is(:is(.category-jumps)) {
    justify-content: center;
    gap: 10px;
    margin-bottom: 55px;
    padding: 13px 12px;
    border: 0;
    scrollbar-color: #6f9fbd transparent;
    scrollbar-width: thin;
}

:is(:is(.category-jumps a)) {
    gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid #c5dbe7;
    border-radius: 999px;
    background: linear-gradient(145deg,#ffffffed,#edf6fae8);
    box-shadow: inset 0 1px 0 #fff,0 3px 10px #245f8410;
    color: #16466c;
    font-weight: 600;
    letter-spacing: .08em;
    transition: transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.category-jumps a::before {
    font: italic 11px/1 Georgia,"Times New Roman",serif;
    color: #7898ad;
    letter-spacing: .04em;
}

.category-jumps a:nth-child(1)::before {
    content: "01";
}

.category-jumps a:nth-child(2)::before {
    content: "02";
}

.category-jumps a:nth-child(3)::before {
    content: "03";
}

.category-jumps a:nth-child(4)::before {
    content: "04";
}

.category-jumps a:nth-child(5)::before {
    content: "05";
}

.category-jumps a:nth-child(6)::before {
    content: "06";
}

.category-jumps a:hover {
    transform: translateY(-2px);
    border-color: #5d96ba;
    background: linear-gradient(110deg,#174d79,#347fa9);
    box-shadow: 0 7px 16px #174d792b;
    color: #fff;
}

.category-jumps a:hover::before {
    color: #bde5f8;
}

.category-jumps a:focus-visible {
    outline: 3px solid #76b3d4;
    outline-offset: 2px;
}

@media(max-width: 650px) {
    .category-jumps {
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 35px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .category-jumps a,.category-jumps a:last-child {
        display: inline-flex;
        min-height: 44px;
        font-size: 14px;
    }

    .category-jumps::-webkit-scrollbar {
        height: 4px;
    }

    .category-jumps::-webkit-scrollbar-track {
        background: transparent;
    }

    .category-jumps::-webkit-scrollbar-thumb {
        background: #6f9fbd;
        border-radius: 99px;
    }
}

/* Square, centered product cards with editable price fields. */
:is(.product-grid) {
    gap: 28px 18px;
}

:is(.product) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 28px;
    text-align: center;
}

:is(.product-visual) {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    padding: 8%;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 18px;
    box-shadow: 0 6px 16px #285f8110;
}

.product-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

:is(.product-visual .asset-pending) {
    width: 100%;
    height: 100%;
    border-radius: 11px;
}

:is(.product h4) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin: 15px auto 8px;
    text-align: center;
    line-height: 1.55;
}

.product-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 112px;
    margin-top: auto;
    text-align: center;
}

.product-pricing p {
    margin: 0;
}

.product-msrp {
    color: #667887;
    font-size: 13px;
}

.product-msrp del {
    margin-left: 3px;
    color: #7e858b;
    text-decoration-thickness: 1px;
}

.product-sale {
    margin-top: 3px!important;
    color: #c13046;
    font-size: 15px;
}

.product-sale strong {
    font: 30px/1.2 Georgia,"Times New Roman",serif;
    font-weight: 400;
}

.product-discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    margin-top: 8px;
    padding: 3px 14px;
    border: 2px solid #d97b9c;
    border-radius: 999px;
    color: #cf668a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.product-pricing.is-pending .product-sale,.product-pricing.is-pending .product-discount {
    color: #c13046;
}

.product-pricing.is-pending .product-discount {
    border-color: #d97b9c;
}

.product-link {
    cursor: pointer;
    transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.product-link:hover {
    transform: translateY(-4px);
    border-color: #74a9c9;
    box-shadow: 0 12px 24px #174d7918;
}

.product-link:hover .product-visual {
    border-color: #b9d9ea;
    box-shadow: 0 10px 24px #347fa924;
}

.product-link:focus-visible {
    outline: 3px solid #67a8cf;
    outline-offset: 4px;
}

@media(max-width: 650px) {
    :is(.product-grid) {
        gap:24px 12px;
    }

    .product {
        padding-bottom: 23px;
    }

    .product-visual {
        height: auto;
        padding: 7%;
        border-radius: 14px;
    }

    .product h4 {
        min-height: 48px;
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.45;
    }

    .product-pricing {
        min-height: 98px;
    }

    .product-msrp {
        font-size: 11px;
    }

    .product-sale {
        font-size: 12px;
    }

    .product-sale strong {
        font-size: 23px;
    }

    .product-discount {
        min-width: 66px;
        padding: 2px 10px;
        font-size: 11px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .product-link {
        transition: none;
    }

    .product-link:hover {
        transform: none;
    }
}

/* Subtle blue-and-champagne movement gives the page a polished editorial depth. */
:is(body) {
    animation: page-lustre 20s ease-in-out infinite alternate;
}

@keyframes page-lustre {
    0% {
        background-position: 0% 0%,100% 0%,45% 100%,0 0;
    }

    50% {
        background-position: 9% 6%,91% 9%,54% 91%,0 0;
    }

    100% {
        background-position: 3% 12%,96% 4%,48% 84%,0 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    body {
        animation: none;
    }
}

/* Use a consistent Traditional Chinese sans-serif family throughout the campaign. */
h1,h2,.story-copy h3,.category-heading h3,body>footer .footer-official-button,.combo-feature-overlay>strong {
    font-family: "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}

/* Metallic-gold discount seals make every recommended set easier to scan. */
:is(.combo-discount) {
    isolation: isolate;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.combo-discount::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px;
    border: 1px solid #fff4c899;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 23%,#ffffffa8 0%,transparent 34%);
}

@media(max-width: 650px) {
    .combo-discount {
        flex-basis:64px;
        width: 64px;
        height: 64px;
        font-size: 25px;
        gap: 2px;
    }

    .combo-discount::after {
        inset: 6px;
    }

    .combo-discount small {
        margin-top: 6px;
        font-size: 12px;
    }
}

/* Premium member-card treatment for the two shopping-credit offers. */
.credit-pair>a.member-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 26px 30px 28px;
    overflow: hidden;
    border: 1px solid #e9d8a3;
    border-radius: 20px;
    background: linear-gradient(135deg,#0c2f4d 0%,#174f78 53%,#0f304c 100%);
    box-shadow: inset 0 0 0 1px #ffffff2e,inset 0 0 40px #7fc5ee17,0 16px 34px #123e5e25;
    color: #fff;
    transition: transform .28s ease,box-shadow .28s ease;
}

.credit-pair>a.member-card-friends {
    background: linear-gradient(135deg,#153852 0%,#426f89 52%,#17364c 100%);
}

.member-card::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: radial-gradient(circle at 86% 12%,#f9e8aa30 0 2%,transparent 2.5%),repeating-radial-gradient(circle at 92% 8%,transparent 0 20px,#ffffff0c 21px 22px),linear-gradient(115deg,transparent 0 53%,#fff1b90d 53% 54%,transparent 54% 100%);
}

.member-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -35%;
    right: -12%;
    width: 190px;
    height: 190px;
    border: 1px solid #e8d59b38;
    border-radius: 50%;
    box-shadow: 0 0 0 24px #ffffff08,0 0 0 48px #d6bd7210;
}

.member-card-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.member-brand {
    color: #f3dfaa;
    font: 600 10px/1 Arial,sans-serif;
    letter-spacing: .2em;
}

.member-chip {
    position: relative;
    width: 38px;
    height: 27px;
    border: 1px solid #8e6c2e;
    border-radius: 6px;
    background: linear-gradient(135deg,#fff1b8,#c89e4e 48%,#f4d98c 49%,#9d762f);
    box-shadow: inset 0 0 0 2px #f9e8b074;
}

.member-chip::before,.member-chip::after {
    content: "";
    position: absolute;
    background: #8e6c2e80;
}

.member-chip::before {
    left: 12px;
    top: 0;
    width: 1px;
    height: 100%;
}

.member-chip::after {
    left: 0;
    top: 13px;
    width: 100%;
    height: 1px;
}

.member-card .kicker {
    margin: 0 0 5px;
    color: #b9d7e9;
    font-size: 9px;
    letter-spacing: .18em;
}

.credit-pair>a.member-card h3 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .06em;
}

.member-lead {
    margin: 4px 0 -3px;
    color: #d6e8f2;
    font-size: 15px;
    letter-spacing: .12em;
}

.member-offer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 10px 0 18px;
    color: #d6e8f2;
    font-size: 14px;
    letter-spacing: .08em;
}

.member-offer strong {
    color: #f3d788;
    font: 700 54px/1 Georgia,"Times New Roman",serif;
    letter-spacing: -.03em;
    text-shadow: 0 2px 12px #081f3380;
}

.member-offer strong small {
    margin-right: 4px;
    font: 700 17px/1 Arial,sans-serif;
    letter-spacing: 0;
}

.member-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 11px 15px;
    border: 1px solid #f0d99380;
    border-radius: 999px;
    background: #ffffff10;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    box-shadow: inset 0 1px 0 #ffffff24;
}

.member-cta>span {
    color: #f3d788;
    font-size: 17px;
}

@media(hover: hover) {
    .credit-pair>a.member-card:hover {
        transform:translateY(-5px);
        box-shadow: inset 0 0 0 1px #ffffff36,inset 0 0 48px #8cd2fa20,0 20px 42px #123e5e38;
    }

    .credit-pair>a.member-card:hover .member-cta {
        background: #ffffff1c;
    }
}

@media(max-width: 650px) {
    .credit-pair {
        grid-template-columns:1fr;
        gap: 16px;
    }

    .credit-pair>a.member-card {
        min-height: 300px;
        padding: 23px 24px 25px;
    }

    .member-card-top {
        margin-bottom: 23px;
    }

    .credit-pair>a.member-card h3 {
        font-size: 21px;
    }

    .member-offer strong {
        font-size: 49px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .credit-pair>a.member-card {
        transition: none;
    }

    .credit-pair>a.member-card:hover {
        transform: none;
    }
}

/* Reference refinements: LINE green, full-bleed ribbon, opaque sticky rail, tap hand. */
.credit-pair>a.member-card-line {
    border-color: #9af0b8;
    background: linear-gradient(135deg,#034b2b 0%,#06c755 54%,#009a43 100%);
    box-shadow: inset 0 0 0 1px #ffffff48,inset 0 0 48px #d9ffe52e,0 16px 34px #034b2b30;
}

.member-card-line::before {
    background: radial-gradient(circle at 86% 12%,#ffffff36 0 2%,transparent 2.5%),repeating-radial-gradient(circle at 92% 8%,transparent 0 20px,#ffffff16 21px 22px),linear-gradient(115deg,transparent 0 53%,#ffffff16 53% 54%,transparent 54% 100%);
}

.member-card-line .member-brand,.member-card-line .member-offer strong,.member-card-line .member-offer strong small,.member-card-line .member-cta>span {
    color: #fff;
}

.member-card-line .member-card-top+.kicker,.member-card-line .member-offer {
    color: #eafff1;
}

.member-card-line .member-chip {
    border-color: #d9ffe5;
    background: linear-gradient(135deg,#fff 0%,#dfffea 48%,#fff 49%,#b9efcb 100%);
    box-shadow: inset 0 0 0 2px #ffffff96;
}

.member-card-line .member-chip::before,.member-card-line .member-chip::after {
    background: #039b45a8;
}

.member-card-line .member-cta {
    border-color: #ffffffb0;
    background: #034b2b59;
}

@media(hover: hover) {
    .credit-pair>a.member-card-line:hover {
        box-shadow:inset 0 0 0 1px #ffffff5c,inset 0 0 56px #e0ffe83d,0 20px 42px #034b2b42;
    }
}

:is(:is(.ribbon)) {
    position: relative;
    isolation: isolate;
    background: transparent;
}

.ribbon::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(105deg,#99c1e4 0%,#447fb5 52%,#234e7d 100%);
    border-top: 1px solid #ffffffb0;
    border-bottom: 1px solid #ffffffa0;
}

:is(:is(:is(.category-jumps))) {
    isolation: isolate;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.category-jumps.is-stuck {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.category-jumps.is-stuck::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(180deg,#fffffffa 0%,#f7fbfdf5 62%,#e8f3f9f2 100%);
    border-top: 1px solid #c9deea;
    border-bottom: 1px solid #c9deea;
    box-shadow: 0 7px 18px #143f5c1a;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media(max-width: 650px) {
    :is(.category-jumps) {
        background:linear-gradient(180deg,#fffffffa 0%,#f7fbfdf5 62%,#e8f3f9f2 100%);
        border-color: #c9deea;
        box-shadow: 0 7px 18px #143f5c1a;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .category-jumps.is-stuck::after {
        display: none;
    }
}

/* Desktop stays fixed; mobile uses one swipeable row for all six categories. */
:is(:is(:is(:is(.category-jumps)))) {
    overflow-x: visible;
    overscroll-behavior-x: auto;
}

@media(max-width: 650px) {
    :is(:is(.category-jumps)) {
        display:grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: start;
        gap: 10px;
        width: 100vw;
        padding: 10px 64px 10px max(18px,5vw);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: max(18px,5vw);
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }

    :is(.category-jumps a),:is(.category-jumps a:last-child) {
        width: auto;
        min-width: max-content;
        justify-content: center;
        padding: 0 15px;
        scroll-snap-align: start;
    }

    :is(.category-jumps)::-webkit-scrollbar {
        display: none;
    }
}

/* Layered campaign hero from the supplied desktop and mobile artwork. */
:is(.hero-image) {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #c9e9fd;
}

@media(min-width: 1001px) {
    .hero-image {
        width:100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

@media(min-width: 1600px) {
    .hero-image {
        aspect-ratio: 2.36/1;
    }
}

@media(min-width: 651px) {
    .hero-image {
        height: calc(100svh - 74px);
        min-height: 0;
        aspect-ratio: auto;
    }

    .ribbon {
        box-sizing: border-box;
        height: 74px;
        min-height: 74px;
    }
}

:is(.hero-image)::before {
    display: none;
}

.hero-image>.hero-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: center;
}

.hero-image>.hero-date {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 22%;
    height: auto;
    pointer-events: none;
}

.hero-stage {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 64/25;
    transform: translate(-50%,-50%);
    pointer-events: none;
}

@media(min-width: 651px) {
    .hero-stage {
        width: auto;
        height: min(100%,39.0625vw);
    }
}

.hero-layer {
    position: absolute;
    will-change: transform;
    transform: translate3d(var(--hero-move-x,0),var(--hero-move-y,0),0) rotate(var(--hero-tilt,0deg));
    transition: transform .65s cubic-bezier(.2,.75,.25,1);
    pointer-events: none;
}

.hero-layer img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px #245c8b16);
}

.hero-title-layer {
    z-index: 3;
    top: 9%;
    left: 20%;
    width: 37%;
}

.hero-title-layer img {
    filter: drop-shadow(0 10px 16px #21699c10);
}

.hero-person-layer {
    z-index: 6;
    right: 10%;
    bottom: -64%;
    width: 42%;
}

.hero-person-layer img {
    filter: drop-shadow(18px 20px 26px #285d8724);
}

.hero-product-layer {
    z-index: 5;
    left: 15.4%;
    bottom: -1.5%;
    width: 36%;
}

.hero-product-layer img {
    filter: drop-shadow(8px 18px 18px #174b742b);
}

.hero-image>.hero-angle {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    width: 50%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.hero-image>.hero-mobile {
    display: none;
}

@media(max-width: 650px) {
    .hero-image {
        height:auto;
        aspect-ratio: 1/1;
        background: #c8e9ff;
    }

    .hero-image>.hero-bg,.hero-image>.hero-date,.hero-image>.hero-angle,.hero-layer {
        display: none;
    }

    .hero-stage {
        display: none;
    }

    .hero-image>.hero-mobile {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        max-width: none;
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-layer {
        transition: none!important;
        transform: none!important;
    }
}

/* Gift threshold prices: requested brown accent. */
.gift .threshold b {
    color: #89734b!important;
}

/* Gift image zoom and lightbox. */
.gift-placeholder.gift-zoom {
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: zoom-in;
    color: inherit;
    font: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.gift-placeholder.gift-zoom img {
    transition: transform .38s cubic-bezier(.2,.75,.25,1),filter .38s ease;
}

.gift-zoom-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    min-width: 104px;
    padding: 7px 15px;
    border: 1px solid #ffffffa8;
    border-radius: 999px;
    background: #173f60d9;
    box-shadow: 0 8px 24px #173f6038;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    transform: translate(-50%,10px);
    transition: opacity .28s ease,transform .28s ease;
    pointer-events: none;
}

.gift-placeholder.gift-zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,#fff0 50%,#fff7 100%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.gift-placeholder.gift-zoom:hover img,.gift-placeholder.gift-zoom:focus-visible img {
    transform: scale(1.055);
    filter: brightness(1.04);
}

.gift-placeholder.gift-zoom:hover .gift-zoom-hint,.gift-placeholder.gift-zoom:focus-visible .gift-zoom-hint {
    opacity: 1;
    transform: translate(-50%,0);
}

.gift-placeholder.gift-zoom:hover::after,.gift-placeholder.gift-zoom:focus-visible::after {
    opacity: 1;
}

.gift-placeholder.gift-zoom:focus {
    outline: none;
}

.gift-placeholder.gift-zoom:focus-visible {
    outline: none;
    box-shadow: 0 0 18px #72bce650;
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(20px,5vw,64px);
    background: #071d2dd9;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity .22s ease;
}

.image-lightbox.is-open {
    opacity: 1;
}

.image-lightbox-image {
    display: block;
    max-width: min(88vw,920px);
    max-height: 82vh;
    width: auto;
    height: auto;
    border: 1px solid #ffffffb8;
    border-radius: 20px;
    background: #edf7fc;
    box-shadow: 0 30px 80px #00121f73;
    cursor: zoom-out;
    transform: scale(.94);
    transition: transform .28s cubic-bezier(.2,.75,.25,1);
}

.image-lightbox.is-open .image-lightbox-image {
    transform: scale(1);
}

.image-lightbox-close {
    position: fixed;
    top: max(18px,3vw);
    right: max(18px,3vw);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 1px solid #ffffff80;
    border-radius: 50%;
    background: #173f60e8;
    color: #fff;
    font: 300 34px/1 Arial,sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 28px #00121f4d;
}

.image-lightbox-close:hover {
    background: #89734b;
}

body.lightbox-open {
    overflow: hidden;
}

@media(max-width: 650px) {
    .gift:has(.gift-zoom) {
        cursor: zoom-in;
        touch-action: manipulation;
    }

    .gift-zoom-hint {
        display: block;
        min-width: 128px;
        opacity: 0;
        transform: translate(-50%,10px);
    }

    .gift-zoom-hint::before {
        content: "☝ ";
        letter-spacing: 0;
    }

    .gift.is-in-view .gift-zoom-hint {
        opacity: 1;
        transform: translate(-50%,0);
        animation: gift-tap-hint 1.8s ease-in-out infinite;
    }

    .image-lightbox {
        padding: 18px;
    }

    .image-lightbox-image {
        max-width: 94vw;
        max-height: 78vh;
        border-radius: 14px;
    }

    .image-lightbox-close {
        top: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
    }
}

@keyframes gift-tap-hint {
    0%,100% { transform: translate(-50%,0) scale(1); }
    50% { transform: translate(-50%,-3px) scale(1.035); }
}

@media(prefers-reduced-motion:reduce) {
    .gift-placeholder.gift-zoom img,.gift-zoom-hint,.image-lightbox,.image-lightbox-image {
        transition: none;
    }
}

/* Detailed gift copy supplied for the two collector stories. */
.gift-story-detailed .story-photo {
    height: 100%;
    min-height: 610px;
}

.gift-story-detailed .story-copy {
    padding-top: 38px;
    padding-bottom: 38px;
}

.gift-story-detailed .story-copy h3 {
    font-size: clamp(23px,2.15vw,24px);
    line-height: 1.45;
    margin-bottom: 18px;
}

.gift-story-detailed .story-copy>p:not(.kicker) {
    margin: 14px 0;
    font-size: 13px;
    line-height: 1.82;
}

.gift-story-detailed .story-copy .story-note {
    color: #355f7d;
    font-weight: 600;
}

.gift-story-detailed .story-copy .story-specs {
    padding-top: 12px;
    border-top: 1px solid #b8cedc;
    color: #173f60;
    font-weight: 600;
}

.gift-story-detailed .story-rule {
    align-items: center;
}

.gift-story-detailed .story-threshold {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: #89734b;
    font-family: "PingFang TC","Microsoft JhengHei",sans-serif;
}

.gift-story-detailed .story-threshold>span {
    font-size: 17px;
    font-weight: 500;
}

.gift-story-detailed .story-threshold>strong {
    font: 400 clamp(34px,3vw,47px)/1 Georgia,"Times New Roman",serif;
    letter-spacing: -.025em;
}

.gift-story-detailed .story-word {
    margin-top: 18px;
    font-size: 32px;
}

.gift-story-8500 .story-photo-8500 {
    background: linear-gradient(145deg,#f8fbff,#dceefa);
}

.gift-story-8500 .story-photo-8500 img {
    object-fit: contain;
    object-position: center;
    padding: 6%;
}

.gift-story-8500 .story-copy h3 {
    font-size: clamp(21px,1.85vw,26px);
}

.gift-story-8500 .story-copy>p:not(.kicker) {
    line-height: 1.76;
}

.gift-story-8500 .story-word {
    font-size: 29px;
}

@media(max-width: 650px) {
    .gift-story-detailed .story-photo {
        height:auto;
        min-height: 0;
    }

    .gift-story-detailed .story-photo img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .gift-story-detailed .story-copy {
        padding-top: 28px;
        padding-bottom: 30px;
    }

    .gift-story-detailed .story-copy h3 {
        font-size: 23px;
    }

    .gift-story-detailed .story-copy>p:not(.kicker) {
        font-size: 13px;
        line-height: 1.75;
    }

    .gift-story-detailed .story-threshold>strong {
        font-size: 35px;
    }

    .gift-story-detailed .story-word {
        font-size: 29px;
    }
    .gift-story-8500 .story-photo-8500 {
        height:auto;
    }

    .gift-story-8500 .story-photo-8500 img {
        padding: 4%;
    }

    .gift-story-8500 .story-copy h3 {
        font-size: 21px;
    }

    .gift-story-8500 .story-word {
        font-size: 25px;
    }
}

/* Carry the hero's clean sky-blue mood through every section below it. */
:is(:is(:is(:is(:root)))) {
    --paper: #eaf7ff;
    --blue: #d8efff;
    --line: #a9cfe8;
    --muted: #476d89
;}

:is(:is(body)) {
    background-size: 140% 140%,145% 145%,140% 140%,100% 100%;
}

:is(:is(:is(.gift))) {
    background: linear-gradient(135deg,#ffffffed 0%,#eaf7ffdb 58%,#cfeaffd6 100%);
    box-shadow: 0 12px 30px #377ba51a;
}

:is(.gift-story) {
    background: linear-gradient(125deg,#ffffffea,#e3f3ffcf);
    box-shadow: 0 14px 34px #397fa71a;
}

:is(:is(.combo-card)) {
    background: linear-gradient(135deg,#ffffffeb 0%,#e8f6ffdc 62%,#cfe9fbd4 100%);
    box-shadow: 0 12px 30px #397fa718;
}

:is(:is(.product-visual)) {
    background: linear-gradient(145deg,#fafdff,#d7efff);
}

:is(.asset-pending) {
    background: #eaf7ffb8;
    border-color: #a9cfe8;
    color: #527b98;
}

.section-heading h2 em {
    color: #2d7eb5;
}

:is(.category-heading) {
    border-color: #93bfdd;
}

.gift-note,.section-heading>p {
    color: #466f8d;
}

:is(body>footer) {
    color: #476d89;
}

/* Only the four gift-card theme sentences use the Hei typeface. */
.gift .gift-number {
    font-family: "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif!important;
    font-weight: 700!important;
    letter-spacing: 0;
}

/* Refined ambient motion enriches the campaign without competing with products. */
main {
    position: relative;
    isolation: isolate;
}

main>.ambient-background {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient-background::before {
    content: "";
    position: absolute;
    inset: -18%;
    filter: blur(4px);
    animation: ambient-drift 22s ease-in-out infinite alternate;
}

.ambient-background::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: repeating-linear-gradient(118deg,transparent 0 105px,#ffffff1f 106px 107px,transparent 108px 190px);
    mask-image: linear-gradient(180deg,transparent 4%,#000 22%,#000 88%,transparent);
    opacity: .7;
    animation: ambient-lines 30s linear infinite;
}

.ambient-background span {
    position: absolute;
    display: block;
    border: 1px solid #ffffff70;
    border-radius: 50%;
    box-shadow: 0 0 0 34px #ffffff12,0 0 0 72px #5ba8e812;
}

.ambient-background span:first-child {
    top: 24%;
    right: -7vw;
    width: 24vw;
    height: 24vw;
    min-width: 280px;
    min-height: 280px;
    animation: ambient-float 18s ease-in-out infinite;
}

.ambient-background span:last-child {
    left: -9vw;
    bottom: 8%;
    width: 30vw;
    height: 30vw;
    min-width: 320px;
    min-height: 320px;
    animation: ambient-float 24s ease-in-out -8s infinite reverse;
}

@keyframes ambient-drift {
    0% {
        transform: translate3d(-2%,-1%,0) scale(1);
    }

    50% {
        transform: translate3d(3%,2%,0) scale(1.05);
    }

    100% {
        transform: translate3d(-1%,4%,0) scale(1.02);
    }
}

@keyframes ambient-lines {
    to {
        transform: translate3d(190px,0,0);
    }
}

@keyframes ambient-float {
    0%,100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .42;
    }

    50% {
        transform: translate3d(0,-36px,0) scale(1.08);
        opacity: .7;
    }
}

@media(max-width: 650px) {
    .ambient-background::before {
        inset:-28%;
        opacity: .72;
        animation-duration: 30s;
    }

    .ambient-background::after {
        opacity: .32;
    }

    .ambient-background span {
        opacity: .28!important;
    }

    .ambient-background span:first-child {
        right: -45vw;
    }

    .ambient-background span:last-child {
        left: -58vw;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ambient-background::before,.ambient-background::after,.ambient-background span {
        animation: none;
    }
}

/* Five scroll-led campaign moods. */
@property --mood-a {
    syntax: "<color>";
    inherits: true;
    initial-value: #d8f0ff;
}

@property --mood-b {
    syntax: "<color>";
    inherits: true;
    initial-value: #b9ddf5;
}

@property --mood-c {
    syntax: "<color>";
    inherits: true;
    initial-value: #edf8ff;
}

@property --mood-glow {
    syntax: "<color>";
    inherits: true;
    initial-value: #4aa9e84d;
}

:is(:is(:is(body))) {
    --mood-a: #d8f0ff;
    --mood-b: #b9ddf5;
    --mood-c: #edf8ff;
    --mood-glow: #4aa9e84d;
    background: radial-gradient(circle at 10% 20%,#ffffffd9 0%,transparent 30%),radial-gradient(circle at 88% 30%,var(--mood-glow) 0%,transparent 34%),radial-gradient(circle at 50% 86%,#ffffff91 0%,transparent 38%),linear-gradient(145deg,var(--mood-a),var(--mood-b) 48%,var(--mood-c));
    background-attachment: fixed;
    transition: --mood-a 1.1s ease,--mood-b 1.1s ease,--mood-c 1.1s ease,--mood-glow 1.1s ease,color .45s ease;
}

body[data-scroll-theme="gifts"] {
    --mood-a: #d9f2ff;
    --mood-b: #b9def6;
    --mood-c: #eef9ff;
    --mood-glow: #38a7eb52
;}

body[data-scroll-theme="details"] {
    --mood-a: #eef6ff;
    --mood-b: #d4e4fa;
    --mood-c: #f7fbff;
    --mood-glow: #7b9ed850
;}

body[data-scroll-theme="sets"] {
    --mood-a: #e7f5f7;
    --mood-b: #c9e7eb;
    --mood-c: #f4fbfb;
    --mood-glow: #55b7bd45
;}

body[data-scroll-theme="credits"] {
    --mood-a: #f4f0e8;
    --mood-b: #dce8ee;
    --mood-c: #edf5fa;
    --mood-glow: #c6a66a42
;}

body[data-scroll-theme="collection"] {
    --mood-a: #e8f5f1;
    --mood-b: #cfe8e3;
    --mood-c: #f1faf7;
    --mood-glow: #5ab5a24a
;}

:is(.ambient-background)::before {
    background: radial-gradient(circle at 18% 30%,#ffffffb8 0 5%,transparent 18%),radial-gradient(circle at 82% 24%,var(--mood-glow) 0 7%,transparent 24%),radial-gradient(circle at 68% 78%,#ffffffa8 0 4%,transparent 20%),radial-gradient(circle at 25% 86%,var(--mood-glow) 0 8%,transparent 25%);
    transition: background 1.15s ease;
}

#gifts,#gift-details,#sets,#credits,#collection {
    position: relative;
    border-radius: 24px;
    transition: background-color .85s ease,box-shadow .85s ease;
}

#gifts {
    background: #ffffff24;
    box-shadow: 0 24px 70px #4389b111;
}

#gift-details {
    background: #f8fbff2e;
    box-shadow: 0 24px 70px #607fa814;
}

#sets {
    background: #f4ffff2b;
    box-shadow: 0 24px 70px #4f979b12;
}

#credits {
    background: #fffdf82b;
    box-shadow: 0 24px 70px #957c5012;
}

#collection {
    background: #f5fffb2e;
    box-shadow: 0 24px 70px #4a947f12;
}

@media(max-width: 650px) {
    body {
        background-attachment:scroll;
    }

    #gifts,#gift-details,#sets,#credits,#collection {
        border-radius: 16px;
    }
}

@media(prefers-reduced-motion:reduce) {
    body,.ambient-background::before {
        transition: none;
    }
}

/* Supplied artwork replaces the first section's text heading. */
.gift-section-title {
    width: min(100%,760px);
    line-height: 0;
    margin-top: -4px;
}

.gift-section-title img {
    display: block;
    width: 64%;
    height: auto;
}

.gift-title-row {
    display: flex;
    align-items: flex-end;
    gap: clamp(18px,3vw,46px);
}

.gift-title-row .gift-section-title {
    flex: 1 1 auto;
}

.gift-title-row .gift-section-title img {
    width: 64%;
}

.gift-date {
    flex: 0 0 auto;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    white-space: nowrap;
}

.gift-heading-note {
    max-width: 640px;
    margin: 12px 0 0;
    color: #466f8d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: -.025em;
    text-align: left;
    padding: 8px 20px;
    background: rgb(255 241 184 / 55%);
    border-radius: 20px;
}

@media(max-width: 650px) {
    .standard-page .gift-heading-note {
        text-align: center;
    }

    .gift-heading-note .desktop-only {
        display: none;
    }
}

@media(min-width: 651px) {
    .gift-heading-note {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        font-size: 16px;
        white-space: normal;
    }
}

@media(max-width: 650px) {
    .gift-section-title {
        width:min(100%,520px);
        margin: 2px auto 0;
    }

    .gift-section-title img {
        width: 100%;
    }

    .gift-title-row {
        display: block;
    }

    .gift-date {
        margin: 10px 0 0 15px;
        font-size: 14px;
    }

    .gift-heading-note {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.65;
        text-align: left;
        padding: 8px 15px 8px 18px;
        background: rgb(255 241 184 / 55%);
        border-radius: 20px;
    }
}

/* Supplied gift-box and ribbon artwork, following the reference card template. */
:is(:is(:is(:is(.gift)))) {
    position: relative;
    overflow: visible;
    min-height: 350px;
    padding: 24px 30px 28px!important;
    grid-template-columns: 43% 1fr;
    column-gap: 28px;
}

:is(:is(.gift-top)) {
    position: relative;
    z-index: 2;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #c4d7e1;
}

.gift-top .gift-number {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #456c8d;
    font: 17px/1.2 Georgia,"Times New Roman",serif;
    letter-spacing: .18em;
    white-space: nowrap;
}

.gift-top .gift-number img {
    width: 49px;
    height: 49px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 5px 6px #275c8422);
}

.gift-top .gift-ribbon {
    position: absolute;
    z-index: 4;
    top: -39px;
    right: -33px;
    width: 111px;
    height: 132px;
    pointer-events: none;
}

.gift-top .gift-ribbon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gift-top .gift-ribbon b {
    position: absolute;
    z-index: 1;
    top: 42px;
    right: 1px;
    width: 83px;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    font-weight: 600;
    transform: rotate(45deg);
    transform-origin: center;
    text-shadow: 0 1px 2px #183f6b66;
    white-space: nowrap;
}

.gift .threshold {
    grid-column: 2;
    margin: 20px 0 6px;
    align-self: end;
}

.gift .gift-placeholder {
    grid-column: 1;
    grid-row: 2/6;
    align-self: center;
    margin: 20px 0 0;
}

.gift h3,.gift>p:not(.threshold),.gift small {
    grid-column: 2;
}

@media(max-width: 1000px) {
    .gift {
        padding:20px 22px 24px!important;
        column-gap: 20px;
    }

    :is(.gift-top) {
        min-height: 80px;
        padding-right: 92px;
    }

    .gift-top .gift-number {
        font-size: 15px;
        gap: 9px;
    }

    .gift-top .gift-number img {
        width: 54px;
        height: 54px;
    }

    .gift-top .gift-ribbon {
        top: -23px;
        right: -25px;
        width: 118px;
        height: 118px;
    }

    .gift-top .gift-ribbon b {
        top: 36px;
        right: 2px;
        width: 83px;
        font-size: 10px;
    }
}

@media(max-width: 650px) {
    :is(.gift) {
        min-height:315px;
        grid-template-columns: 42% 1fr;
        padding: 17px 18px 22px!important;
        column-gap: 18px;
    }

    :is(.gift-top) {
        min-height: 70px;
        padding: 0 78px 10px 0;
    }

    .gift-top .gift-number {
        font-size: 13px;
        gap: 7px;
        letter-spacing: .12em;
    }

    .gift-top .gift-number img {
        width: 47px;
        height: 47px;
    }

    .gift-top .gift-ribbon {
        top: -21px;
        right: -22px;
        width: 102px;
        height: 102px;
    }

    .gift-top .gift-ribbon b {
        top: 31px;
        right: 2px;
        width: 72px;
        font-size: 14px;
        letter-spacing: .02em;
    }

    .gift .threshold {
        margin: 17px 0 8px;
    }

    .gift .gift-placeholder {
        margin-top: 15px;
    }

    .gift h3 {
        font-size: 16px;
    }

    .gift small {
        font-size: 11px;
    }
}

@media(max-width: 390px) {
    .gift {
        grid-template-columns:40% 1fr;
        column-gap: 14px;
    }

    .gift-top {
        padding-right: 70px;
    }

    .gift-top .gift-number {
        font-size: 12px;
    }

    .gift-top .gift-number img {
        width: 42px;
        height: 42px;
    }

    .gift-top .gift-ribbon {
        top: -20px;
        right: -21px;
        width: 94px;
        height: 94px;
    }

    .gift-top .gift-ribbon b {
        top: 28px;
        width: 66px;
        font-size: 8px;
    }
}

/* Keep the hover light sweep inside the rounded card while the ribbon may wrap outside. */
:is(.gift)::after {
    inset: 0;
    width: auto;
    border-radius: inherit;
    background: linear-gradient(105deg,transparent 0 39%,#ffffffb8 48%,transparent 57%);
    background-size: 250% 100%;
    background-position: 150% 0;
    transform: none;
    clip-path: inset(0 round 16px);
}

@keyframes gift-shimmer {
    0% {
        background-position: 150% 0;
        opacity: 0;
    }

    18% {
        opacity: .7;
    }

    100% {
        background-position: -80% 0;
        opacity: 0;
    }
}

@media(max-width: 650px) {
    .gift::after {
        clip-path:inset(0 round 14px);
    }
}

/* Four reference-style recommended sets with a replaceable 1:1 visual. */
:is(.set-cards){grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch;}
.combo-card.combo-link{position:relative;isolation:isolate;display:flex;min-width:0;height:100%;flex-direction:column;overflow:hidden;padding:30px;border:1px solid #ffffff;border-radius:26px;background:linear-gradient(145deg,#e9f6fced 0%,#cce8f5e8 58%,#e8f5fbed 100%);box-shadow:inset 0 1px 0 #ffffffd9,0 18px 42px #326b8d1b;color:var(--ink);}
.combo-card.combo-link::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 88% 5%,#ffffffa8 0%,transparent 32%),linear-gradient(120deg,transparent 0 43%,#ffffff25 44% 46%,transparent 47%);pointer-events:none;}
:is(:is(.combo-title)){display:block;min-height:88px;padding:3px 4px 20px;}
.combo-title .set-no{display:none;}
:is(.combo-title .kicker){margin:0 0 10px;color:#245b82;font-size:12px;font-weight:600;letter-spacing:.2em;}
.combo-title h3{margin:0;color:#123f61;font-size:clamp(24px,2.2vw,31px);font-weight:500;line-height:1.3;letter-spacing:.025em;}
.combo-products,.combo-products:has(figure:nth-child(4)){position:relative;display:block;min-height:0;aspect-ratio:1/1;margin:0;padding:18px;overflow:hidden;border:1px solid #ffffff;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px #c7deeb55,0 12px 26px #2b668a12;}
.combo-products>.combo-placeholder-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;filter:none;transition:transform .35s ease;}
.combo-products::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 28%,#ffffffa8 45%,transparent 61%);transform:translateX(-145%);transition:transform .8s ease;pointer-events:none;}
.combo-contents{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 11px;margin:13px 0 0;padding:0 4px;color:#16466c;font-size:13px;font-weight:500;line-height:1.65;letter-spacing:.015em;text-align:center;}
.combo-contents span{white-space:nowrap;}
.combo-contents span::before{content:"•";margin-right:5px;}
:is(.combo-bottom){display:grid;grid-template-columns:minmax(150px,.95fr) minmax(140px,1.05fr);align-items:end;gap:16px 14px;margin-top:13px;padding:20px 3px 0;border-top:1px solid #8ab5cf;}
.combo-bottom .combo-offer{display:flex;min-width:0;align-items:baseline;gap:7px;color:#947143;font-size:14px;font-weight:600;letter-spacing:.05em;white-space:nowrap;}
:is(:is(.combo-discount)){position:relative;display:inline-flex;flex:0 0 auto;width:auto;height:auto;margin:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;color:#947143;font:700 clamp(44px,4vw,58px)/.9 Georgia,"Times New Roman",serif;letter-spacing:-.06em;text-shadow:none;white-space:nowrap;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0 transparent;}
:is(.combo-discount)::after{display:none;}
:is(.combo-discount small){margin:0 0 2px 5px;background:none;color:#947143;font:700 15px/1 "PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;letter-spacing:0;text-shadow:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0 transparent;}
.combo-bottom .combo-price{display:flex;min-width:0;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;}
.combo-bottom .combo-price del{color:#61798a;font-size:13px;line-height:1.25;white-space:nowrap;text-decoration-color:#4b6577;text-decoration-thickness:1px;}
:is(.combo-bottom .combo-price strong){max-width:100%;color:#cf304b;font:400 clamp(29px,2.65vw,38px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.025em;white-space:nowrap;}
.combo-bottom>span.combo-buy{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:2px;padding:15px 18px;border:1px solid #ffffff9e;border-radius:999px;background:linear-gradient(100deg,#106da5 0%,#0795d3 55%,#0e70a8 100%);box-shadow:inset 0 1px 0 #ffffff40,0 8px 18px #174d7828;color:#fff;font-size:18px;font-weight:700;letter-spacing:.14em;text-align:center;}
@keyframes combo-metal-shine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@media(hover:hover){.combo-link:hover .combo-products::after{transform:translateX(145%);}.combo-link:hover .combo-placeholder-image{transform:scale(1.018);}}
.combo-link.is-in-view{border-color:#a8cde4;box-shadow:0 16px 32px #245f8426,0 0 22px #8ed3ff2e;}
.combo-link.is-in-view .combo-buy{background:linear-gradient(100deg,#89734b,#b69a62);box-shadow:0 9px 22px #89734b4a;}
.combo-link.is-in-view .combo-products::after{transform:translateX(145%);}
.combo-link.is-in-view .combo-placeholder-image{transform:scale(1.018);}
@media(max-width:850px){.set-cards{grid-template-columns:1fr;}.combo-card.combo-link{max-width:650px;width:100%;margin-inline:auto;}}
@media(max-width:650px){.set-cards{gap:20px;}.combo-card.combo-link{padding:20px 16px 18px;border-radius:21px;}.combo-title{min-height:0;padding:2px 4px 16px;}.combo-title .kicker{font-size:11px;}.combo-title h3{font-size:24px;}.combo-products,.combo-products:has(figure:nth-child(4)){padding:12px;border-radius:16px;}.combo-products>.combo-placeholder-image{border-radius:11px;}.combo-contents{gap:2px 9px;margin-top:11px;font-size:12px;line-height:1.6;}.combo-bottom{grid-template-columns:minmax(138px,.95fr) minmax(128px,1.05fr);gap:14px 10px;margin-top:11px;padding-top:17px;}.combo-bottom .combo-offer{font-size:12px;}.combo-discount{font-size:48px;}.combo-discount small{font-size:13px;}.combo-bottom .combo-price del{font-size:11px;}.combo-bottom .combo-price strong{font-size:30px;}.combo-bottom>span.combo-buy{padding:13px 16px;font-size:17px;}}
@media(max-width:380px){.combo-bottom{grid-template-columns:1fr;}.combo-bottom .combo-offer{justify-content:center;}.combo-bottom .combo-price{align-items:center;text-align:center;}.combo-bottom>span.combo-buy{grid-column:1;}}
@media(prefers-reduced-motion:reduce){.combo-discount{animation:none;}.combo-products::after,.combo-placeholder-image{transition:none;}}

/* Keep the five campaign chapters visually separated. */
#gift-details,#sets,#credits,#collection{margin-top:clamp(24px,3vw,42px);}
@media(max-width:650px){#gift-details,#sets,#credits,#collection{margin-top:24px;}}

/* Supplied star sweep follows the width of each text chapter title. */
.section-heading h2:not(.gift-section-title) {
    display: block;
    width: max-content;
    max-width: 100%;
    padding-bottom: clamp(30px,3vw,42px);
    background-image: url("https://imgc.daikenshop.com/images/event/20261019_donghae/starlink.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
}

/* Keep the wellness-title sweep in its own row so the star and arc never
   overlap the GoodDay lettering as the heading width changes. */
#collection .section-heading h2:not(.gift-section-title) {
    position: relative;
    padding-bottom: 0;
    background-image: none;
}

#collection .section-heading h2:not(.gift-section-title)::after {
    content: "";
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: block;
    width: min(100%,945px);
    height: clamp(38px,4.6vw,58px);
    background: url("https://imgc.daikenshop.com/images/event/20261019_donghae/starlink.webp") left center / 100% 100% no-repeat;
    pointer-events: none;
}

#collection .section-heading {
    margin-bottom: calc(24px + clamp(38px,4.6vw,58px));
}

:is(:is(:is(:is(:is(.category-jumps))))) {
    position: relative !important;
    top: auto !important;
    z-index: 1100 !important;
    transition: transform .24s ease;
}

.category-jumps-sentinel {
    display: block;
    width: 100%;
    height: 0;
}

.category-jumps.is-fixed {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    left: 50% !important;
    width: min(1000px,100%) !important;
    margin: 0 !important;
    transform: translateX(-50%);
    z-index: 1100 !important;
}

.category-jumps.is-fixed.is-hidden {
    transform: translate(-50%,-110%);
    pointer-events: none;
}

body.category-nav-fixed #product-sections {
    padding-top: calc(var(--category-nav-height) + 55px);
}

@media(max-width:650px) {
    body.category-nav-fixed #product-sections {
        padding-top: calc(var(--category-nav-height) + 35px);
    }
}

:is(.product-category) {
    scroll-margin-top: calc(var(--category-nav-height) + 12px);
}

@media(min-width:651px) {
    body {
        padding-top: var(--primary-nav-height);
    }

    :is(body>header) {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        z-index: 2000 !important;
    }

    .category-jumps.is-fixed {
        top: var(--primary-nav-height) !important;
    }

    .product-category {
        scroll-margin-top: calc(var(--primary-nav-height) + var(--category-nav-height) + 12px);
    }
}

#gift-details .section-heading .kicker,
#sets .section-heading .kicker,
#credits .section-heading .kicker,
#collection .section-heading .kicker {
    margin-bottom: 6px;
}

#gift-details .section-heading h2,
#sets .section-heading h2,
#credits .section-heading h2,
#collection .section-heading h2 {
    line-height: 1.22;
}

/* Mobile primary navigation becomes a swipeable bottom bar. */
@media(max-width:650px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body>header {
        position: fixed;
        z-index: 1000;
        inset: auto 0 0;
        display: block;
        width: 100%;
        height: calc(64px + env(safe-area-inset-bottom));
        min-height: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        overflow: hidden;
        border-top: 1px solid #b9d3e2;
        border-bottom: 0;
        background: #f7fbfdf5;
        box-shadow: 0 -8px 24px #153f5d24;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    body>header>a,
    body>header .edition {
        display: none;
    }

    body>header nav {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        width: 100%;
        height: 64px;
        padding: 0 14px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body>header nav::-webkit-scrollbar {
        display: none;
    }

    body>header nav a,
    body>header nav a:last-child {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        min-width: max-content;
        min-height: 44px;
        padding: 0 15px;
        font-size: 13px;
        letter-spacing: .02em;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .back-to-top {
        bottom: calc(80px + env(safe-area-inset-bottom));
        flex-direction: row;
        font-size: 12px;
        line-height: 1;
        text-align: center;
    }

    .back-to-top>span:first-child {
        display: none;
    }

    .section-heading {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        align-items: start;
        gap: 0;
        margin-bottom: 28px;
        text-align: left;
    }

    .section-heading>div {
        width: 100%;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .section-heading .kicker {
        display: none;
    }

    .section-heading h2,
    .section-heading .gift-section-title {
        width: 100%;
        margin: 0;
        font-size: clamp(27px,7.6vw,34px);
        line-height: 1.25;
        letter-spacing: .035em;
    }

    .section-heading h2 em {
        display: inline;
    }

    .section-heading h2:not(.gift-section-title) {
        width: max-content;
        max-width: 100%;
        padding-bottom: 16px;
        background-size: 100% auto;
    }

    #collection .section-heading h2:not(.gift-section-title) {
        padding-bottom: 0;
    }

    #collection .section-heading h2:not(.gift-section-title)::after {
        position: static;
        height: clamp(28px,9vw,40px);
        margin-top: 5px;
    }

    #collection .section-heading {
        margin-bottom: 28px;
    }

    #gifts .section-heading {
        margin-bottom: 12px;
    }

    #gifts .section-heading>p {
        margin-left: 15px;
    }

    .section-heading>p {
        margin: 10px 0 0;
        font-size: 14px;
        line-height: 1.55;
        text-align: left;
    }

    .section-heading>p br {
        display: inline;
        content: "";
    }

    .section-heading>p br::after {
        content: "　";
    }

    #gifts .gift-section-title img {
        width: min(100%,520px);
    }
}

/* Tablet hero: 3:2 canvas with the three desktop layers scaled proportionally. */
@media (min-width: 651px) and (max-width: 1279px) {
    .hero-image {
        width: 100vw;
        max-width: none;
        height: auto;
        min-height: 0;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        aspect-ratio: 3 / 2;
        overflow: hidden;
        background: #c9e9fd;
    }

    .hero-image > .hero-bg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero-image > .hero-date {
        display: block;
        top: 0;
        left: 0;
        width: 24%;
        height: auto;
    }

    .hero-stage {
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        transform: none;
    }

    .hero-layer {
        display: block;
    }

    .hero-layer img {
        width: 100%;
        height: auto;
        max-width: none;
        object-fit: contain;
    }

    /* Good Day title: larger and fully visible in the upper-left. */
    .hero-title-layer {
        top: 23%;
        left: 7%;
        width: 47%;
    }

    /* Spokesperson: fills the right side without cropping. */
    .hero-person-layer {
        right: 1%;
        bottom: -19%;
        width: 50%;
    }

    /* Product group: fills the lower-left while keeping the complete artwork. */
    .hero-product-layer {
        left: 2%;
        bottom: 6%;
        width: 50%;
    }

    .hero-image > .hero-angle {
        display: block;
        right: 0;
        bottom: 0;
        width: 58%;
        height: auto;
    }

    .hero-image > .hero-mobile {
        display: none;
    }
}

/* 2026-10-02: 01 / SPECIAL GIFTS adds a fifth gift and a DONGHAE image tile. */
#gifts .gift-grid {
    align-items: stretch;
}

#gifts .gift-feature-card {
    position: relative;
    min-height: 350px;
    height: 100%;
    overflow: hidden;
    border: 1px solid #ffffff;
    border-radius: 16px;
    background: #cbd4df;
    isolation: isolate;
}

#gifts .gift-feature-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
}

#gifts .gift-feature-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent 0%, rgba(16, 54, 86, .88) 100%);
    pointer-events: none;
}

#gifts .gift-feature-overlay {
    position: absolute;
    z-index: 2;
    left: 5.5%;
    right: 5.5%;
    bottom: 6.5%;
    color: #fff;
}

#gifts .gift-feature-overlay small {
    display: block;
    margin-bottom: 10px;
    font: 11px/1.2 Arial, sans-serif;
    letter-spacing: .24em;
}

#gifts .gift-feature-overlay strong {
    display: block;
    font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: clamp(24px, 2.15vw, 35px);
    line-height: 1.42;
    font-weight: 600;
    letter-spacing: .05em;
}

@media(max-width: 650px) {
    #gifts .gift-grid {
        grid-template-columns: 1fr;
    }

    #gifts .gift-grid > .gift-feature-card {
        aspect-ratio: auto;
        height: 350px;
        border-radius: 14px;
    }

    #gifts .gift-grid > .gift-feature-card > img {
        object-position: center top;
    }

    #gifts .gift-feature-overlay {
        left: 7%;
        right: 7%;
        bottom: 7%;
    }

    #gifts .gift-feature-overlay small {
        font-size: 9px;
        margin-bottom: 7px;
    }

    #gifts .gift-feature-overlay strong {
        font-size: clamp(23px, 7vw, 31px);
    }
}

/* 2026-10-02 fix v2: avoid duplicate selectors while preserving mobile DONGHAE tile sizing. */