/* ===========================================================================
   THE BODY — Gift Certificates page (Figma 292:2 "Gift Certificates fin",
   1440 x 7458). Hero is NATURAL height here (Arina, 2026-10-19): the 682px
   frame scales by width like every other section, so the nav sits inside a
   plain .sec. Geometry generated into gift.css by build_gift.py.
   =========================================================================== */

/* ---------- light hero nav (paper background) ---------- */
.h-pill--dark { border-color: var(--ink); color: var(--body); }
.h-pill--dark a[aria-current="page"] { color: var(--ink); }
.h-book--dark { background: var(--ink); color: var(--paper); }

/* ---------- certificate card (hero, preview, closing) ---------- */
.cert { position: absolute; background: var(--ink); border-radius: calc(24 * var(--u)); overflow: hidden; height: calc(var(--h) * var(--u)); }
.cert--tilt { transform-origin: 0 0; rotate: 4deg; }        /* Figma: -4 deg node rotation = 4deg clockwise, about the top-left corner */
.cert .a { z-index: 1; }
.cert .orn { z-index: 0; }
.cert-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- builder ---------- */
.step { border: 1px solid #c7d3c4; border-radius: calc(24 * var(--u)); background: var(--paper); }
.step-ring {
  position: absolute; width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border: 1.2px solid var(--clay); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.step-ring span { margin-right: calc(-0.5 * var(--u)); }
.tabs { display: flex; align-items: flex-start; border-bottom: 1px solid #c7d3c4; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 0 calc(32 * var(--u)) calc(14 * var(--u)) 0; margin: 0;
  font-family: var(--hk); font-weight: 400; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u));
  color: var(--mute);
}
.tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(10 * var(--u)); }
.chip {
  margin: 0; cursor: pointer; white-space: nowrap;
  padding: calc(12 * var(--u)) calc(22 * var(--u));
  background: #f6f5ec; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink);
  font-family: var(--hk); font-weight: 400; font-size: calc(14.5 * var(--u)); line-height: calc(19 * var(--u));
  transition: background-color .2s ease, color .2s ease;
}
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--ink); border: 0; color: var(--paper); }
.chip:focus-visible, .tab:focus-visible, .field:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.field {
  position: absolute; margin: 0; resize: none; appearance: none;
  background: #f6f5ec; border: 1px solid var(--hair); border-radius: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  font-family: var(--hk); font-weight: 300; font-size: calc(14.5 * var(--u)); line-height: calc(19 * var(--u));
  color: var(--ink); height: calc(var(--h) * var(--u));
}
textarea.field { padding-top: calc(18 * var(--u)); }
.field::placeholder { color: #9a9384; opacity: 1; }
.field:focus { border-color: var(--clay); outline: none; }
.field.is-narrow { width: calc(441 * var(--u)); }   /* Schedule a date: email + date field share the 694 row (441 + 12 + 241) */
[hidden] { display: none !important; }
.summary { border: 1px solid #c7d3c4; border-radius: calc(20 * var(--u)); background: var(--paper); }
.srow-rule { background: #c7d3c4; }
button.btn { border: 0; cursor: pointer; padding: 0; font: inherit; }

/* ---------- gift-a-treatment cards ---------- */
.gcard { border: 1px solid var(--hair); border-radius: calc(24 * var(--u)); background: #f6f5ec; }

/* ---------- occasions (photos pre-flopped where Figma mirrors the card) ---------- */
.occ { border: 1px solid var(--hair); border-radius: calc(20 * var(--u)); overflow: hidden; }
.occ--paper { border-color: var(--paper); }
.occ > img { width: 100%; height: 100%; object-fit: cover; }
.occ > img.crop { position: absolute; left: 0; top: var(--it); width: 100%; height: var(--ih); object-fit: fill; }
.occ-link { border-bottom: 1px solid var(--paper); }

/* ---------- recipients band ---------- */
.redeem { position: absolute; left: calc(24 * var(--u)); top: 0; width: calc(1392 * var(--u)); height: calc(286 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--ink); }
.redeem .a { z-index: 1; }

/* "Gift an experience" cards are links (js/gift.js): click -> builder above, on
   "A treatment" with that one picked. Hover: warm clay edge, soft lift shadow,
   and a "Gift this" cue in the free top-right corner. */
.gcard-link {
  border-radius: calc(24 * var(--u));
  border: 1px solid transparent;
  transition: border-color .35s ease, box-shadow .45s ease;
  cursor: pointer;
}
.gcard-link::after {
  content: "Gift this \2192";
  position: absolute; top: calc(41 * var(--u)); right: calc(27 * var(--u));
  font-family: var(--hk); font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u));
  letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: var(--clay);
  opacity: 0; translate: calc(-6 * var(--u)) 0;
  transition: opacity .35s ease, translate .45s cubic-bezier(.2,.7,.2,1);
}
.gcard-link:hover, .gcard-link:focus-visible {
  opacity: 1;
  border-color: rgba(176, 106, 62, .55);
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(120, 78, 44, .14);
  outline: none;
}
.gcard-link:hover::after, .gcard-link:focus-visible::after { opacity: 1; translate: 0 0; }
/* the certificate preview pulses once when a card fills the builder */
.cert.is-pulse { animation: cert-pulse 1.1s cubic-bezier(.2,.7,.2,1); }
@keyframes cert-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(236, 164, 92, 0); }
  35%  { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(236, 164, 92, .35), 0 0 calc(50 * var(--u)) rgba(236, 164, 92, .35); }
  100% { box-shadow: 0 0 0 0 rgba(236, 164, 92, 0); }
}

/* ---------- client edits 2026-10-28 (Gift page only: unique names, safe for Book / Visit) ---------- */
/* custom amount still empty: the preview shows a dimmed "$" instead of a dash placeholder */
#pv-amount.is-empty { opacity: .45; }
/* cedar "Gift an experience" card: not giftable for now (site_flags.GIFT_CEDAR_ON_SALE), so it has no
   gift link; its Coming Soon pill (base.css .btn-soon) sits in the free band above the price rule */
/* FAQ intro: no lone last word on its two lines */
#questions > [data-f="296:15"] { text-wrap: balance; }