/*
 * Gift card and e-Gift purchase block.
 *
 * The block is hooked inside the flex add-to-cart form, which squeezed it into
 * a column beside the quantity box. It takes a full row instead. Everything
 * reads the palette tokens from the child theme, so it changes with them.
 */
.ccg-buy { flex: 0 0 100%; width: 100%; margin: 0 0 var(--ccc-space-3); display: grid; gap: var(--ccc-space-3); }
.ccg-buy__label, .ccg-field label, .ccg-buy__when legend { display: block; font-weight: 600; margin-bottom: var(--ccc-space-1); }
.ccg-buy__denoms { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--ccc-space-1); }
.ccg-buy__denom { display: flex; align-items: baseline; gap: var(--ccc-space-1); padding: .75rem 1rem; border: 1px solid rgb(38 38 38 / 25%); border-radius: var(--ccc-radius); background: #fff; cursor: pointer; }
.ccg-buy__denom:has(input:checked) { border-color: var(--ccc-primary); box-shadow: var(--ccc-focus); background: var(--ccc-cream); }
.ccg-buy__price { font-weight: 700; color: var(--ccc-primary); }
.ccg-buy__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--ccc-space-2); }
.ccg-buy input[type="text"], .ccg-buy input[type="email"], .ccg-buy input[type="date"], .ccg-buy textarea { width: 100%; box-sizing: border-box; }
.ccg-buy textarea { min-height: 6rem; grid-column: 1 / -1; }
.ccg-buy input:focus, .ccg-buy textarea:focus { outline: 0; box-shadow: var(--ccc-focus); border-color: var(--ccc-primary); }
.ccg-buy__when { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ccc-space-1); }
.ccg-when__option { display: flex; align-items: center; gap: var(--ccc-space-1); }
.ccg-field__count, .ccg-preview__note { font-size: .8125rem; color: rgb(38 38 38 / 70%); }
.ccg-field__error, .ccg-error-for { color: var(--ccc-danger); font-size: .875rem; }
.ccg-buy__actions { display: flex; flex-wrap: wrap; gap: var(--ccc-space-1); }
.ccg-buy__preview { border: 1px solid var(--ccc-primary); background: transparent; color: var(--ccc-primary); border-radius: var(--ccc-radius); padding: .75rem 1.25rem; font: inherit; font-weight: 600; cursor: pointer; }
.ccg-buy__preview:hover, .ccg-buy__preview:focus-visible { background: var(--ccc-primary); color: #fff; outline: 0; }
.ccg-preview-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--ccc-space-2); background: rgb(38 38 38 / 60%); z-index: 100000; }
.ccg-preview-modal[hidden] { display: none; }
.ccg-preview__box { background: var(--ccc-cream); border-radius: var(--ccc-radius-lg); padding: var(--ccc-space-4); max-width: 32rem; width: 100%; position: relative; }
.ccg-preview__close { position: absolute; top: .5rem; right: .75rem; background: none; border: 0; font-size: 1.5rem; cursor: pointer; }
.ccg-preview__amount { font-size: 2rem; font-weight: 700; color: var(--ccc-primary); }
.ccg-redeem__row { display: flex; gap: var(--ccc-space-1); flex-wrap: wrap; }
.ccg-redeem__result, .ccg-result { margin-top: var(--ccc-space-1); }
@media (prefers-reduced-motion: no-preference) {
	.ccg-buy__denom, .ccg-buy__preview { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
}