/* ════════════════════════════════════════════════════════════════════════
   njoi-style.css — shared page styles for NJOi Gifts
   Used by index.html and craft-items.html.

   TWO LOOKS, ONE STYLESHEET
     • Everyday (default): colourful, playful. Baloo 2 + Caveat, pastel sections,
       colour-coded cards, chunky "press me" buttons.
     • Christmas: pine green, gold and cranberry on ivory, Playfair Display + Jost.
   The look is chosen by ACTIVE_THEME in njoi-layout.js, which sets
   <html data-theme="default|christmas">. Everything under the
   "Christmas" banner near the bottom of this file only applies to that theme.

   Nav, footer, snowfall, bells, floating shapes live in njoi-layout.js.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* palette (Everyday) */
  --plum:#2B1E3D; --rose:#EC5A76; --rose-d:#C23558; --rose-btn:#C93A60; --rose-ink:#C93A60;
  --gold:#E8A03C; --gold-l:#FFD98A; --cream:#FFF7F1; --blush:#FBE7E4; --ink-soft:#675B73;
  --sky:#36C5D6; --lilac:#9B7EDE; --green:#5BD06A; --leaf:#2E8B45;
  --on-dark:#EDE4F3; --on-dark-soft:#C9B9D8;
  /* soft tints for section backgrounds and cards */
  --tint-a:#E9F8FB; --tint-b:#F4EFFC; --tint-c:#FFF4DC; --tint-d:#FFEDF1;
  --rose-t:#FFE3E8; --sky-t:#DDF4F8; --gold-t:#FFF0D2; --lilac-t:#EEE7FB; --green-t:#E2F7E5;
  --hair:rgba(43,30,61,.09); --hair-s:rgba(43,30,61,.14);
  /* shape + depth */
  --maxw:1180px; --r:24px;
  --shadow:0 18px 50px -22px rgba(43,30,61,.45);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  /* type */
  --display:'Baloo 2',ui-rounded,'Nunito','Segoe UI',system-ui,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;
  /* hero */
  --hero-bg:
    radial-gradient(38% 46% at 88% 18%,rgba(54,197,214,.30),transparent 72%),
    radial-gradient(44% 54% at 6% 82%,rgba(155,126,222,.28),transparent 70%),
    radial-gradient(46% 40% at 58% 104%,rgba(232,160,60,.30),transparent 70%),
    radial-gradient(52% 50% at 68% 6%,var(--blush),transparent 72%),
    var(--cream);
  --hero-ink:var(--plum); --hero-sub:var(--rose-ink); --hero-lead:var(--ink-soft);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.0625rem;color:var(--plum);background:var(--cream);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.has-fest-bar{padding-top:40px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ar{width:16px;height:16px;flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.njoi-logo{height:100%;width:auto;display:block}
.lg-bow{animation:bowpop 4.5s ease-in-out infinite}
.lg-spark{animation:twinkle 3s ease-in-out infinite;transform-origin:center}
@keyframes bowpop{0%,88%,100%{transform:translateY(0) rotate(0)}92%{transform:translateY(-3px) rotate(-5deg)}96%{transform:translateY(-1px) rotate(4deg)}}
@keyframes twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.55}}
/* copy that only belongs to one look */
:root:not([data-theme="christmas"]) .xm-only{display:none!important}
[data-theme="christmas"] .df-only{display:none!important}

/* ── buttons: chunky "press me" in the body, flat inside the nav ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;font-size:1.04rem;line-height:1.2;min-height:50px;padding:13px 28px;border-radius:100px;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--bounce),box-shadow .25s,background .25s,color .25s,border-color .25s}
.btn svg{flex:0 0 auto}
.btn-primary{background:var(--rose-btn);color:#fff;box-shadow:0 12px 26px -10px rgba(236,90,118,.7)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost,.btn-alt{background:#fff;color:var(--plum);box-shadow:0 0 0 2px rgba(43,30,61,.12)}
.btn-ghost:hover,.btn-alt:hover{transform:translateY(-3px);color:var(--rose-ink)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-light:hover{background:#fff;color:var(--plum);transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:var(--plum)}
.btn-gold:hover{transform:translateY(-3px)}
.btn-wa{background:#13854A;color:#fff}
.btn-wa:hover{background:#0F6E3D;transform:translateY(-3px)}
.hero .btn-primary,main .btn-primary{box-shadow:0 8px 0 -2px var(--rose-d),0 22px 34px -18px rgba(236,90,118,.9)}
.hero .btn-ghost,.hero .btn-alt,main .btn-ghost{box-shadow:0 8px 0 -2px rgba(43,30,61,.14)}
.hero .btn-gold,main .btn-gold{box-shadow:0 8px 0 -2px #B9781F}
main .btn-wa{box-shadow:0 8px 0 -2px #0B5C31}
.hero .btn:active,main .btn:active{transform:translateY(3px);box-shadow:0 3px 0 -2px rgba(43,30,61,.25)}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;padding:178px 0 108px;background:var(--hero-bg)}
.toran{position:absolute;left:0;right:0;top:74px;height:72px;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M0 0C7 9 7 29 0 40C-7 29-7 9 0 0Z'/%3E%3Cpath d='M0 4V35' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/g%3E%3Cg id='m'%3E%3Ccircle r='7' fill='%23F4A21E'/%3E%3Ccircle r='5' fill='none' stroke='%23FFCB55' stroke-width='2.4' stroke-dasharray='2 1.7'/%3E%3Ccircle r='2.2' fill='%23DC760C'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M60 4V52' stroke='%23B07A3B' stroke-width='1.2'/%3E%3Cuse href='%23m' x='60' y='14'/%3E%3Cuse href='%23m' x='60' y='29'/%3E%3Ccircle cx='60' cy='43' r='6' fill='%23EC5A76'/%3E%3Ccircle cx='60' cy='43' r='4.2' fill='none' stroke='%23F9B3C2' stroke-width='2' stroke-dasharray='1.8 1.5'/%3E%3Cpath d='M57 49h6l-3 10z' fill='%23E8A03C'/%3E%3Cuse href='%23l' fill='%232E8B45' transform='translate(0 15)'/%3E%3Cuse href='%23l' fill='%232E8B45' transform='translate(120 15)'/%3E%3Cuse href='%23l' fill='%2345A85C' transform='translate(19 14.5) rotate(6)'/%3E%3Cuse href='%23l' fill='%232E8B45' transform='translate(39 11.5) rotate(10)'/%3E%3Cuse href='%23l' fill='%232E8B45' transform='translate(81 11.5) rotate(-10)'/%3E%3Cuse href='%23l' fill='%2345A85C' transform='translate(101 14.5) rotate(-6)'/%3E%3Cpath d='M0 16Q40 16 60 4Q80 16 120 16' fill='none' stroke='%23B07A3B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center top/134px 72px;
  animation:string-up 1s cubic-bezier(.3,.7,.2,1) both,toran-drop 1.1s var(--bounce) both}
@keyframes string-up{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes toran-drop{0%{transform:translateY(-14px)}100%{transform:none}}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.7rem,5.8vw,4.6rem);font-weight:700;color:var(--hero-ink);line-height:1.08}
.hero h1 .sub{display:block;font-size:.5em;font-weight:600;color:var(--hero-sub);line-height:1.18;margin-top:12px;max-width:16em}
.hero h1 .tag{display:block;font-family:var(--hand);font-weight:700;font-size:.62em;color:var(--gold);margin-top:8px;transform:rotate(-2deg);transform-origin:left}
.hero p.lead{font-size:clamp(1.04rem,1.8vw,1.16rem);color:var(--hero-lead);max-width:500px;margin:22px 0 0}
.quick{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px;padding:0;list-style:none}
.quick a{--qc:var(--rose);display:inline-flex;align-items:center;min-height:46px;padding:8px 17px;border-radius:100px;background:#fff;border:2.5px solid var(--qc);color:var(--plum);font-family:var(--display);font-weight:500;font-size:1rem;box-shadow:0 6px 0 -2px rgba(43,30,61,.08);transition:transform .3s var(--bounce),background .25s}
.quick li:nth-child(2) a{--qc:var(--gold)}
.quick li:nth-child(3) a{--qc:var(--lilac)}
.quick li:nth-child(4) a{--qc:var(--sky)}
.quick a b{font-weight:700;margin-right:.3em}
.quick a:hover{background:var(--qc);transform:translateY(-4px) rotate(-1.5deg)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* Santa lives inside the gift box but only pops out in the Christmas theme */
.santa{display:none}

/* the gift box */
.stage{position:relative;display:grid;place-items:center;min-height:440px}
.giftbox{position:relative;width:min(340px,80vw);aspect-ratio:1/1;background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:end center;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--bounce)}
.giftbox:hover{transform:scale(1.03) rotate(-1deg)}
.gb-base{position:relative;width:78%;height:56%;border-radius:20px;
  background:radial-gradient(circle,rgba(255,255,255,.3) 3px,transparent 3.6px) 0 0/24px 24px,var(--rose);
  box-shadow:inset 0 -14px 0 rgba(0,0,0,.09),0 26px 44px -24px rgba(43,30,61,.7)}
.gb-base::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:17%;transform:translateX(-50%);background:var(--gold)}
.gb-lid{position:absolute;left:6%;right:6%;bottom:52%;height:16%;border-radius:14px;background:var(--rose);box-shadow:0 12px 24px -14px rgba(43,30,61,.8);transition:transform .7s var(--bounce);z-index:3}
.gb-lid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:14%;transform:translateX(-50%);background:var(--gold)}
.gb-bow{position:absolute;left:50%;bottom:64%;width:31%;transform:translateX(-50%);z-index:4;transition:transform .7s var(--bounce);color:var(--gold)}
.gb-bow svg{width:100%;height:auto;display:block}
.giftbox.opened .gb-lid{transform:translateY(-190%) rotate(-9deg)}
.giftbox.opened .gb-bow{transform:translateX(-50%) translateY(-172%) rotate(12deg)}
.gb-reveal{position:absolute;left:50%;bottom:44%;z-index:2;transform:translate(-50%,26px) scale(.7);opacity:0;font-family:var(--hand);font-weight:700;font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;color:var(--plum);background:#fff;padding:14px 28px;border-radius:20px;box-shadow:var(--shadow);white-space:nowrap;transition:transform .6s .16s var(--bounce),opacity .5s .16s}
.gb-reveal b{color:var(--rose-ink)}
.giftbox.opened .gb-reveal{transform:translate(-50%,0) scale(1);opacity:1}
.hint{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:var(--hand);font-weight:700;font-size:1.4rem;color:var(--ink-soft);white-space:nowrap;transition:opacity .4s}
.hint-open,.stage.opened .hint-closed{opacity:0}
.stage.opened .hint-open{opacity:1;transition-delay:1.6s}
.confetti{position:absolute;top:38%;left:50%;width:1px;height:1px;pointer-events:none;z-index:5}
.confetti i{position:absolute;width:11px;height:15px;border-radius:3px;opacity:0}
@keyframes pop{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1)}}
.rain{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.rain i{position:absolute;top:-30px;left:var(--x);width:var(--w);height:var(--h);background:var(--c);border-radius:var(--br);animation:fall var(--d) cubic-bezier(.3,.5,.5,1) var(--dl) both}
@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0) rotateY(0)}100%{transform:translate3d(var(--dx),112vh,0) rotate(var(--r)) rotateY(900deg)}}

/* ── shared section bits ── */
section{position:relative}
section[id]{scroll-margin-top:110px}
.section-pad{padding:100px 0}
.bg-white{background:#fff;--hole:#fff}
.tint-a{background:var(--tint-a);--hole:var(--tint-a)}
.tint-b{background:var(--tint-b);--hole:var(--tint-b)}
.tint-c{background:var(--tint-c);--hole:var(--tint-c)}
.tint-d{background:var(--tint-d);--hole:var(--tint-d)}
.sec-head{text-align:center;max-width:660px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:16px 0 12px}
.sec-head p{color:var(--ink-soft);font-size:1.07rem}
/* section labels are little gift tags */
.eyebrow{position:relative;display:inline-block;font-family:var(--hand);font-weight:700;font-size:1.32rem;line-height:1;color:var(--tag-ink,#fff);background:var(--tag,var(--rose-btn));padding:7px 18px 8px 28px;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);transform:rotate(-2deg)}
.eyebrow::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--hole,var(--cream))}
.t-gold{--tag:var(--gold);--tag-ink:var(--plum)}
.t-sky{--tag:var(--sky);--tag-ink:var(--plum)}
.t-lilac{--tag:var(--lilac);--tag-ink:var(--plum)}
.t-green{--tag:var(--green);--tag-ink:var(--plum)}
.t-rose{--tag:var(--rose-btn);--tag-ink:#fff}

/* ── GIFT FINDER (interactive) ── */
.fd-occ{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:860px;margin:0 auto}
.fd-chip{--cc:var(--rose);font:inherit;font-family:var(--display);font-weight:500;font-size:1.05rem;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:10px 22px 10px 16px;border-radius:100px;background:#fff;color:var(--plum);border:2.5px solid var(--cc);cursor:pointer;box-shadow:0 6px 0 -2px rgba(43,30,61,.08);transition:transform .3s var(--bounce),background .25s,box-shadow .25s}
.fd-chip:nth-child(6n+2){--cc:var(--gold)}
.fd-chip:nth-child(6n+3){--cc:var(--sky)}
.fd-chip:nth-child(6n+4){--cc:var(--green)}
.fd-chip:nth-child(6n+5){--cc:var(--lilac)}
.fd-chip:nth-child(6n){--cc:#F4A21E}
.fd-chip .em{font-size:1.4rem;line-height:1}
.fd-chip:hover{transform:translateY(-4px) rotate(-1.5deg)}
.fd-chip[aria-pressed="true"]{background:var(--cc);transform:translateY(-3px);box-shadow:0 10px 0 -3px rgba(43,30,61,.18)}
.fd-result{max-width:900px;margin:34px auto 0;background:#fff;border-radius:var(--r);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);min-height:150px}
.fd-result.fresh{animation:fd-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fd-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.fd-result h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px}
.fd-result .fd-blurb{color:var(--ink-soft);margin-bottom:20px}
.fd-empty{display:flex;align-items:center;gap:16px;color:var(--ink-soft);font-size:1.08rem}
.fd-empty svg{flex:0 0 auto}
.fd-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 24px;padding:0;list-style:none}
.fd-pick{--pc:var(--rose);display:flex;flex-direction:column;gap:2px;height:100%;padding:16px 18px 16px;border-radius:18px;background:var(--pt,var(--rose-t));border-left:7px solid var(--pc);transition:transform .3s var(--bounce)}
.fd-pick:hover{transform:translateY(-4px)}
.fd-pick b{font-family:var(--display);font-weight:600;font-size:1.12rem}
.fd-pick span{font-size:.93rem;color:var(--ink-soft)}
.fd-pick.p-gold{--pc:var(--gold);--pt:var(--gold-t)}
.fd-pick.p-sky{--pc:var(--sky);--pt:var(--sky-t)}
.fd-pick.p-lilac{--pc:var(--lilac);--pt:var(--lilac-t)}
.fd-pick.p-green{--pc:var(--green);--pt:var(--green-t)}
.fd-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fd-cta .note{color:var(--ink-soft);font-size:.95rem}

/* ── craft items teaser (home) ── */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.feat-card{--cc:var(--rose);--ct:var(--rose-t);position:relative;display:grid;grid-template-columns:.9fr 1.1fr;min-height:380px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .4s var(--bounce),box-shadow .4s}
.feat-card.c2{--cc:var(--sky);--ct:var(--sky-t)}
.feat-card::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--cc);z-index:2}
.feat-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 34px 60px -28px rgba(43,30,61,.55)}
.feat-media{position:relative;background:var(--ct)}
.feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--bounce)}
.feat-card:hover .feat-media img{transform:scale(1.05)}
.feat-body{padding:34px 30px 30px;display:flex;flex-direction:column;gap:12px}
.feat-body h3{font-size:1.65rem}
.feat-body p{color:var(--ink-soft);font-size:1rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px;padding:0;list-style:none}
.chips li{padding:5px 14px;border-radius:100px;background:var(--ct);font-size:.9rem;font-weight:600;color:var(--plum)}
.more{margin-top:auto;font-family:var(--display);font-weight:600;color:var(--rose-ink);display:inline-flex;gap:8px;align-items:center;min-height:44px}
.more .ar{transition:transform .3s}
.feat-card:hover .more .ar,.gift:hover .more .ar,.mini:hover .more .ar{transform:translateX(5px)}
.foot-cta{display:flex;justify-content:center;margin-top:44px}
.feature.section-pad{padding-bottom:70px}

/* free greetings promo */
.greet-promo{padding:20px 0 80px}
.greet-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;background:linear-gradient(120deg,var(--sky),var(--lilac) 65%,var(--rose));border-radius:30px;padding:clamp(30px,4.6vw,52px) clamp(28px,5vw,56px);overflow:hidden;box-shadow:0 10px 0 -2px rgba(43,30,61,.14),0 30px 60px -28px rgba(43,30,61,.55);transition:transform .4s var(--bounce)}
.greet-card:hover{transform:translateY(-6px) rotate(-.3deg)}
.greet-spark{position:absolute;z-index:1;opacity:.85;color:#fff}
.greet-badge{display:inline-block;background:#fff;color:var(--rose-ink);font-weight:800;font-size:.85rem;padding:6px 15px;border-radius:100px;margin-bottom:16px;transform:rotate(-3deg);box-shadow:0 6px 0 -2px rgba(43,30,61,.12)}
.greet-copy{position:relative;z-index:2;max-width:520px}
.greet-copy h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem);margin:0 0 10px;text-shadow:0 2px 0 rgba(43,30,61,.12)}
.greet-copy h2 .script{display:block;font-family:var(--hand);font-weight:700;color:var(--plum);font-size:1.3em;line-height:1;margin-top:4px;text-shadow:none}
.greet-copy p{color:#fff;margin:0 0 24px;max-width:430px}
.greet-card .btn-primary{background:#fff;color:var(--rose-ink);box-shadow:0 8px 0 -2px rgba(43,30,61,.2)}
.greet-envelope{position:relative;z-index:2;flex:0 0 auto;transform:rotate(-4deg);transition:transform .5s var(--bounce)}
.greet-card:hover .greet-envelope{transform:rotate(4deg) translateY(-8px)}

/* services: gift cards whose lids lift */
.services{background:linear-gradient(180deg,var(--cream),#fff)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px}
.gift{position:relative;background:#fff;border-radius:26px;padding:76px 30px 34px;box-shadow:var(--shadow);transition:transform .4s var(--bounce),box-shadow .4s}
.gift[id]{scroll-margin-top:130px}
.gift .lid{position:absolute;top:-12px;left:14px;right:14px;height:48px;border-radius:16px;background:var(--lid,var(--rose));box-shadow:0 10px 22px -12px rgba(43,30,61,.5);transition:transform .55s var(--bounce)}
.gift .lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:16px;transform:translateX(-50%);background:rgba(255,255,255,.4)}
.gift .knot{position:absolute;top:-30px;left:50%;width:64px;height:40px;transform:translateX(-50%);z-index:3;transition:transform .55s var(--bounce)}
.gift:hover{transform:translateY(-10px);box-shadow:0 34px 60px -28px rgba(43,30,61,.6)}
.gift:hover .lid{transform:translateY(-28px) rotate(-2.5deg)}
.gift:hover .knot{transform:translateX(-50%) translateY(-36px) rotate(9deg)}
.ic{width:64px;height:64px;display:grid;place-items:center;background:var(--blush);border-radius:20px;margin-bottom:18px}
#return-gifts .ic{background:var(--rose-t)}#corporate-gifts .ic{background:var(--gold-t)}#personalized-gifts .ic{background:var(--lilac-t)}
.gift h3{font-size:1.55rem;margin-bottom:10px}
.gift p{color:var(--ink-soft);font-size:1rem;margin:0 0 18px}
.sticker{position:absolute;top:66px;right:22px;font-family:var(--hand);font-weight:700;font-size:1.15rem;color:var(--plum);background:var(--lilac);padding:3px 14px;border-radius:100px;transform:rotate(-7deg)}

/* creative gifting + how it works */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{position:relative;padding:36px 28px;border-radius:26px;background:var(--blush)}
.step:nth-child(2){background:#FBEEDE}.step:nth-child(3){background:#EFEAF8}
.step .ic{background:#fff;margin-bottom:16px}
.step .n{font-family:var(--hand);font-weight:700;font-size:3.6rem;color:var(--rose-ink);line-height:1}
.step h3{font-size:1.28rem;margin:6px 0 8px}
.step p{margin:0;color:var(--ink-soft);font-size:1rem}
.step .thread{position:absolute;top:56px;right:-22px;width:24px;height:4px;border-radius:9px;background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 13px)}

/* faq accordion */
.faq-list{max-width:800px;margin:0 auto;display:grid;gap:14px}
.faq-list details{background:#fff;border-radius:20px;padding:0 26px;box-shadow:0 6px 0 -2px rgba(43,30,61,.09)}
.faq-list details[open]{box-shadow:var(--shadow)}
.faq-list summary{list-style:none;cursor:pointer;position:relative;padding:22px 50px 22px 0;font-family:var(--display);font-weight:600;font-size:1.17rem;line-height:1.3}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--rose-t);color:var(--rose-ink);display:grid;place-items:center;font-family:var(--body);font-size:1.4rem;line-height:1;transition:transform .35s var(--bounce)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0 0 24px;color:var(--ink-soft)}

/* occasions: scalloped like a party tablecloth, every chip its own colour */
.occasions{background:var(--plum);color:var(--cream)}
.occasions::before,.occasions::after{content:"";position:absolute;left:0;right:0;height:16px;z-index:2;background-repeat:repeat-x;background-size:32px 16px;background-position:center;pointer-events:none}
.occasions::before{top:0;background-image:radial-gradient(circle at 16px 0,#fff 15px,transparent 15.6px)}
.occasions::after{bottom:0;background-image:radial-gradient(circle at 16px 16px,#fff 15px,transparent 15.6px)}
.occasions .wrap{position:relative;z-index:1}
.occasions h2{color:#fff}
.occasions .sec-head p{color:var(--on-dark)}
.occasions .eyebrow{--hole:var(--plum)}
.occ-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.occ{--oc:var(--rose);display:inline-flex;align-items:center;gap:10px;min-height:50px;background:rgba(255,255,255,.06);border:2px solid var(--oc);padding:11px 24px 11px 18px;border-radius:100px;font-weight:600;transition:transform .35s var(--bounce),background .3s,color .3s}
.occ:nth-child(5n+2){--oc:var(--gold)}.occ:nth-child(5n+3){--oc:var(--sky)}.occ:nth-child(5n+4){--oc:var(--green)}.occ:nth-child(5n){--oc:var(--lilac)}
.occ span{font-size:1.25rem;line-height:1}
.occ:hover{background:var(--oc);color:var(--plum);transform:translateY(-5px) rotate(-2deg)}

/* reviews */
.reviews{background:linear-gradient(180deg,#fff,var(--cream));--hole:#fff}
.rev-badge{display:flex;width:max-content;max-width:100%;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;background:#fff;padding:10px 22px;border-radius:100px;box-shadow:0 10px 26px -18px rgba(43,30,61,.5);margin:18px auto 0}
.rev-badge .stars,.rev-stars{color:#D98A14;letter-spacing:2px}
.rev-badge b{font-weight:800}
.g-logo{width:20px;height:20px;flex:0 0 auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rev-card{--rc:var(--rose);position:relative;background:#fff;border-radius:22px;padding:32px 26px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;border-top:6px solid var(--rc)}
.rev-card:nth-child(2){--rc:var(--gold)}.rev-card:nth-child(3){--rc:var(--sky)}
.rev-text{font-size:1rem;flex:1}
.rev-foot{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(43,30,61,.08)}
.rev-avatar{width:38px;height:38px;border-radius:50%;background:var(--rc);display:grid;place-items:center;font-weight:700;color:var(--plum);flex:0 0 auto;font-family:var(--display)}
.rev-name{font-weight:700;font-size:.92rem}
.rev-src{font-size:.8rem;color:var(--ink-soft)}
.rev-cta{display:flex;justify-content:center;margin-top:42px}

/* about */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.about h2{font-size:clamp(2.1rem,4.4vw,3rem);margin:16px 0 18px}
.about p{color:var(--ink-soft);font-size:1.06rem;margin:0 0 16px;max-width:60ch}
.about .accent{color:var(--rose-ink);font-weight:700}
.concept-card{position:relative;aspect-ratio:1/1;border-radius:32px;background:radial-gradient(120% 120% at 20% 10%,var(--blush),#fff);box-shadow:var(--shadow);display:grid;place-items:center;overflow:hidden}
.concept-card .say{font-family:var(--hand);font-weight:700;font-size:clamp(2.2rem,6vw,3.6rem);text-align:center;line-height:1.05;z-index:2;padding:24px;margin:0}
.concept-card .say b{color:var(--rose-ink)}
.cc-float{position:absolute}

/* contact */
.contact{background:linear-gradient(180deg,#fff,var(--blush));padding-bottom:110px}
.contact-card{background:var(--plum);border-radius:34px;padding:clamp(36px,5vw,64px);color:var(--cream);position:relative;overflow:hidden;box-shadow:var(--shadow);--hole:var(--plum)}
.contact-card > *:not(.fx-stars):not(.cc-deco){position:relative;z-index:1}
.contact-card h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.1rem);max-width:560px;margin-top:18px}
.contact-card .lead{color:var(--on-dark);margin:14px 0 30px;max-width:500px;font-size:1.07rem}
.local-seo-copy{color:var(--on-dark-soft);margin:0 0 22px;max-width:760px;font-size:.95rem}
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:780px}
.crow{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:16px 20px;border-radius:16px;transition:background .3s,border-color .3s,transform .3s var(--bounce)}
.crow:hover{background:rgba(236,90,118,.2);border-color:var(--rose);transform:translateY(-3px)}
.crow .ci{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:0 0 auto}
.crow .lbl{font-size:.84rem;color:var(--on-dark-soft)}
.crow .val{font-weight:700;font-size:1.04rem;color:#fff;word-break:break-word}
.cc-deco{position:absolute;right:-40px;top:-40px;opacity:.18;color:var(--gold);z-index:0}
.founder-note{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.fn-name{margin:0;font-weight:700;font-size:1.06rem;color:#fff}
.fn-deg{font-weight:500;font-size:.88rem;color:var(--on-dark-soft)}
.fn-title{margin:2px 0 0;font-family:var(--hand);font-weight:700;font-size:1.4rem;color:var(--gold)}

/* scroll reveal (driven by njoi-layout.js) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}

/* ── responsive ── */
@media(max-width:980px){
  .hero{padding:156px 0 100px}
  .hero-inner{grid-template-columns:1fr;gap:6px}
  .stage{min-height:340px;margin-top:18px}
  .giftbox{width:min(250px,66vw)}
  .feat-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .svc-grid,.steps-grid,.rev-grid{grid-template-columns:1fr}
  .svc-grid{gap:48px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .contacts{grid-template-columns:1fr}
  .step .thread{display:none}
  .section-pad{padding:78px 0}
}
@media(max-width:760px){
  .greet-card{flex-direction:column;text-align:center;gap:22px}
  .greet-copy p{margin-inline:auto}
  .toran{background-size:104px 56px;height:56px}
  .feat-card{grid-template-columns:1fr;min-height:0}
  .feat-media{min-height:260px}
}
@media(max-width:560px){
  .hero{padding-top:200px}
  .hero-sub{padding-top:200px}
  .hero h1{font-size:2.6rem}
  .hero-cta .btn{flex:1 1 100%}
  .fd-chip{flex:1 1 calc(50% - 12px);justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ════════════════════════════════════════════════════════════════════════
   CHRISTMAS  —  everything below only applies when data-theme="christmas"
   Pine green · champagne gold · cranberry on ivory. Playfair Display + Jost.
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="christmas"]{
  --plum:#0F2A22; --rose:#A3162F; --rose-d:#7B0F23; --rose-btn:#A3162F; --rose-ink:#A3162F;
  --gold:#C9A24B; --gold-l:#E9D49A; --cream:#FAF6EE; --blush:#F4E9E1; --ink-soft:#4F625A;
  --sky:#6E9DBB; --lilac:#1E5C46; --green:#2E7D5B;
  --on-dark:#E3EDE7; --on-dark-soft:#A9C2B5;
  --tint-a:#FAF6EE; --tint-b:#FFFFFF; --tint-c:#FFFFFF; --tint-d:#FFFFFF;
  --rose-t:#F4E9E1; --sky-t:#E4EEF4; --gold-t:#F6EEDC; --lilac-t:#E4EFE8; --green-t:#E4EFE8;
  --hair:rgba(201,162,75,.45); --hair-s:rgba(201,162,75,.55);
  --r:22px; --shadow:0 26px 50px -28px rgba(15,42,34,.55);
  --display:'Playfair Display','Bodoni 72','Didot',Georgia,serif;
  --hand:'Playfair Display','Bodoni 72','Didot',Georgia,serif;
  --body:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;
  --hero-bg:radial-gradient(46% 52% at 82% 34%,rgba(201,162,75,.22),transparent 72%),radial-gradient(50% 60% at 6% 96%,rgba(46,125,91,.5),transparent 70%),linear-gradient(180deg,#081A14,#0F2A22 55%,#14392C);
  --hero-ink:#fff; --hero-sub:var(--gold-l); --hero-lead:var(--on-dark);
}
[data-theme="christmas"] h1,[data-theme="christmas"] h2,[data-theme="christmas"] h3{letter-spacing:-.008em}
/* buttons: refined, flat, hairline */
[data-theme="christmas"] .btn{font-family:var(--body);font-weight:600;font-size:1rem;border-width:1.5px;transition:transform .25s,background .25s,box-shadow .25s,color .25s,border-color .25s}
[data-theme="christmas"] .btn-primary,[data-theme="christmas"] .hero .btn-primary,[data-theme="christmas"] main .btn-primary{background:var(--rose);box-shadow:0 14px 26px -14px rgba(163,22,47,.9)}
[data-theme="christmas"] .btn-primary:hover{background:var(--rose-d);transform:translateY(-2px)}
[data-theme="christmas"] .btn-ghost,[data-theme="christmas"] .btn-alt,[data-theme="christmas"] .hero .btn-ghost,[data-theme="christmas"] .hero .btn-alt,[data-theme="christmas"] main .btn-ghost{background:transparent;border-color:var(--gold);box-shadow:none}
[data-theme="christmas"] .btn-ghost:hover,[data-theme="christmas"] .btn-alt:hover{background:rgba(201,162,75,.18);color:var(--plum);transform:translateY(-2px)}
[data-theme="christmas"] .hero .btn-alt{color:var(--cream)}
[data-theme="christmas"] .hero .btn-alt:hover{color:var(--cream);background:rgba(201,162,75,.24)}
[data-theme="christmas"] .btn-light{background:transparent;border-color:var(--gold);color:var(--cream)}
[data-theme="christmas"] .btn-light:hover{background:rgba(201,162,75,.22);color:var(--cream);transform:translateY(-2px)}
[data-theme="christmas"] .btn-gold,[data-theme="christmas"] .hero .btn-gold,[data-theme="christmas"] main .btn-gold{background:linear-gradient(135deg,#EBD798,#C9A24B 55%,#B58A2F);box-shadow:0 14px 26px -16px rgba(0,0,0,.7)}
[data-theme="christmas"] main .btn-wa{box-shadow:0 14px 26px -14px rgba(19,133,74,.9)}
[data-theme="christmas"] .hero .btn:active,[data-theme="christmas"] main .btn:active{box-shadow:none}
/* hero: a pine-green evening */
[data-theme="christmas"] .hero{color:var(--cream);padding:176px 0 132px}
[data-theme="christmas"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 18px 100%,var(--cream) 17px,transparent 17.6px) 0 0/72px 30px repeat-x,radial-gradient(circle at 48px 100%,var(--cream) 24px,transparent 24.6px) 0 0/72px 30px repeat-x,radial-gradient(circle at 66px 100%,var(--cream) 12px,transparent 12.6px) 0 0/72px 30px repeat-x}
[data-theme="christmas"] .hero h1{font-size:clamp(2.6rem,5.1vw,4.2rem);font-weight:600;line-height:1.08}
[data-theme="christmas"] .hero h1 .sub{font-size:.42em;font-weight:500;line-height:1.25;margin-top:16px;max-width:19em}
[data-theme="christmas"] .hero h1 .tag{font-style:italic;font-weight:500;font-size:.4em;margin-top:10px;transform:none}
[data-theme="christmas"] .hero p.lead{font-size:clamp(1.04rem,1.8vw,1.18rem);max-width:520px;margin-top:24px}
[data-theme="christmas"] .quick{gap:8px;margin:26px 0 32px}
[data-theme="christmas"] .quick a,[data-theme="christmas"] .quick li:nth-child(n) a{--qc:var(--gold);min-height:44px;padding:8px 16px;border-width:1px;background:rgba(255,255,255,.05);color:var(--cream);font-family:var(--body);font-weight:500;font-size:.97rem;box-shadow:none}
[data-theme="christmas"] .quick a b{color:var(--gold-l);font-weight:600}
[data-theme="christmas"] .quick a:hover{background:var(--gold);color:var(--plum);transform:none}
[data-theme="christmas"] .quick a:hover b{color:var(--plum)}
[data-theme="christmas"] .gb-base{border-radius:18px;background:radial-gradient(circle,rgba(255,255,255,.22) 2.5px,transparent 3.1px) 0 0/22px 22px,var(--rose);box-shadow:inset 0 -14px 0 rgba(0,0,0,.12),0 26px 44px -22px rgba(0,0,0,.8)}
[data-theme="christmas"] .gb-base::after,[data-theme="christmas"] .gb-lid::after{background:linear-gradient(90deg,#B58A2F,#EBD798 50%,#B58A2F)}
[data-theme="christmas"] .gb-reveal{font-weight:600;font-size:clamp(1.8rem,3.8vw,2.7rem);border:1px solid var(--gold);padding:14px 30px;box-shadow:0 24px 40px -20px rgba(0,0,0,.7);background:var(--cream)}
[data-theme="christmas"] .gb-reveal b{font-style:italic;font-weight:500}
[data-theme="christmas"] .hint{font-style:italic;font-weight:500;font-size:1.15rem;color:var(--on-dark-soft);transform:translateX(-50%)}
[data-theme="christmas"] .giftbox:hover{transform:none}
/* section labels */
[data-theme="christmas"] .eyebrow{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--tag-ink,var(--plum));background:var(--tag,var(--gold-l));padding:9px 18px 9px 30px;transform:none}
[data-theme="christmas"] .t-gold{--tag:var(--gold)}
[data-theme="christmas"] .t-rose{--tag:var(--rose);--tag-ink:#fff}
[data-theme="christmas"] .t-green,[data-theme="christmas"] .t-lilac{--tag:var(--lilac);--tag-ink:#fff}
[data-theme="christmas"] .t-sky{--tag:#BCD3E3}
[data-theme="christmas"] .sec-head h2{font-weight:600;line-height:1.14}
/* gift finder */
[data-theme="christmas"] .fd-chip,[data-theme="christmas"] .fd-chip:nth-child(n){--cc:var(--gold);font-family:var(--body);font-weight:500;border-width:1.5px;box-shadow:none;background:#fff}
[data-theme="christmas"] .fd-chip:hover{transform:translateY(-2px)}
[data-theme="christmas"] .fd-chip[aria-pressed="true"]{background:var(--plum);color:#fff;border-color:var(--plum);box-shadow:0 14px 24px -16px rgba(15,42,34,.9)}
[data-theme="christmas"] .fd-result{border:1px solid var(--hair)}
[data-theme="christmas"] .fd-pick,[data-theme="christmas"] .fd-pick.p-gold,[data-theme="christmas"] .fd-pick.p-sky,[data-theme="christmas"] .fd-pick.p-lilac,[data-theme="christmas"] .fd-pick.p-green{border-left-width:4px;--pc:var(--gold);--pt:var(--gold-t)}
/* craft teaser */
[data-theme="christmas"] .feat-card,[data-theme="christmas"] .feat-card.c2{--cc:var(--gold);--ct:var(--blush);border:1px solid var(--hair)}
[data-theme="christmas"] .feat-card::before{display:none}
[data-theme="christmas"] .feat-card:hover{transform:translateY(-6px)}
[data-theme="christmas"] .feat-body h3{font-size:1.6rem}
[data-theme="christmas"] .chips li{border:1px solid rgba(201,162,75,.7);background:rgba(233,212,154,.22);font-weight:500}
/* greetings */
[data-theme="christmas"] .greet-card{background:radial-gradient(60% 120% at 100% 0%,rgba(201,162,75,.28),transparent 70%),linear-gradient(120deg,#123628,var(--plum));border:1px solid rgba(201,162,75,.6);box-shadow:var(--shadow)}
[data-theme="christmas"] .greet-card:hover{transform:translateY(-5px)}
[data-theme="christmas"] .greet-spark{color:var(--gold)}
[data-theme="christmas"] .greet-badge{background:var(--gold);color:var(--plum);font-weight:600;transform:none;box-shadow:none}
[data-theme="christmas"] .greet-copy h2{font-weight:600;text-shadow:none}
[data-theme="christmas"] .greet-copy h2 .script{color:var(--gold-l);font-style:italic;font-weight:500;font-size:1em;line-height:1.1}
[data-theme="christmas"] .greet-copy p{color:var(--on-dark)}
[data-theme="christmas"] .greet-card .btn-primary{background:var(--rose);color:#fff;box-shadow:0 14px 26px -14px rgba(163,22,47,.9)}
/* services */
[data-theme="christmas"] .gift{border:1px solid var(--hair)}
[data-theme="christmas"] .gift .lid::before{background:linear-gradient(90deg,#B58A2F,#EBD798 50%,#B58A2F)}
[data-theme="christmas"] .ic{border-radius:50%}
[data-theme="christmas"] #return-gifts .ic,[data-theme="christmas"] #corporate-gifts .ic,[data-theme="christmas"] #personalized-gifts .ic{background:var(--blush)}
[data-theme="christmas"] .gift h3{font-size:1.6rem}
[data-theme="christmas"] .sticker{font-family:var(--display);font-style:italic;font-weight:500;font-size:1rem;color:var(--plum);background:var(--gold-l);transform:none}
/* steps, faq */
[data-theme="christmas"] .step{border:1px solid rgba(201,162,75,.35)}
[data-theme="christmas"] .step .n{font-style:italic;font-weight:500;font-size:3.6rem}
[data-theme="christmas"] .step .thread{height:3px}
[data-theme="christmas"] .faq-list details{border:1px solid rgba(201,162,75,.45);box-shadow:none}
[data-theme="christmas"] .faq-list details[open]{box-shadow:var(--shadow)}
[data-theme="christmas"] .faq-list summary::after{background:var(--blush)}
/* occasions: a dusting of snow */
[data-theme="christmas"] .occasions{background:radial-gradient(circle,rgba(255,255,255,.07) 1.4px,transparent 2px) 0 0/30px 30px,var(--plum)}
[data-theme="christmas"] .occ,[data-theme="christmas"] .occ:nth-child(n){--oc:var(--gold);border-width:1px;background:rgba(255,255,255,.05);font-weight:500}
[data-theme="christmas"] .occ:hover{transform:translateY(-4px);color:var(--plum)}
[data-theme="christmas"] .occ.hot{background:var(--rose);border-color:var(--rose);color:#fff}
/* reviews */
[data-theme="christmas"] .rev-badge{border:1px solid var(--hair);box-shadow:0 12px 26px -20px rgba(15,42,34,.6)}
[data-theme="christmas"] .rev-badge .stars,[data-theme="christmas"] .rev-stars{color:#B58A2F}
[data-theme="christmas"] .rev-card,[data-theme="christmas"] .rev-card:nth-child(n){--rc:var(--gold);border:1px solid rgba(201,162,75,.4);border-top-width:1px}
[data-theme="christmas"] .rev-avatar{background:var(--plum);color:var(--gold-l);font-weight:600}
/* about + contact */
[data-theme="christmas"] .concept-card{border:1px solid var(--hair);background:radial-gradient(120% 120% at 20% 10%,#fff,var(--blush))}
[data-theme="christmas"] .concept-card .say{font-weight:600}
[data-theme="christmas"] .concept-card .say b{font-style:italic;font-weight:500}
[data-theme="christmas"] .contact-card{background:radial-gradient(70% 90% at 100% 0%,rgba(201,162,75,.2),transparent 70%),var(--plum);border:1px solid rgba(201,162,75,.6);border-radius:34px}
[data-theme="christmas"] .contact-card h2{font-weight:600;line-height:1.14}
[data-theme="christmas"] .crow{border-color:rgba(201,162,75,.35);border-radius:18px}
[data-theme="christmas"] .crow:hover{background:rgba(201,162,75,.16);border-color:var(--gold)}
[data-theme="christmas"] .crow .ci{border-radius:50%}
[data-theme="christmas"] .founder-note{border-top-color:rgba(201,162,75,.3)}
[data-theme="christmas"] .fn-title{font-style:italic;font-weight:500;font-size:1.3rem}

/* ── Santa: pops out of the opened gift box, then dances ── */
[data-theme="christmas"] .gb-base{z-index:2}
[data-theme="christmas"] .gb-reveal{z-index:3;bottom:14%;font-size:clamp(1.35rem,2.5vw,1.85rem);padding:10px 22px;border-radius:16px}
[data-theme="christmas"] .gb-lid,[data-theme="christmas"] .gb-bow{transition:transform .7s var(--bounce),opacity .45s .25s}
[data-theme="christmas"] .giftbox.opened .gb-lid{transform:translateY(-300%) rotate(-12deg);opacity:0}
[data-theme="christmas"] .giftbox.opened .gb-bow{transform:translateX(-50%) translateY(-330%) rotate(14deg);opacity:0}
[data-theme="christmas"] .santa{display:block;position:absolute;left:50%;bottom:56%;width:37%;z-index:1;pointer-events:none;
  transform:translate(-50%,108%) scale(.72);transform-origin:50% 100%;opacity:0;transition:transform .3s ease-in,opacity .15s .12s}
[data-theme="christmas"] .giftbox.opened .santa{transform:translate(-50%,0) scale(1);opacity:1;transition:transform .95s .95s var(--bounce),opacity .01s .95s}
.santa-svg{display:block;width:100%;height:auto;overflow:visible}
.santa-svg .s-sway{transform-origin:60px 186px}
.santa-svg .s-arm-l{transform-origin:29px 80px;transform:rotate(14deg)}
.santa-svg .s-arm-r{transform-origin:91px 80px;transform:rotate(-14deg)}
.santa-svg .s-leg-l{transform-origin:48px 140px}
.santa-svg .s-leg-r{transform-origin:72px 140px}
.santa-svg .s-head{transform-origin:60px 70px}
.santa-svg .s-pom{transform-origin:92px 22px}
.santa-svg .s-all{transform-origin:60px 186px}
[data-theme="christmas"] .giftbox.opened .s-all{animation:s-hop .72s ease-in-out 1.95s infinite}
[data-theme="christmas"] .giftbox.opened .s-sway{animation:s-sway .72s ease-in-out 1.95s infinite alternate}
[data-theme="christmas"] .giftbox.opened .s-arm-l{animation:s-armL .72s ease-in-out 1.95s infinite alternate}
[data-theme="christmas"] .giftbox.opened .s-arm-r{animation:s-armR .72s ease-in-out 1.95s infinite alternate-reverse}
[data-theme="christmas"] .giftbox.opened .s-leg-l{animation:s-legL .72s ease-in-out 1.95s infinite alternate}
[data-theme="christmas"] .giftbox.opened .s-leg-r{animation:s-legR .72s ease-in-out 1.95s infinite alternate}
[data-theme="christmas"] .giftbox.opened .s-head{animation:s-head .72s ease-in-out 1.95s infinite alternate-reverse}
[data-theme="christmas"] .giftbox.opened .s-pom{animation:s-pom .36s ease-in-out 1.95s infinite alternate}
@keyframes s-hop{0%,100%{transform:translateY(0) scale(1.03,.97)}50%{transform:translateY(-12px) scale(.98,1.03)}}
@keyframes s-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes s-armL{from{transform:rotate(30deg)}to{transform:rotate(158deg)}}
@keyframes s-armR{from{transform:rotate(-30deg)}to{transform:rotate(-158deg)}}
@keyframes s-legL{from{transform:rotate(0)}to{transform:rotate(-15deg)}}
@keyframes s-legR{from{transform:rotate(15deg)}to{transform:rotate(0)}}
@keyframes s-head{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes s-pom{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@media(prefers-reduced-motion:reduce){
  [data-theme="christmas"] .santa,[data-theme="christmas"] .giftbox.opened .santa{transition:none}
  [data-theme="christmas"] .giftbox.opened .s-all,[data-theme="christmas"] .giftbox.opened .s-sway,[data-theme="christmas"] .giftbox.opened .s-arm-l,[data-theme="christmas"] .giftbox.opened .s-arm-r,[data-theme="christmas"] .giftbox.opened .s-leg-l,[data-theme="christmas"] .giftbox.opened .s-leg-r,[data-theme="christmas"] .giftbox.opened .s-head,[data-theme="christmas"] .giftbox.opened .s-pom{animation:none}
}
@media(max-width:980px){[data-theme="christmas"] .santa{width:40%}}
@media(max-width:560px){.hint{white-space:normal;width:min(320px,88vw);text-align:center;line-height:1.25}}