/* The two fields on the product page, and the gift card's rows in a basket.
   Deliberately unopinionated: it inherits the theme's type and colour and only lays things out,
   so it does not fight a shop that looks nothing like the one it was written for. */

.zg-gc-field { margin: 1rem 0 0; }
.zg-gc-field[hidden] { display: none !important; }

.zg-gc-field > label {
  display: block;
  margin-bottom: .5em;
  font-size: .8125em;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}

.zg-gc-field__row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }

.zg-gc-field input[type="number"],
.zg-gc-field textarea {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  opacity: 1;
}
.zg-gc-field textarea { width: 100%; resize: vertical; }
.zg-gc-field input::placeholder,
.zg-gc-field textarea::placeholder { opacity: .5; }

.zg-gc-field__cur {
  display: flex;
  align-items: center;
  font-size: .8125em;
  letter-spacing: .1em;
  opacity: .6;
}

.zg-gc-field__note {
  margin: .6em 0 0;
  font-size: .75em;
  line-height: 1.6;
  opacity: .66;
  max-width: 46ch;
}

/* the card's rows in the totals */
.zg-gc-left th, .zg-gc-left td { font-size: .875em; opacity: .7; }

/* a gift card thumbnail is artwork, not a photograph: never crop it, never frame it */
img[src*="gift-card"] {
  object-fit: contain;
  background: transparent;
}