/* Ignite Design · Gift card page (the first product page in the Ignite design). Sits on ignite.css.
   A product page has no photo hero: the header is solid from the start and the page opens on the card itself,
   an object on paper, beside the amounts and the recipient. Everything below is the same chapter system as the other pages. */

/* ---------- the product: card + panel ---------- */
.gc{padding:calc(var(--bar) + var(--nav) + 36px) var(--gutter) var(--section);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4);align-items:start}
.gc__visual{grid-column:1 / span 7;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav) + 24px);display:grid;gap:var(--s3)}
.gc__cap{max-width:420px}
.gc__panel{grid-column:8 / span 5;display:grid;gap:var(--s4);max-width:520px}
.gc__panel .t1{margin-top:-6px}
@media (min-width:1300px){.gc__visual{grid-column:1 / span 7;padding-right:var(--s6)}}
@media (max-width:899px){
  .gc{grid-template-columns:1fr;padding-top:calc(var(--bar) + var(--nav) + 20px)}
  .gc__visual,.gc__panel{grid-column:1;position:static;max-width:none}
}

/* the card: a real object, credit-card proportions, the hot shop as its face */
.card{position:relative;margin:0;aspect-ratio:1.586;border-radius:clamp(12px,1.6vw,20px);overflow:hidden;background:var(--night);color:var(--night-ink);box-shadow:0 30px 60px -30px rgba(21,19,17,.45),0 1px 0 rgba(255,255,255,.4) inset;isolation:isolate}
.card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform:scale(1.02)}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,12,11,.62) 0%,rgba(14,12,11,.30) 22%,rgba(14,12,11,0) 42%,rgba(14,12,11,0) 80%,rgba(14,12,11,.42) 100%);z-index:1}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .8px rgba(244,240,234,.22);background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.05) 100%);z-index:3;pointer-events:none}
.card__top{position:absolute;z-index:2;left:clamp(16px,3.2%,28px);right:clamp(16px,3.2%,28px);top:clamp(14px,3%,26px);display:flex;align-items:center;gap:10px;color:var(--night-ash)}
.card__flame{height:clamp(30px,3vw,46px);width:auto;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
@media (max-width:899px){.card__flame{height:clamp(26px,8vw,36px)}}
.card__bottom{position:absolute;z-index:2;left:clamp(16px,3.2%,28px);right:clamp(16px,3.2%,28px);bottom:clamp(14px,3.2%,26px);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin:0}
.card__left{display:grid;gap:4px;min-width:0}
.card__word{color:var(--night-ash);letter-spacing:.18em}
.card__amt{font:300 clamp(2.5rem,1.4rem + 5vw,4.5rem)/1 var(--f-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--night-ink);text-shadow:0 1px 14px rgba(14,12,11,.55)}
.card__for{flex:none;text-align:right;color:var(--night-ash);max-width:46%;line-height:1.6;white-space:pre-line;text-shadow:0 1px 10px rgba(14,12,11,.6)}
.card__word{text-shadow:0 1px 10px rgba(14,12,11,.6)}
.card__top .caption{color:#E8E2DA;text-shadow:0 0 2px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.5)}
.card__for:empty{display:none}

/* the buy panel */
.buy{display:grid;gap:var(--s5);border-top:.8px solid var(--rule);padding-top:var(--s4)}
.buy fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s3)}
.buy legend{font:500 var(--t-label)/1.2 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;padding:0;margin-bottom:var(--s3)}
.amounts__sub{margin-top:var(--s3);color:var(--ash)}
.amt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.amt{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;padding:8px 10px;border:.8px solid var(--rule);border-radius:3px;cursor:pointer;font:400 var(--t-body)/1 var(--f-mono);font-variant-numeric:tabular-nums;transition:border-color var(--d-fast) var(--e-out),background-color var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out)}
.amt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.amt:hover{border-color:rgba(21,19,17,.5)}
.amt:has(input:checked){border-color:var(--ember);background:rgba(235,106,67,.08)}
.amt:has(input:focus-visible){outline:2px solid var(--ember);outline-offset:3px}
.amt.is-on{border-color:var(--ember);background:rgba(235,106,67,.08)}
.amt-list{display:grid;gap:8px}
.amt--named{justify-content:space-between;gap:var(--s3);text-align:left;font:400 var(--t-body)/1.25 var(--f-sans);min-height:48px;padding:10px 14px}
.amt--named span{letter-spacing:-.005em}
.amt--named b{font:400 var(--t-body)/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* a class that comes in several counts: the row holds a stepper; the name is the part that picks it */
.amt--steps{cursor:default;padding:8px 14px 8px 0}
.amt--steps .amt__pick{flex:1 1 auto;display:flex;align-items:center;min-height:32px;padding:0 0 0 14px;cursor:pointer}
.qty{display:inline-flex;align-items:center;gap:2px;flex:none;margin-right:var(--s2)}
.qty__btn{width:30px;height:30px;border:.8px solid var(--rule);border-radius:3px;background:transparent;color:var(--ink);font:300 19px/1 var(--f-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:border-color var(--d-fast) var(--e-out)}
.qty__btn:hover{border-color:rgba(21,19,17,.5)}
.qty__btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.qty__btn:disabled{opacity:.28;cursor:default}
.qty__n{min-width:1.4em;text-align:center;font:400 var(--t-body)/1 var(--f-mono);font-variant-numeric:tabular-nums}
.qty__u{font:400 12px/1 var(--f-sans);letter-spacing:.02em;color:var(--ash);margin:0 8px 0 2px;min-width:3.4em}
@media (max-width:420px){.amt--steps{flex-wrap:wrap}.amt--steps .amt__pick{flex-basis:100%;min-height:28px}.amt--steps b{margin-left:auto}}
@media (max-width:599px){.amt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.to__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
.to__wide{grid-column:1 / -1}
.buy .field input[type=text],.buy .field input[type=email],.buy .field textarea{height:46px;width:100%;border:0;border-bottom:.8px solid var(--ink);border-radius:0;background:transparent;padding:0;color:var(--ink);font:400 var(--t-body-lg)/1.2 var(--f-sans);letter-spacing:-.005em}
.buy .field textarea{height:auto;min-height:46px;padding:12px 0 8px;resize:vertical;line-height:1.4}
.buy .field input::placeholder,.buy .field textarea::placeholder{color:rgba(113,108,103,.6)}
.buy .field input:focus-visible,.buy .field textarea:focus-visible{outline:0;border-bottom-color:var(--ember);box-shadow:0 .8px 0 var(--ember)}
.buy .field input:user-invalid{border-bottom-color:#B8402A}
.to__reload{justify-self:start;padding:4px 0;color:var(--ash)}
.reload .field input{font-family:var(--f-mono);letter-spacing:.06em}
.reload .link{justify-self:start;color:var(--ash)}
@media (max-width:420px){.to__grid{grid-template-columns:1fr}}

.buy__go .btn{width:100%;min-height:52px;justify-content:space-between;padding-inline:22px;font-size:var(--t-button)}
.buy__go .btn b{font:400 var(--t-body-lg)/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.fine-list{list-style:none;margin:0;padding:0;border-top:.8px solid var(--rule)}
.fine-list li{padding:10px 0 10px 18px;border-bottom:.8px solid var(--rule);font-size:.9375rem;line-height:1.45;position:relative;color:var(--ink)}
.fine-list li::before{content:"";position:absolute;left:2px;top:17px;width:5px;height:5px;border-radius:50%;background:var(--ember)}
.buy .fine a{color:inherit}

/* ---------- good for ---------- */
.uses{border-top:.8px solid var(--rule)}
.uses__grid{padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.use{margin:0;display:grid;gap:var(--s3);align-content:start}
.use__img{display:block;overflow:hidden;background:#EDEAE6}
.use__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--e-out)}
.use:hover .use__img img{transform:scale(1.03)}
.use figcaption{display:grid;gap:var(--s2);max-width:var(--col)}
.use figcaption p{color:var(--ash)}
.use figcaption .link{justify-self:start;margin-top:2px}
@media (max-width:1099px){.uses__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}}
@media (max-width:599px){
  .uses__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:var(--s3)}
  .uses__grid::-webkit-scrollbar{display:none}
  .use{flex:0 0 80%;scroll-snap-align:start;scroll-margin-left:var(--gutter)}
}

/* ---------- how it works (night) ---------- */
.how .chapter__head .label{color:var(--ember)}
.how__grid{padding:0 var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4);align-items:start}
.how__fig{grid-column:1 / span 5;margin:0;display:grid;gap:var(--s3)}
.how__fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.how__fig figcaption{color:var(--night-ash)}
/* the three steps descend like a stair, 01 highest on the left, 03 lowest on the right (Arvin, October 24) */
.steps{grid-column:6 / span 7;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s5);align-items:start}
.steps li{display:grid;gap:10px;padding:var(--s4) 0 0;border-top:.8px solid var(--night-rule)}
.steps li:nth-child(2){margin-top:72px}
.steps li:nth-child(3){margin-top:144px}
.steps li .caption{color:var(--ember)}
.steps li p{color:var(--night-ash)}
@media (max-width:1199px){.steps{gap:0 var(--s4)}.steps li:nth-child(2){margin-top:56px}.steps li:nth-child(3){margin-top:112px}}
@media (max-width:1099px){
  .how__grid{grid-template-columns:1fr}
  .how__fig,.steps{grid-column:1}
  .how__fig{margin-inline:calc(-1 * var(--gutter))}
  .how__fig figcaption{padding-inline:var(--gutter)}
  .steps{margin-top:var(--s4)}
}
@media (max-width:599px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps li,.steps li:nth-child(2),.steps li:nth-child(3){margin-top:0;padding:var(--s4) 0}
  .steps li:last-child{border-bottom:.8px solid var(--night-rule)}
}

/* ---------- closing ---------- */
/* (the closing section was removed October 24; its question lives in the FAQ now) */
.faq--last{padding-bottom:var(--section)}

/* ---------- phone dock ---------- */
.dock .btn{justify-content:space-between}
.dock .btn b{font:400 var(--t-body)/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}

/* ---------- when to send ---------- */
.when{display:grid;gap:var(--s3);padding-top:var(--s2)}
.when__label{color:var(--ash)}
.seg--light{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.amt--when{font:500 12px/1.1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;min-height:44px}
.when__date{display:grid;gap:6px;max-width:440px}
.when__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s4) var(--s3)}
.buy .field input[type=date],.buy .field select{height:46px;width:100%;border:0;border-bottom:.8px solid var(--ink);border-radius:0;background:transparent;padding:0;color:var(--ink);font:400 var(--t-body-lg)/1.2 var(--f-mono);letter-spacing:-.01em}
.buy .field select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:22px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23151311' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-size:12px 8px}
.buy .field select option{font-family:var(--f-sans);color:var(--ink)}
.buy .field input[type=date]:focus-visible,.buy .field select:focus-visible{outline:0;border-bottom-color:var(--ember);box-shadow:0 .8px 0 var(--ember)}
.when__date .fine{margin-top:6px}
@media (max-width:420px){.when__grid{grid-template-columns:1fr}}