/* THE GIFT MESSAGE PANEL — cart, bundle builder, and its read-only copy on checkout.
 *
 * A SEPARATE FILE rather than more of css/style.css, for the reason css/bundle.css is one: style.css
 * is 1,400 lines touched by every page on the site, and a feature that can be read, reviewed and
 * reverted on its own is worth one extra request. Every colour here is a brand token defined in
 * style.css — nothing in this file introduces one.
 *
 * The build checks this file parses (scripts/build-site.mjs walks css/ for unbalanced braces and
 * stray comment terminators, because a stylesheet that does not parse fails SILENTLY).
 */

.gift-message {
  border: 1px solid var(--brand-hairline);
  border-radius: var(--radius);
  /* NO PADDING OF ITS OWN — the <summary> carries it (below), so the whole bordered box is the tap
   * target. With the 0.65rem here, the box drew 42px tall but only the 20px text line inside it
   * opened the form: summary.gift-message-summary measured 311×20 at 390 (291×20 at 360, 321×20 in
   * the bundle sheet), so a thumb landing on the box's own padding did nothing, on a cart page
   * where every other control is 40px or more (QA round 6, store-phone-sweep #2, 13 Sep 2026). */
  padding: 0;
  margin: 1rem 0;
  background: var(--brand-white);
}

/* The closed state is a one-line invitation, so a cart that is not a gift costs one line.
 * list-style is kept (the browser's disclosure triangle) rather than replaced by an icon of our
 * own: it is the affordance that says "this opens", and every platform draws its own correctly.
 * The padding the box used to carry, plus a 40px floor, so the target is the box: 0.65rem above and
 * below a 20px line is 41px. Kept display:list-item (the default) rather than flex, which would
 * drop the disclosure triangle in Safari. */
.gift-message-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-dark-green);
  padding: 0.65rem 0.9rem;
  min-height: 40px;
  box-sizing: border-box;
}

.gift-message-summary:focus-visible {
  outline: 2px solid var(--brand-dark-green);
  outline-offset: -2px;
}

/* The body inherits the box's old side padding, so the fields line up under the summary's text;
 * no top padding of its own because the summary's bottom padding already keeps the gap. */
.gift-message-body { padding: 0 0.9rem 0.65rem; }

.gift-message-note {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--brand-ink);
  opacity: 0.8;
}

/* To and From side by side on a roomy screen, stacked on a phone — a two-column grid of 80-character
 * name fields at 360px wide gives two boxes too narrow to read what was typed into them. */
.gift-message-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (max-width: 520px) {
  .gift-message-names { grid-template-columns: 1fr; }
}

.gift-message-field {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.gift-message-field > span { display: block; margin-bottom: 0.25rem; }

/* 16px IN THE BOXES, AND 44px TALL. The label above sets 0.85rem for its own caption, and `font:
 * inherit` carried that 13.6px into the fields — the only fields on the shop under 16px. iPhone
 * Safari zooms the page (~1.18× here) when a field under 16px takes focus and leaves it zoomed and
 * side-scrollable after the keyboard goes; the viewport meta has no maximum-scale, so nothing else
 * stops it (QA round 11, phone-sweep #2). The size is set outright, the family and line still
 * inherited; the caption keeps its 0.85rem. 44px of height puts them with the discount box beside
 * them (44px) rather than under the 40px the rest of the phone's controls keep — they were 34px. */
.gift-message-field input,
.gift-message-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--brand-hairline);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--brand-ink);
  background: var(--brand-white);
}

.gift-message-field textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.gift-message-field input:focus,
.gift-message-field textarea:focus {
  outline: 2px solid var(--brand-dark-green);
  outline-offset: 1px;
}

.gift-message-count {
  margin: 0;
  font-size: 0.8rem;
  color: var(--brand-ink);
  opacity: 0.7;
  text-align: right;
}

/* "Please enter a message" — a nudge, never a refusal. Red would read as an error blocking checkout,
 * and nothing here blocks anything. */
.gift-message-count-warn {
  opacity: 1;
  font-weight: 600;
  color: var(--brand-dark-green);
  text-align: left;
}

/* ---- The read-only copy (checkout, order confirmation) ------------------------------------ */

.gift-message-summary-block { margin: 1.25rem 0; }

.gift-message-heading {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

/* WHITESPACE IS PRESERVED. Somebody who wrote three lines meant three lines, and re-flowing a gift
 * note into a paragraph changes what the shop prints on their card. The text is HTML-escaped before
 * it ever reaches the page (see storefront/js/gift-message.js), so pre-line cannot smuggle markup. */
.gift-message-text {
  white-space: pre-line;
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--brand-lime);
  background: var(--brand-cream);
  border-radius: var(--radius);
}