/* gifts.css: gift cards (/gifts, /gift/{code}), thank-yous (/thanks and the sheet on /live), reviews (/review/{token}
   and the written reviews on /reviews). docs/GIFTS_TIPS_REVIEWS.md. Tokens only, from style.css §2. Phone first. */

/* ---- choosing: chips and tiles ---- */
.choice-tabs{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:64px;padding:0 var(--s3);border:var(--soft);border-radius:var(--r-s);background:var(--deep);color:var(--cream);font:400 18px/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;cursor:pointer;transition:border-color var(--dur-ui),background-color var(--dur-ui)}
.chip input:checked + span{border-color:var(--gold);background:var(--card)}
.chip input:focus-visible + span{outline:2px solid var(--gold-2);outline-offset:2px}
.chip span:hover{border-color:var(--gold-line)}
.gift-step{display:flex;flex-direction:column;gap:var(--s4)}
.gift-step + .gift-step{padding-top:var(--s5);border-top:var(--soft)}
.gift-step h2{font-size:var(--t3);line-height:var(--lh3)}
.gift-pane[hidden]{display:none}
.gift-sum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4)}
.gift-sum .price{font-size:var(--t2);line-height:var(--lh2)}
.counter{text-align:right}
.inline-field{display:flex;align-items:center;gap:var(--s2)}
.inline-field input{max-width:140px}
.gift-form{max-width:640px}
.sheet-wrap{max-width:560px}

/* ---- the gift card itself ---- */
.giftcard{position:relative;max-width:560px;padding:var(--s5) var(--s4);border:1px solid var(--gold-line);border-radius:var(--r-m);background:var(--card);overflow:hidden}
.giftcard::before{content:"";position:absolute;inset:var(--s2);border:1px solid var(--gold-line-soft);border-radius:4px;pointer-events:none}
.giftcard > *{position:relative}
.giftcard .wordmark{display:block;margin-bottom:var(--s4)}
.giftcard h1,.giftcard .gc-what{font:var(--w-display) var(--t2)/var(--lh2) var(--f-display);color:var(--cream);max-width:none}
.giftcard blockquote{margin:var(--s4) 0 0;padding-left:var(--s3);border-left:1px solid var(--gold-line);font:italic 400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream);white-space:pre-line;overflow-wrap:anywhere}
.giftcard .gc-from{margin-top:var(--s2);color:var(--cream-3)}
.gc-code{display:inline-block;margin-top:var(--s4);padding:var(--s2) var(--s3);border:1px dashed var(--gold-line);border-radius:var(--r-s);font:400 18px/1.4 var(--f-body);letter-spacing:.08em;color:var(--cream);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gc-status{color:var(--cream-2)}

/* ---- reviews ---- */
.stars{display:flex;gap:var(--s1)}
.stars .chip span{min-width:var(--tap);font-size:16px;font-family:var(--f-body)}
.rating-line{color:var(--gold);letter-spacing:.12em;font-family:var(--f-label);font-size:var(--t-label)}
.review-list{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
.review-item{display:flex;flex-direction:column;gap:var(--s2)}
.review-item p{overflow-wrap:anywhere;white-space:pre-line}
.review-reply{margin-top:var(--s2);padding-left:var(--s3);border-left:1px solid var(--gold-line)}
.verified{color:var(--cream-3)}

/* ---- thank-yous on the live ---- */
.live-gives{display:flex;flex-wrap:wrap;gap:var(--s2)}
.thanks-line{border-left:2px solid var(--gold);padding-left:var(--s2)}
.thanks-banner{padding:var(--s3);border:1px solid var(--gold-line);border-radius:var(--r-m);background:var(--card);color:var(--cream)}
.thanks-banner b{color:var(--gold);font-weight:500}

@media (min-width:768px){
  .giftcard{padding:var(--s6) var(--s6)}
  .review-list{grid-template-columns:1fr 1fr}
}

/* ---- printing the gift card: the card alone, in the printer's own ink on its own paper (system colours) ---- */
@media print{
  body,.giftcard{background:Canvas;color:CanvasText}
  body .nav,body .footer,body .skip,body .no-print,body [data-nav],body [data-footer]{display:none}
  .giftcard{max-width:none;border-color:CanvasText}
  .giftcard::before{border-color:GrayText}
  .giftcard *,.giftcard .wordmark,.giftcard h1,.giftcard blockquote{color:CanvasText}
  .gc-code{border-color:CanvasText}
}