.gift-teaser { display:flex; align-items:center; gap:11px; width:100%; margin:0 0 18px; padding:16px 13px; text-align:left; background:#efe3cf; border:1px solid #e3d1b5; border-radius:20px; }
.gift-mark { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:14px; background:#f9f0e1; color:#88653d; transform:rotate(-7deg); }
.gift-mark svg { width:23px; height:23px; }
.gift-teaser > span:nth-child(2) { flex:1; min-width:0; }
.gift-teaser small { display:block; font-size:8px; font-weight:700; letter-spacing:1.2px; color:#866642; }
.gift-teaser b { display:block; font-family:var(--serif); font-size:18px; font-weight:400; line-height:1.14; margin:5px 0; }
.gift-teaser em { display:block; font-style:normal; font-size:10px; color:#806d54; line-height:1.35; }
.gift-teaser > svg { width:17px; height:17px; margin:0; color:#957649; }
.basket-gift { position:relative; padding:17px 16px 13px; background:#e9eddf; border:1px solid #d7dfc8; border-radius:22px; overflow:hidden; }
.gift-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gift-heading .eyebrow { font-size:9px; letter-spacing:1px; margin:0; }
.gift-heading button { display:flex; align-items:center; gap:5px; padding:0; font-size:10px; min-height:36px; color:#61744f; }
.gift-heading button svg { width:15px; height:15px; margin:0; }
.basket-gift h2 { font:400 25px/1.08 var(--serif); max-width:280px; letter-spacing:-.4px; margin:5px 0 9px; }
.gift-status { font-size:12px; line-height:1.55; color:#647457; }
.gift-status b { color:#3f5834; }
.gift-meter { height:6px; margin:15px 0 12px; border-radius:10px; background:#cdd6bd; overflow:hidden; }
.gift-meter > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7d9463,#3d5736); }
.gift-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.gift-steps > span { display:grid; grid-template-columns:24px 1fr; column-gap:5px; align-items:center; padding:7px 5px; border-radius:10px; border:1px solid #d3dbc6; color:#718164; }
.gift-steps i { display:grid; place-items:center; grid-row:span 2; width:23px; height:23px; border-radius:50%; background:#d9e1cc; }
.gift-steps i svg { width:13px; height:13px; }
.gift-steps b { font-size:10px; line-height:1.4; font-weight:600; }
.gift-steps small { font-size:9px; }
.gift-steps > .reached { border-color:#567049; background:#567049; color:#fffdf4; }
.gift-steps .reached i { color:#fff; background:#ffffff20; }
.gift-next { margin-top:13px; font-size:11px; line-height:1.45; color:#526346; }
.gift-condition { margin-top:12px; font-size:9px; line-height:1.45; color:#7a846e; }
.basket-gift.is-unlocked { background:linear-gradient(130deg,#e9eddf,#e3ead2); }
.included-gift { display:flex; gap:10px; align-items:center; margin-top:16px; padding:13px 11px; border:1px dashed #a4b390; border-radius:14px; background:#eef1e3; }
.included-gift > svg { color:#6c8656; width:22px; height:22px; }
.included-gift > span { flex:1; min-width:0; }
.included-gift b { display:block; font-size:12px; line-height:1.4; font-weight:600; }
.included-gift small { display:block; font-size:10px; color:#7c876e; margin-top:3px; }
.included-gift strong { font-size:9px; letter-spacing:.5px; color:#597344; }
.complements { margin:22px 0 10px; padding:16px 13px 5px; background:#eeebe1; border:1px solid #e3dece; border-radius:20px; }
.complements .section-title { margin:0; align-items:start; gap:6px; }
.complements h2 { font-size:21px; line-height:1.1; }
.complements .section-title > span { font-size:7px; white-space:nowrap; color:#877759; font-weight:700; letter-spacing:.5px; padding-top:5px; }
.complement-intro { font-size:11px; line-height:1.5; color:#8a806d; margin:8px 0 4px; }
.complement-card { display:flex; align-items:center; gap:10px; padding:12px 0; }
.complement-card + .complement-card { border-top:1px solid #ded9c9; }
.complement-card .sprite.small { width:47px; height:51px; border-radius:12px; }
.complement-card > div:not(.sprite) { flex:1; min-width:0; }
.complement-card h3 { font-size:12px; font-weight:600; line-height:1.35; }
.complement-card p { font-size:10px; color:#837d6e; margin:5px 0 0; line-height:1.4; }
.complement-card p b { color:#4e6342; font-weight:600; }
.complement-card .plus { background:#fffdf5; width:36px; min-width:36px; height:36px; }
.unlock-label { display:flex; align-items:center; gap:4px; font-size:8px; font-weight:600; color:#8b6a3f; margin-top:5px; }
.unlock-label svg { width:12px; height:12px; }
.gift-explainer > .gift-mark { width:50px; height:50px; margin:2px 0 20px; }
.gift-explainer h2 { font:400 32px/1.05 var(--serif); letter-spacing:-.5px; margin:8px 0 13px; }
.gift-explainer > p:not(.eyebrow):not(.footnote) { font-size:13px; line-height:1.6; color:#78846c; margin-bottom:20px; }
.gift-rule { display:flex; align-items:center; gap:13px; padding:14px 0; border-top:1px solid var(--line); }
.gift-rule small { font-size:9px; letter-spacing:1px; color:#8a7453; font-weight:650; }
.gift-rule h3 { font-size:14px; font-weight:500; line-height:1.4; margin-top:4px; }
#bagbar > span { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#bagbar > span > small { font-size:9px; color:#c5d6b5; }
@media (max-width:359px) {
 .gift-steps > span { grid-template-columns:1fr; text-align:center; gap:3px; padding:7px 2px; }
 .gift-steps i { grid-row:auto; margin:auto; }
 .gift-heading .eyebrow { font-size:8px; }
 .complements .section-title > span { display:none; }
 .gift-teaser b { font-size:16px; }
}

/* Gifts share the app's gentle, one-touch motion language. */
.gift-meter > span { transform-origin:left center; transition:width .75s cubic-bezier(.18,.8,.24,1); }
.gift-teaser { transition:transform .32s cubic-bezier(.2,.8,.25,1.2),box-shadow .3s,border-color .3s,background-color .3s; }
.gift-teaser .gift-mark { transition:transform .4s cubic-bezier(.2,.8,.25,1.3),background-color .3s; }
.gift-teaser > svg { transition:transform .3s cubic-bezier(.2,.8,.25,1.3); }
.complement-card { transition:transform .3s cubic-bezier(.2,.8,.25,1.2),background-color .3s; }
.complement-card .sprite { transition:transform .45s cubic-bezier(.2,.8,.25,1.2),box-shadow .3s; }
.gift-teaser:active { transform:scale(.975); }
.gift-teaser:active .gift-mark { transform:rotate(3deg) scale(.93); }
.complement-card:active .sprite { transform:rotate(-3deg) scale(.96); }
@media (hover:hover) and (pointer:fine) {
 .gift-teaser:hover { transform:translateY(-3px); border-color:#cdb58e; box-shadow:0 9px 22px #80693d17; background:#f1e5d1; }
 .gift-teaser:hover .gift-mark { transform:rotate(3deg) translateY(-2px); background:#fff7e8; }
 .gift-teaser:hover > svg { transform:translateX(3px); }
 .complement-card:hover .sprite { transform:translateY(-2px) rotate(-3deg) scale(1.035); box-shadow:0 5px 10px #64593718; }
 .gift-teaser:active { transform:scale(.975); }
 .gift-teaser:active .gift-mark { transform:rotate(3deg) scale(.93); }
 .complement-card:active .sprite { transform:rotate(-3deg) scale(.96); }
}
@media (prefers-reduced-motion:reduce) {
 .gift-teaser,.gift-teaser .gift-mark,.gift-teaser > svg,.complement-card,.complement-card .sprite,.gift-meter > span { transition:none !important; }
 .gift-teaser,.gift-teaser > svg,.complement-card,.complement-card .sprite { transform:none !important; }
 .gift-teaser .gift-mark { transform:rotate(-7deg) !important; }
}