/* ============ gift-bar.css: the gift strip, bottom left ==================
   A small card in the corner, built like the menu's product rows and the
   home's product cards, in the glass of the nav bar and the light button. It slides up from
   below; the close shows on the card's corner under the pointer. */
.gb { position:fixed; z-index:90; left:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px);
  width:min(330px, calc(100vw - 24px)); box-sizing:border-box;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .5s var(--ease,cubic-bezier(0.22,1,0.36,1)), transform .5s var(--ease,cubic-bezier(0.22,1,0.36,1)); }
.gb.is-in { opacity:1; transform:none; pointer-events:auto; }
/* the card: ink, a paper well with the render, two lines, the arrow in a ring */
.gb-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem;
  padding:7px 14px 7px 7px; border-radius:20px; color:var(--ink,rgb(37,36,32)); text-decoration:none;
  /* the light button's glass (buttons.css .pill-line), the nav bar's material:
     a milky plate blurring what passes under it, without a drawn edge */
  background:rgba(255,255,255,.62); border:0;
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:rgba(19,18,16,.06) 0 2px 6px, rgba(19,18,16,.22) 0 24px 48px -24px;
  transition:background-color .3s var(--ease,cubic-bezier(0.22,1,0.36,1)), border-color .3s var(--ease,cubic-bezier(0.22,1,0.36,1)); }
.gb-art { display:grid; place-items:center; width:84px; height:64px; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 95% at 50% 38%,#fff 0%,#f0ede6 60%,#e2ddd2 100%); }
.gb-art img { width:72px; height:auto; filter:drop-shadow(0 6px 6px rgba(40,30,15,.28)); transition:transform .6s var(--ease,cubic-bezier(0.22,1,0.36,1)); }
.gb-txt { display:grid; gap:.15rem; }
.gb-name { font-size:1rem; font-weight:900; letter-spacing:-.02em; line-height:1.1; }
.gb-note { font-size:.8rem; line-height:1.25; color:var(--ink-faint,#6d6960); }
.gb-note em { font-style:normal; color:inherit; }
.gb-arw { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid rgba(37,36,32,.22);
  font-size:.9rem; transition:background-color .3s var(--ease,cubic-bezier(0.22,1,0.36,1)), color .3s var(--ease,cubic-bezier(0.22,1,0.36,1)), transform .35s var(--ease,cubic-bezier(0.22,1,0.36,1)); }
@media (hover:hover) {
  .gb-card:hover .gb-art img { transform:scale(1.08) rotate(-2deg); }
  .gb-card:hover { background:rgba(255,255,255,.82); }
  .gb-card:hover .gb-arw { background:var(--ink,rgb(37,36,32)); border-color:var(--ink,rgb(37,36,32)); color:#fff; transform:translateX(2px); }
}
.gb-card:focus-visible { outline:2px solid var(--tan,#c5a28c); outline-offset:3px; }
/* the close: a small paper disc on the card's corner */
.gb-x { position:absolute; top:-9px; right:-9px; width:24px; height:24px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:#f4f4ef; color:var(--ink,rgb(37,36,32)); font:inherit; font-size:.95rem; line-height:1;
  box-shadow:rgba(19,18,16,.25) 0 2px 6px; border:1px solid rgba(154,149,140,.3); opacity:0; transition:opacity .25s; }
.gb:hover .gb-x, .gb-x:focus-visible { opacity:1; }
@media (hover:none) { .gb-x { opacity:1; } }
.gb-x:focus-visible { outline:2px solid var(--tan-text,#8a6046); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .gb, .gb-art img, .gb-arw { transition:none; } }
/* on a phone it is a small thing in the corner, not a banner across the
   screen: as wide as its words, everything a size down */
@media (max-width:600px) {
  .gb { width:auto; max-width:calc(100vw - 24px); left:12px; bottom:12px; }
  .gb-card { gap:.65rem; padding:5px 10px 5px 5px; border-radius:16px; }
  .gb-art { width:54px; height:42px; border-radius:11px; }
  .gb-art img { width:46px; }
  .gb-name { font-size:.86rem; }
  .gb-note { font-size:.72rem; }
  .gb-arw { width:26px; height:26px; font-size:.78rem; }
}

/* the line under the buy card's button (C) */
.bc-gift { margin:.55rem 0 0; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.78rem; line-height:1.4; color:var(--ink-soft,#5f5b54); text-align:center; }