/* ============================================================
   Gift Cards — a live-preview "gifting studio" (.gc-).
   Left: the card floats on a spotlit stage with a fanned deck of
   the other themes peeking behind it, a bow + wax-seal medallion,
   drifting sparkles/leaves, and it reacts to the chosen occasion
   (a sticker pops on). Card themes are pure-CSS via [data-theme];
   the photo theme's background-image is set inline by
   gift-cards.js. Keyframes namespaced gc*; style.css owns the
   prefers-reduced-motion kill.
   ============================================================ */

@keyframes gcShimmer{ 0%{ transform:translateX(-120%) skewX(-18deg); } 60%,100%{ transform:translateX(320%) skewX(-18deg); } }
@keyframes gcFloat{ 0%,100%{ transform:translateY(0) rotate(-1.4deg); } 50%{ transform:translateY(-10px) rotate(-1.4deg); } }
@keyframes gcBowPop{ 0%,100%{ transform:translateX(-50%) scale(1) rotate(0deg); } 45%{ transform:translateX(-50%) scale(1.14) rotate(-7deg); } 70%{ transform:translateX(-50%) scale(1.04) rotate(4deg); } }
@keyframes gcConfetti{ 0%{ transform:translateY(-6px) rotate(0deg); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(150px) rotate(220deg); opacity:0; } }
@keyframes gcPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.55); opacity:.45; } }
@keyframes gcTwinkle{ 0%,100%{ transform:scale(.7) rotate(0deg); opacity:.25; } 50%{ transform:scale(1.15) rotate(90deg); opacity:.9; } }
@keyframes gcDriftLeaf{ 0%,100%{ transform:translate(0,0) rotate(-6deg); } 33%{ transform:translate(8px,-14px) rotate(8deg); } 66%{ transform:translate(-6px,10px) rotate(-4deg); } }
@keyframes gcPop{ 0%{ transform:scale(0) rotate(-14deg); } 60%{ transform:scale(1.18) rotate(10deg); } 100%{ transform:scale(1) rotate(8deg); } }
@keyframes gcSwap{
  0%{ transform:translateX(0) rotateY(0deg) scale(1); opacity:1; }
  38%{ transform:translateX(86px) rotateY(-22deg) scale(.9); opacity:0; }
  39%{ transform:translateX(-86px) rotateY(22deg) scale(.9); opacity:0; }
  100%{ transform:translateX(0) rotateY(0deg) scale(1); opacity:1; }
}
/* How-it-works — organic blob steps (boxless) */
@keyframes gcBlob{
  0%,100%{ border-radius:63% 37% 54% 46% / 55% 48% 52% 45%; }
  34%{ border-radius:40% 60% 63% 37% / 46% 62% 38% 54%; }
  67%{ border-radius:54% 46% 38% 62% / 61% 42% 58% 39%; }
}
@keyframes gcBlobB{
  0%,100%{ border-radius:52% 48% 42% 58% / 58% 42% 58% 42%; }
  50%{ border-radius:42% 58% 60% 40% / 46% 60% 40% 54%; }
}

/* ---- Shared decorative orbs ---- */
.gc-orb{ position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; z-index:0; }

/* ---- Hero ---- */
.gc-hero3{ position:relative; overflow:hidden; text-align:center; padding:52px 22px 12px; }
.gc-orb-hero{ top:-160px; left:50%; transform:translateX(-50%); width:520px; height:320px; background:rgba(110,145,82,.14); }
.gc-hero3 .wrap{ position:relative; z-index:1; max-width:680px; }
.gc-hero3 .eyebrow{ margin-inline:auto; }
.gc-hero3 h1{ margin:16px 0 0; }
.gc-hero3 h1 em{ color:var(--peach-d); font-style:italic; }
.gc-hero3 .sub{ margin:16px auto 0; max-width:600px; }
.gc-trust{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.gc-trust li{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px; font:600 13px var(--font-b); color:var(--ink2);
  box-shadow:0 6px 16px -12px rgba(63,82,54,.4);
}
.gc-trust-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ---- Builder shell ---- */
.gc-build-sec{ position:relative; overflow:hidden; padding:40px 22px 52px; background:linear-gradient(180deg, var(--band) 0%, rgba(244,247,238,0) 62%); }
.gc-orb-a{ top:-120px; right:-120px; width:420px; height:420px; background:rgba(110,145,82,.15); }
.gc-orb-b{ bottom:-150px; left:-120px; width:440px; height:440px; background:rgba(199,126,90,.12); }
.gc-build{
  position:relative; z-index:1;
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:36px; align-items:stretch;
  max-width:1060px; margin:0 auto;
}

/* ---- Left column: the gifting studio (equal-height, spotlit) ---- */
.gc-preview-col{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(180deg, #EEF3E6 0%, #FBF9F3 100%);
  border:1px solid var(--line); border-radius:var(--r-panel);
  padding:38px 30px; box-shadow:var(--shadow-soft);
}
.gc-preview-col::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 42% at 50% 40%, rgba(255,255,255,.8), transparent 72%);
}
.gc-card-stage,
.gc-live-note,
.gc-theme-block{ position:relative; z-index:2; }

/* Ambient sparkles + leaves */
.gc-spark{ position:absolute; z-index:1; color:var(--butter); font-size:13px; pointer-events:none; animation:gcTwinkle 3.4s ease-in-out infinite; }
.gc-leaf-fx{ position:absolute; z-index:1; font-size:22px; opacity:.45; pointer-events:none; animation:gcDriftLeaf 9s ease-in-out infinite; }

.gc-card-stage{ max-width:412px; width:100%; margin:0 auto; }
.gc-scene{ position:relative; }

/* Fanned deck of the other themes peeking behind */
.gc-ghost{
  position:absolute; z-index:1; top:18px; left:0; right:0; bottom:0;
  border-radius:24px; opacity:.5; filter:blur(.4px);
  box-shadow:0 20px 42px -24px rgba(20,50,25,.55);
}
.gc-ghost-a{ background:linear-gradient(135deg,#D9B267,#8A6A2C); transform:translate(-26px,-8px) rotate(-8deg) scale(.95); transform-origin:bottom center; }
.gc-ghost-b{ background:linear-gradient(135deg,#A94E87,#5F2B8F); transform:translate(26px,-4px) rotate(7deg) scale(.94); transform-origin:bottom center; }

.gc-cardbox{ position:relative; z-index:2; padding-top:18px; perspective:1100px; }
.gc-pedestal{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:86%; height:60px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(92,122,80,.32), transparent 74%);
  filter:blur(7px); pointer-events:none; z-index:0;
}
.gc-confetti{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.gc-confetti i{
  position:absolute; top:2px; width:7px; height:7px; border-radius:2px;
  animation:gcConfetti var(--d,4.5s) ease-in infinite var(--delay,0s);
}
.gc-bow{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  font-size:30px; z-index:5; line-height:1;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
  animation:gcBowPop 3.2s ease-in-out infinite;
}

/* Occasion sticker — pops on when an occasion is chosen (JS) */
.gc-occasion-sticker{
  position:absolute; top:26px; right:-14px; z-index:6;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--white); box-shadow:0 8px 18px -6px rgba(0,0,0,.35);
  transform:scale(0) rotate(-14deg); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gc-occasion-sticker.is-on{ animation:gcPop .4s cubic-bezier(.34,1.56,.64,1) both; }

/* Wax-seal medallion overlapping the corner */
.gc-seal{
  position:absolute; bottom:-16px; right:-8px; z-index:6;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color:var(--cream);
  background:radial-gradient(circle at 35% 30%, var(--sage2), var(--sage-d));
  border:2px dashed rgba(255,255,255,.5);
  box-shadow:0 10px 22px -8px rgba(20,50,25,.6);
}

.gc-card{
  position:relative; overflow:hidden;
  border-radius:24px; padding:26px 28px 22px; min-height:256px;
  display:flex; flex-direction:column;
  color:var(--cream); box-shadow:0 26px 60px -28px rgba(20,50,25,.55);
  background:
    radial-gradient(120% 150% at 85% -20%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(135deg, #D2668A 0%, #A83E6A 52%, #6E2B50 100%);
  transition:transform .3s ease, box-shadow .3s ease;
  animation:gcFloat 6s ease-in-out infinite;
}
.gc-card:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:0 36px 78px -30px rgba(20,50,25,.55); }
.gc-card.is-swapping{ animation:gcSwap .5s cubic-bezier(.4,.15,.3,1) both; }
.gc-card::after{
  content:""; position:absolute; top:0; left:0; width:40%; height:100%; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation:gcShimmer 4.8s ease-in-out infinite;
}

/* Theme backgrounds + patterns (swapped by data-theme):
   For Her = her (base .gc-card), For Him = him, For Kids = kids, plus photo. */
.gc-card[data-theme="him"]{
  background:
    radial-gradient(120% 150% at 85% -20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #2F6E5A 0%, #1E5347 52%, #123A31 100%);
}
.gc-card[data-theme="kids"]{
  background:
    radial-gradient(120% 150% at 85% -20%, rgba(255,255,255,.24), transparent 55%),
    linear-gradient(135deg, #2F86C9 0%, #2C63C0 52%, #3A46B0 100%);
}
.gc-card[data-theme="photo"]{ background:linear-gradient(135deg, #5b6472, #2f3742); }

/* Each theme carries a distinct pattern behind the content */
.gc-card::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.gc-card[data-theme="photo"]::before{ display:none; }
/* Theme corner decorations */
.gc-deco{ position:absolute; top:-14px; right:-8px; width:160px; height:150px; opacity:.5; pointer-events:none; display:none; z-index:0; }
.gc-card[data-theme="her"]  .gc-deco-her,
.gc-card[data-theme="him"]  .gc-deco-him,
.gc-card[data-theme="kids"] .gc-deco-kids{ display:block; }
/* Bigger, fuller corner artwork per theme (floral / botanical / doodles) */
.gc-card[data-theme="her"]  .gc-deco-her{ opacity:.95; width:154px; height:188px; top:-16px; right:-4px; }
.gc-card[data-theme="him"]  .gc-deco-him{ opacity:.85; width:174px; height:174px; top:-14px; right:-10px; }
.gc-card[data-theme="kids"] .gc-deco-kids{ opacity:1; top:-16px; right:-12px; left:auto; width:190px; height:184px; }

.gc-card-top{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.gc-leaf{ width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.gc-card-brand{ font:italic 600 21px var(--font-d); letter-spacing:.01em; }

.gc-use-badge{
  position:relative; z-index:1; align-self:flex-start; margin-top:13px;
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30);
  font:600 12px var(--font-b); letter-spacing:.01em; color:var(--cream);
}

.gc-card-amt{ margin-top:auto; padding-top:18px; position:relative; z-index:1; }
.gc-amt-label{
  display:block; font:600 11.5px var(--font-b);
  letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-bottom:4px;
}
.gc-amt{ display:block; font:600 clamp(34px,9vw,46px)/1 var(--font-d); }

.gc-card-msg{
  position:relative; z-index:1; margin:12px 0 0; min-height:42px;
  font:italic 500 14.5px/1.5 var(--font-d); opacity:.95;
}
.gc-card-msg.is-empty{ opacity:.6; }

.gc-card-foot{
  margin-top:14px; padding-top:14px; display:flex; justify-content:space-between; gap:10px;
  border-top:1px solid rgba(255,255,255,.22);
  font:600 12.5px var(--font-b); letter-spacing:.04em; opacity:.9;
  position:relative; z-index:1;
}

.gc-live-note{
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-align:center; margin:26px 0 0; font:600 12px var(--font-b); color:var(--ink3);
}
.gc-live-pulse{ width:8px; height:8px; border-radius:50%; background:var(--sage2); animation:gcPulse 2s ease-in-out infinite; }

/* Theme picker — mini wrapped-gift cards */
.gc-theme-block{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.gc-theme-title{
  display:block; text-align:center; font:800 11px var(--font-b);
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage); margin-bottom:14px;
}
.gc-themes-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.gc-theme{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:none; cursor:pointer; padding:0;
  font:700 10px var(--font-b); letter-spacing:.02em; color:var(--ink3);
  transition:color .18s ease;
}
.gc-theme .gc-sw{
  position:relative; overflow:hidden;
  width:52px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.24);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* tiny ribbon cross → each swatch reads as a wrapped card */
.gc-sw::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:5px; transform:translateX(-50%); background:rgba(255,255,255,.5); }
.gc-sw::after{ content:""; position:absolute; left:0; right:0; top:50%; height:5px; transform:translateY(-50%); background:rgba(255,255,255,.5); }
.gc-sw-photo::before, .gc-sw-photo::after{ display:none; }
.gc-theme:hover .gc-sw{ transform:translateY(-2px); }
.gc-theme.is-active{ color:var(--ink); }
.gc-theme.is-active .gc-sw{ box-shadow:0 0 0 2.5px var(--white), 0 0 0 4.5px var(--sage); transform:translateY(-3px); }
.gc-theme:focus-visible{ outline:none; }
.gc-theme:focus-visible .gc-sw{ outline:3px solid var(--sage2); outline-offset:2px; }
.gc-sw-her{ background:linear-gradient(135deg,#D2668A,#6E2B50); }
.gc-sw-him{ background:linear-gradient(135deg,#2F6E5A,#123A31); }
.gc-sw-kids{ background:linear-gradient(135deg,#2F86C9,#3A46B0); }
.gc-sw-photo{ background:linear-gradient(135deg,#8a94a6,#5b6472); }

.gc-photo-upload{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:max-content; max-width:100%; margin:16px auto 0;
  background:var(--sage); color:var(--cream);
  font:800 12px var(--font-b); padding:10px 16px; border-radius:var(--r-pill); cursor:pointer;
}
.gc-photo-upload input{ display:none; }
.gc-photo-upload[hidden]{ display:none; }

/* ---- Right column: form panel ---- */
.gc-form-col{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:28px; box-shadow:var(--shadow-soft);
}
.gc-form-col::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--sage), var(--butter) 55%, var(--peach));
}
.gc-form-head{ display:flex; align-items:center; gap:14px; margin:6px 0 22px; }
.gc-form-ico{
  flex:none; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(135deg, var(--sage-c1), var(--peach-c));
}
.gc-form-head h2{ font:600 24px/1.05 var(--font-d); color:var(--ink); margin:0; }
.gc-form-head p{ margin:3px 0 0; font:500 13px var(--font-b); color:var(--ink3); }

.gc-field-group{ margin-bottom:22px; }
.gc-label{
  display:block; font:800 11px var(--font-b); letter-spacing:.14em;
  text-transform:uppercase; color:var(--sage); margin-bottom:11px;
}
.gc-divider{ height:1px; background:var(--line); margin:4px 0 22px; }

.gc-chips{ display:flex; gap:9px; flex-wrap:wrap; }
.gc-chip{
  cursor:pointer; border-radius:var(--r-pill);
  border:1.5px solid var(--line2); background:var(--white);
  padding:9px 15px; font:700 13px/1 var(--font-b); color:var(--ink2);
  display:inline-flex; align-items:center; gap:6px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.gc-chip:hover{ transform:translateY(-2px); border-color:var(--sage2); color:var(--ink); }
.gc-chip.is-active{
  background:var(--sage); border-color:var(--sage); color:var(--cream);
  box-shadow:0 10px 22px -10px rgba(92,122,80,.55);
}
.gc-chip:focus-visible{ outline:3px solid var(--sage2); outline-offset:2px; }
.gc-occasions .gc-chip{ padding:8px 13px; font-size:12.5px; }

/* Amount row with a custom entry */
.gc-amounts{ align-items:center; }
.gc-custom-amt{
  display:inline-flex; align-items:center; gap:3px;
  border:1.5px solid var(--line2); border-radius:var(--r-pill);
  padding:6px 14px; font:700 13px var(--font-b); color:var(--ink2); background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gc-custom-amt:focus-within{ border-color:var(--sage2); box-shadow:0 0 0 3px var(--sage-c1); color:var(--ink); }
.gc-custom-amt.is-low{ border-color:var(--peach-d); box-shadow:0 0 0 3px rgba(199,126,90,.16); color:var(--peach-d); }
.gc-custom-amt input{ width:62px; border:none; outline:none; background:none; font:700 13px var(--font-b); color:var(--ink); }
.gc-amt-hint{ margin:10px 0 0; font:500 12px var(--font-b); color:var(--ink3); }
.gc-custom-amt input::-webkit-outer-spin-button,
.gc-custom-amt input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gc-custom-amt input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* Inputs */
.gc-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:4px; }
.gc-input-wrap{ display:block; margin-bottom:18px; }
.gc-flabel{ display:block; font:700 12px var(--font-b); color:var(--ink2); margin-bottom:7px; }
.gc-form-col input[type=text],
.gc-form-col input[type=tel],
.gc-form-col input[type=date],
.gc-form-col textarea{
  width:100%; box-sizing:border-box;
  background:var(--white); border:1.5px solid var(--line2); border-radius:13px;
  padding:12px 15px; font:500 14.5px var(--font-b); color:var(--ink); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gc-form-col input[type=text]:focus,
.gc-form-col input[type=tel]:focus,
.gc-form-col input[type=date]:focus,
.gc-form-col textarea:focus{ border-color:var(--sage2); box-shadow:0 0 0 3px var(--sage-c1); }
.gc-form-col textarea{ resize:vertical; min-height:76px; font-family:var(--font-b); }

/* Deliver by (segmented) + send-on, side by side */
.gc-deliver-row{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:end; margin-bottom:22px; }
.gc-deliver-by{ margin-bottom:0; }
.gc-send-on{ margin-bottom:0; }
.gc-seg{
  display:inline-flex; padding:4px; gap:4px;
  background:var(--band); border:1.5px solid var(--line2); border-radius:var(--r-pill);
}
.gc-seg-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:none; background:none; padding:9px 16px; border-radius:var(--r-pill);
  font:700 13px/1 var(--font-b); color:var(--ink2); transition:all .18s ease;
}
.gc-seg-btn:hover{ color:var(--ink); }
.gc-seg-btn.is-active{ background:var(--sage); color:var(--cream); box-shadow:0 8px 18px -8px rgba(92,122,80,.6); }
.gc-seg-btn:focus-visible{ outline:3px solid var(--sage2); outline-offset:2px; }

.gc-opt{ color:var(--ink3); font-weight:500; }
.gc-send{ width:100%; margin-top:2px; }
.gc-send-note{ text-align:center; font:500 12px/1.5 var(--font-b); color:var(--ink3); margin:14px 0 0; }
.gc-send-note strong{ color:var(--ink2); font-weight:700; }

/* ---- How it works — organic blob steps (boxless) ---- */
.gc-steps-sec{ position:relative; overflow:hidden; padding:56px 22px 26px; }
.gc-steps-head{ text-align:center; max-width:620px; margin:0 auto 44px; }
.gc-steps-head h2 em{ color:var(--sage); font-style:italic; }
.gc-steps-head .sub{ margin-top:12px; }

.gc-sspark{ position:absolute; z-index:0; color:var(--butter); font-size:14px; pointer-events:none; animation:gcTwinkle 3.6s ease-in-out infinite; }

.gc-steps{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  max-width:1000px; margin:0 auto;
}
.gc-step{ position:relative; text-align:center; padding:0 14px; }
.gc-step-1{ --acc:var(--sage);    --tint:var(--sage-c1); }
.gc-step-2{ --acc:var(--peach-d); --tint:var(--peach-c); }
.gc-step-3{ --acc:var(--lav-d);   --tint:var(--lav-c); }

.gc-step-num{ display:block; font:700 56px/1 var(--font-d); color:var(--acc); margin:0 0 12px; }
/* ONE aesthetic gift box with a half-open lid; three simple lines peek out.
   Colour is the page's green theme. */
.gc-steps{ display:block; }
.gc-onebox{
  --gd:#3a5230; --gm:#6e9152; --gl:#eaf4da;
  position:relative; width:296px; max-width:100%; margin:4px auto 0; padding-top:42px;
}
.gc-onebox svg{ display:block; width:100%; height:auto; overflow:visible; }
.gc-onebox .g-fill{ fill:var(--gl); stroke:var(--gd); stroke-width:3.6; }
.gc-onebox .g-rib,
.gc-onebox .g-lidrect,
.gc-onebox .g-bow,
.gc-onebox .g-knot{ fill:var(--gm); stroke:var(--gd); stroke-width:3.6; stroke-linejoin:round; }
.gc-onebox .g-dot{ fill:color-mix(in srgb, var(--gm) 52%, #fff); }
/* half-open lid — tilted up, hinged at the back; sits behind the note */
.gc-onebox-lid{
  position:absolute; z-index:1; left:50%; top:0; width:214px;
  transform:translateX(-50%) rotate(-13deg); transform-origin:76% 100%;
  animation:gcLidBreathe 3.8s ease-in-out infinite;
}
/* the note with the 3 lines, rising out of the box */
.gc-onebox-note{
  position:relative; z-index:2; width:212px; margin:0 auto -40px;
  background:#fff; border:1.5px solid color-mix(in srgb, var(--gm) 24%, #fff); border-radius:13px;
  padding:13px 16px 42px; box-shadow:0 20px 34px -20px rgba(40,70,30,.5);
  animation:gcNoteRise 3.8s ease-in-out infinite;
}
.gc-onebox-note p{
  display:flex; align-items:center; gap:11px; text-align:left; margin:0; padding:8px 2px;
  font:600 14.5px var(--font-b); color:var(--ink);
}
.gc-onebox-note p + p{ border-top:1px solid color-mix(in srgb, var(--gm) 13%, #fff); }
.gc-onebox-note b{
  flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  font:700 12px var(--font-b); color:#fff; background:var(--gm);
}
/* the box body front — covers the note's base */
.gc-onebox-front{ position:relative; z-index:3; width:236px; margin:0 auto; filter:drop-shadow(0 14px 18px rgba(40,70,30,.38)); }
@keyframes gcNoteRise{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes gcLidBreathe{ 0%,100%{ transform:translateX(-50%) rotate(-13deg); } 50%{ transform:translateX(-50%) rotate(-19deg); } }

.gc-step-kicker{ display:block; font:800 10.5px var(--font-b); letter-spacing:.22em; text-transform:uppercase; color:var(--acc); margin-bottom:7px; }
.gc-step h4{ font:600 23px/1.1 var(--font-d); color:var(--ink); margin:0 0 9px; }
.gc-step p{ font:500 14px/1.6 var(--font-b); color:var(--ink2); margin:0 auto; max-width:240px; }

.gc-closing-link{ text-align:center; margin-top:44px; }

/* ---- Perfect for — marketing band ---- */
.gc-loved-sec{ position:relative; overflow:hidden; padding:58px 22px 64px; background:linear-gradient(180deg, rgba(244,247,238,0) 0%, var(--band) 100%); }
.gc-orb-la{ top:-100px; left:-110px; width:360px; height:360px; background:rgba(110,145,82,.13); }
.gc-orb-lb{ bottom:-130px; right:-110px; width:380px; height:380px; background:rgba(201,163,90,.12); }
.gc-loved-head{ position:relative; z-index:1; text-align:center; max-width:640px; margin:0 auto 42px; }
.gc-loved-head .eyebrow{ margin-inline:auto; }
.gc-loved-head h2{ margin-top:14px; }
.gc-loved-head h2 em{ color:var(--sage); font-style:italic; }
.gc-loved-head .sub{ margin:14px auto 0; }
.gc-loved-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:920px; margin:0 auto 38px; }
.gc-loved-item{ text-align:center; padding:0 8px; }
.gc-loved-ico{
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:18px; font-size:28px; margin:0 auto 15px;
  box-shadow:0 12px 26px -14px rgba(63,82,54,.5);
}
.gc-loved-1 .gc-loved-ico{ background:var(--sage-c1); }
.gc-loved-2 .gc-loved-ico{ background:var(--peach-c); }
.gc-loved-3 .gc-loved-ico{ background:var(--butter-c); }
.gc-loved-item h4{ font:600 21px/1.1 var(--font-d); color:var(--ink); margin:0 0 8px; }
.gc-loved-item p{ font:500 14px/1.6 var(--font-b); color:var(--ink2); margin:0 auto; max-width:264px; }
.gc-loved-benefits{
  position:relative; z-index:1; list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.gc-loved-benefits li{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px; font:600 13px var(--font-b); color:var(--ink2);
  box-shadow:0 6px 16px -12px rgba(63,82,54,.4);
}
.gc-loved-benefits svg{ color:var(--sage); flex:none; }

/* ---- Desktop: fit the builder to one screen ---- */
@media (min-width:881px){
  .gc-hero3{ padding:24px 22px 2px; }
  .gc-hero3 h1{ margin-top:10px; font-size:clamp(32px,3.6vw,46px); line-height:1.03; }
  .gc-hero3 .sub{ margin-top:10px; font-size:15px; }
  .gc-trust{ margin-top:16px; }

  .gc-build-sec{ min-height:calc(100vh - 75px); display:flex; flex-direction:column; justify-content:center; padding:18px 22px 26px; }
  .gc-build-sec > .wrap{ width:100%; }
  .gc-build{ gap:32px; }
  .gc-preview-col{ padding:24px 28px; }
  .gc-card{ min-height:224px; padding:22px 26px 20px; }
  .gc-theme-block{ margin-top:20px; padding-top:18px; }

  .gc-form-col{ padding:20px 24px; }
  .gc-form-head{ margin:2px 0 12px; }
  .gc-form-head h2{ font-size:22px; }
  .gc-field-group{ margin-bottom:13px; }
  .gc-label{ margin-bottom:8px; }
  .gc-divider{ margin:0 0 13px; }
  .gc-input-wrap{ margin-bottom:11px; }
  .gc-two{ margin-bottom:0; }
  .gc-amt-hint{ margin-top:6px; }
  .gc-form-col textarea{ min-height:50px; }
  .gc-send{ margin-top:0; }
  .gc-send-note{ margin-top:9px; }
  /* Occasion: one tidy scrollable row instead of three wrapped rows */
  .gc-occasions{ flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:5px; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
  .gc-occasions .gc-chip{ flex:none; }
  .gc-occasions::-webkit-scrollbar{ height:5px; }
  .gc-occasions::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:999px; }
}

/* ---- Responsive ---- */
@media (max-width:880px){
  .gc-build{ grid-template-columns:1fr; gap:22px; }
  .gc-steps{ grid-template-columns:1fr; gap:18px; max-width:360px; }
  .gc-step-2{ margin-top:0; }
  .gc-loved-grid{ grid-template-columns:1fr; gap:26px; max-width:400px; }
}
@media (max-width:560px){
  .gc-two{ grid-template-columns:1fr; }
  .gc-deliver-row{ grid-template-columns:1fr; gap:18px; align-items:stretch; }
  .gc-seg{ width:100%; }
  .gc-seg-btn{ flex:1; justify-content:center; }
  .gc-preview-col{ padding:30px 20px; }
  .gc-form-col{ padding:22px 20px; }
  .gc-card{ padding:22px 20px 18px; border-radius:20px; }
  .gc-card-brand{ font-size:18px; }
  .gc-leaf{ width:34px; height:34px; }
  .gc-ghost-a{ transform:translate(-18px,-6px) rotate(-7deg) scale(.95); }
  .gc-ghost-b{ transform:translate(18px,-4px) rotate(6deg) scale(.94); }
}

/* ---- gift-wrap flourish shown on Add-to-cart, before the cart redirect ---- */
.gc-wrap-fx{
  position:fixed; inset:0; z-index:9999; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:rgba(28,44,24,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.gc-wrap-fx.is-on{ display:flex; animation:gcFxIn .3s ease; }
@keyframes gcFxIn{ from{ opacity:0; } to{ opacity:1; } }
.gc-wrap-scene{ position:relative; width:190px; height:184px; }
/* the gift card that drops into the box */
.gc-dsvg{ display:block; width:100%; height:100%; overflow:visible; filter:url(#gcDoodle) drop-shadow(0 7px 9px rgba(20,42,14,.34)); }
.gc-wrap-card{
  position:absolute; z-index:1; left:50%; top:0; width:96px; height:62px; margin-left:-48px;
  animation:gcFxCard 1.5s cubic-bezier(.5,0,.35,1) forwards;
}
@keyframes gcFxCard{
  0%{ transform:translateY(-86px) rotate(-11deg) scale(1); opacity:1; }
  44%{ transform:translateY(34px) rotate(4deg) scale(.8); opacity:1; }
  66%{ transform:translateY(62px) rotate(1deg) scale(.6); opacity:.9; }
  76%,100%{ transform:translateY(72px) rotate(0) scale(.44); opacity:0; }
}
/* box body */
.gc-wrap-body{
  position:absolute; z-index:2; left:50%; bottom:0; width:132px; height:90px; margin-left:-66px;
}
/* lid — starts open/tilted, then closes onto the box */
.gc-wrap-lid{
  position:absolute; z-index:3; left:50%; bottom:78px; width:148px; height:24px; margin-left:-74px; transform-origin:50% 100%;
  animation:gcFxLid 1.5s cubic-bezier(.4,0,.3,1.25) forwards;
}
@keyframes gcFxLid{
  0%,32%{ transform:translateY(-36px) rotate(-19deg); }
  60%{ transform:translateY(0) rotate(3deg); }
  74%,100%{ transform:translateY(0) rotate(0); }
}
/* bow — pops when the lid closes */
.gc-wrap-bow{
  position:absolute; z-index:4; left:50%; bottom:84px; width:64px; height:42px; margin-left:-32px;
  transform-origin:50% 100%; opacity:0; animation:gcFxBow 1.5s ease forwards;
}
@keyframes gcFxBow{ 0%,56%{ transform:scale(0); opacity:0; } 72%{ transform:scale(1.25); opacity:1; } 84%,100%{ transform:scale(1); opacity:1; } }
/* sparkle burst */
.gc-wrap-spark{ position:absolute; left:50%; top:48%; color:#F4D98A; font-size:17px; opacity:0;
  animation:gcFxSpark .85s ease-out .64s forwards; }
@keyframes gcFxSpark{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:0; } 40%{ opacity:1; } 100%{ transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity:0; } }
/* caption */
.gc-wrap-msg{ font:600 16px var(--font-b); color:#fff; opacity:0; animation:gcFxMsg .5s ease .95s forwards; }
@keyframes gcFxMsg{ to{ opacity:1; } }