/**
 * "Gifting someone?" at the checkout.
 *
 * Sits above the order summary in the checkout's own tokens. Closed it is one
 * line — a question, not a form. Open it is three small decisions, each with
 * its price beside it, because a gift-wrap charge that appears in the total
 * with no explanation is what gets an order abandoned at the last step.
 */

.gms-gift {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--gms-line-2);
  border-radius: var(--gms-r);
  background: var(--gms-surface);
}

.gms-gift__ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.gms-gift__ask input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--gms-accent); }

.gms-gift__ask-text { display: grid; gap: 2px; min-width: 0; }
.gms-gift__ask-text strong { font-size: 14px; color: var(--gms-ink); }
.gms-gift__ask-text em { font-style: normal; font-size: 12px; color: var(--gms-ink-2); }

.gms-gift__body { display: grid; gap: 14px; margin-top: 14px; }
.gms-gift__body[hidden] { display: none; }

.gms-gift__which,
.gms-gift__how {
  margin: 0;
  padding: 0;
  border: 0;
}

.gms-gift__which legend,
.gms-gift__how legend {
  padding: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gms-ink-3);
}

.gms-gift__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gms-line-2);
  cursor: pointer;
  font-size: 13px;
}

.gms-gift__item:last-child { border-bottom: 0; }
.gms-gift__item input { flex: 0 0 auto; accent-color: var(--gms-accent); }

.gms-gift__item-name {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
  color: var(--gms-ink);
}

/* The name truncates; the quantity underneath never does — it is four
   characters and it is the part that explains the price on the right. */
.gms-gift__item-name > :not(em),
.gms-gift__item-name { overflow: hidden; text-overflow: ellipsis; }

.gms-gift__item-qty {
  font-style: normal;
  font-size: 11px;
  color: var(--gms-ink-3);
}

.gms-gift__item-price { flex: 0 0 auto; font-weight: 700; color: var(--gms-ink-2); }

.gms-gift__mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  cursor: pointer;
  font-size: 13px;
}

.gms-gift__mode + .gms-gift__mode { margin-top: 8px; }
.gms-gift__mode input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--gms-accent); }
.gms-gift__mode span { display: grid; gap: 1px; }
.gms-gift__mode strong { font-weight: 650; color: var(--gms-ink); }
.gms-gift__mode em { font-style: normal; font-size: 12px; color: var(--gms-ink-2); }

.gms-gift__mode:has(input:checked) {
  border-color: var(--gms-accent);
  background: color-mix(in srgb, var(--gms-accent) 6%, transparent);
}

.gms-gift__note { display: grid; gap: 6px; }

.gms-gift__note > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gms-ink-3);
}

.gms-gift__note textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gms-line);
  border-radius: var(--gms-r);
  background: var(--gms-surface);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gms-ink);
  resize: vertical;
}

.gms-gift__note textarea:focus-visible { outline: 2px solid var(--gms-accent); outline-offset: 1px; }

.gms-gift__cost {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--gms-line-2);
  font-size: 13px;
}

.gms-gift__cost strong { font-size: 15px; color: var(--gms-ink); }
.gms-gift__cost span { color: var(--gms-ink-2); font-size: 12px; }

/* The price is the server's answer, so while it is being fetched the old one
   is stale. Fading it says so without the number jumping about. */
.gms-gift__cost.is-busy { opacity: .45; }

.gms-gift__error {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gms-bad);
}

.gms-gift__error[hidden] { display: none; }

/* The line in the order summary. */
.gms-co-row__note {
  display: block;
  font-style: normal;
  font-size: 11px;
  line-height: 1.45;
  color: var(--gms-ink-3);
}