/* Подарочный сертификат /podarochnyj-sertifikat/ (Sinon_Gift_Cert) — только на этой странице. */
.gc { max-width: 980px; }
.gc-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; margin: 4px 0 28px; }
.gc-lead { font-size: var(--fz-l, 18px); line-height: 1.5; margin: 0 0 16px; }
.gc-nom { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gc-nom li { padding: 8px 14px; border: 1px solid var(--line, #E7E4DE); border-radius: 999px; background: #fff; font-weight: 700; white-space: nowrap; }
.gc-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 220px; padding: 26px 26px 22px 46px; border-radius: 18px; background: #FBF7F0; box-shadow: var(--sh-3, 0 16px 40px rgba(0,0,0,.12)); overflow: hidden; }
.gc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--red, #C82624); }
.gc-card-logo { font-weight: 800; font-size: 22px; letter-spacing: 1px; }
.gc-card-t { margin-top: 10px; color: var(--red, #C82624); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.gc-card-sum { font-size: 46px; line-height: 1.05; }
.gc-card-code { align-self: flex-start; margin-top: auto; padding: 6px 12px; border: 2px dashed var(--ink, #1B1A17); border-radius: 8px; background: #fff; font: 700 16px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 1.5px; }
.gc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: gc; }
.gc-steps li { counter-increment: gc; padding: 16px; border: 1px solid var(--line, #E7E4DE); border-radius: 14px; background: #fff; }
.gc-steps li::before { content: counter(gc); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; background: var(--red, #C82624); color: #fff; font-weight: 700; }
.gc-steps b { display: block; margin-bottom: 4px; }
.gc-steps span { font-size: 14px; line-height: 1.45; color: var(--ink-2, #4A4842); }
.gc-form { display: grid; gap: 16px; max-width: 720px; padding: 20px; border: 1px solid var(--line, #E7E4DE); border-radius: 16px; background: #fff; }
.gc-form fieldset { margin: 0; padding: 0; border: 0; }
.gc-form legend { margin-bottom: 8px; font-weight: 700; }
.gc-amounts, .gc-how { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-amounts legend, .gc-how legend { width: 100%; }
.gc-amounts label, .gc-how label { position: relative; cursor: pointer; }
.gc-amounts input, .gc-how input { position: absolute; opacity: 0; inset: 0; }
.gc-amounts span, .gc-how span { display: inline-block; min-height: 44px; padding: 11px 16px; border: 1.5px solid var(--line, #DCD8D0); border-radius: 12px; font-weight: 600; }
.gc-amounts input:checked + span, .gc-how input:checked + span { border-color: var(--red, #C82624); background: var(--red-soft, #FBEDEC); color: var(--ink, #1B1A17); }
.gc-amounts input:focus-visible + span, .gc-how input:focus-visible + span { outline: 2px solid var(--ink, #1B1A17); outline-offset: 2px; }
.gc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc-grid label { display: grid; gap: 4px; font-size: 14px; }
.gc-grid .gc-wide { grid-column: 1 / -1; }
.gc-grid input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--field-line, #CFCAC0); border-radius: 10px; font: inherit; }
.gc-form .btn { justify-self: start; }
.gc-err { margin: 0; padding: 10px 14px; border-left: 4px solid var(--red, #C82624); border-radius: 8px; background: var(--red-soft, #FBEDEC); }
.gc-ok { margin: 0 0 24px; padding: 16px 18px; border-left: 4px solid var(--ok, #1F7A4D); border-radius: 12px; background: #EAF6EF; }
.gc-ok b { font-size: 18px; }
.gc-ok p { margin: 6px 0 0; }
.gc-msg { padding: 14px 16px; border-radius: 12px; background: var(--paper-2, #F1EFEA); }
.gc-terms { padding-left: 20px; line-height: 1.6; }
@media (max-width: 760px) {
	.gc-hero { grid-template-columns: 1fr; }
	.gc-card { min-height: 0; }
	.gc-card-sum { font-size: 36px; }
	.gc-steps { grid-template-columns: 1fr 1fr; }
	.gc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .gc-steps { grid-template-columns: 1fr; } }