.christmas-main {
  --christmas-green: #285b4a;
  --christmas-red: #93463f;
  --christmas-line: #dbe3de;
  --christmas-muted: #52625b;
  color: var(--default-color);
}

.christmas-main h1,
.christmas-main h2,
.christmas-main h3 { text-wrap: balance; }
.christmas-main h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1.5rem; font-weight: 700; }
.christmas-main h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.christmas-main p { line-height: 1.75; }
.christmas-main a { color: #21679c; text-decoration: underline; text-underline-offset: 0.2em; }
.christmas-main a:hover { color: #16476d; }
.christmas-main :is(a, button, input, summary):focus-visible { outline: 3px solid var(--christmas-red); outline-offset: 4px; }
.christmas-main section { scroll-margin-top: 100px; }

.christmas-hero {
  padding: clamp(2rem, 5vw, 4.5rem) 0 2.5rem;
  background: linear-gradient(115deg, #f3f7f4, #fdfaf5);
  border-bottom: 1px solid var(--christmas-line);
}
.christmas-eyebrow { color: var(--christmas-red); font-size: 0.8rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 1rem; }
.christmas-hero h1 { max-width: 24ch; font-size: clamp(2rem, 4.2vw, 3.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.christmas-intro { max-width: 900px; margin: 1.5rem 0; font-size: 1.08rem; color: var(--christmas-muted); }
.christmas-search-form { max-width: 1040px; }
.christmas-search-form label { display: block; font-weight: 700; margin-bottom: 0.65rem; }
.christmas-search-fields { display: flex; gap: 0.4rem; padding: 0.4rem; border: 1px solid #9aafa3; border-radius: 8px; background: #fff; box-shadow: 0 8px 25px #285b4a0d; }
.christmas-search-fields input { min-width: 0; flex: 1 1 auto; border: 0; border-radius: 4px; padding: 0.9rem; font-size: 1.05rem; color: #253e34; background: #fff; }
.christmas-search-fields button,
.christmas-main .christmas-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 52px; padding: 0.9rem 1.3rem; border: 0; border-radius: 5px; background: var(--christmas-green); color: #fff; font-weight: 700; text-decoration: none; }
.christmas-search-fields button:hover,
.christmas-main .christmas-button:hover { background: #1b4235; color: #fff; }
.christmas-hint { font-size: 0.88rem; margin-top: 0.7rem; color: var(--christmas-muted); }
.christmas-jump-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.7rem; margin-top: 1.2rem; }
.christmas-jump-links a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 600; }

.christmas-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.christmas-section-heading { max-width: 850px; margin-bottom: 2rem; }
.christmas-section-heading p:last-child { color: var(--christmas-muted); }
.christmas-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.christmas-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.christmas-card { display: flex; flex-direction: column; padding: 1.7rem; border: 1px solid var(--christmas-line); border-radius: 9px; background: var(--surface-color); }
.christmas-card-index { display: block; color: var(--christmas-red); font-size: 0.85rem; font-weight: 700; margin-bottom: 1rem; }
.christmas-card p { color: var(--christmas-muted); margin: 0; }
.christmas-card > a { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin-top: auto; padding-top: 1.2rem; font-weight: 650; }
.christmas-card > a.christmas-guide-link { margin-top: 0; padding-top: 0.5rem; font-size: 0.9rem; font-weight: 400; }
.christmas-format-icon { display: block; color: var(--christmas-green); font-size: 1.6rem; margin-bottom: 0.8rem; }
.christmas-format-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.5rem; }
.christmas-format-links a { display: inline-flex; align-items: center; min-height: 44px; }
.christmas-tinted { background: #f5f7f5; border-block: 1px solid var(--christmas-line); }

.christmas-print-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; counter-reset: christmas-step; padding: 0; margin: 0; }
.christmas-print-steps li { counter-increment: christmas-step; border-top: 2px solid #a6bdae; padding-top: 1.2rem; }
.christmas-print-steps li::before { content: "0" counter(christmas-step); display: block; color: var(--christmas-red); font-weight: 750; margin-bottom: 0.7rem; }
.christmas-print-steps p { color: var(--christmas-muted); margin-bottom: 0; }
.christmas-faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; }
.christmas-faq details { border-top: 1px solid var(--christmas-line); padding-bottom: 1rem; }
.christmas-faq details:last-child { border-bottom: 1px solid var(--christmas-line); }
.christmas-faq summary { cursor: pointer; padding: 1.1rem 0.25rem; font-weight: 700; line-height: 1.5; }
.christmas-faq summary::marker { color: var(--christmas-green); }
.christmas-faq p { color: var(--christmas-muted); padding-inline: 0.25rem; margin: 0; }
.christmas-faq a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.7rem 0.25rem 0; }
.christmas-final { background: #eef4f0; border-top: 1px solid var(--christmas-line); }
.christmas-final p { max-width: 750px; color: var(--christmas-muted); margin-bottom: 1.5rem; }

@media (max-width: 991px) {
  .christmas-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .christmas-faq-layout { grid-template-columns: 1fr; gap: 0.5rem; }
  .christmas-search-fields { flex-direction: column; }
}
@media (max-width: 767px) {
  .christmas-hero { padding-top: 1.5rem; }
  .christmas-intro { font-size: 1rem; line-height: 1.65; margin-block: 1rem; }
  .christmas-search-fields input { min-height: 52px; }
  .christmas-topic-grid,
  .christmas-two-columns,
  .christmas-print-steps { grid-template-columns: 1fr; gap: 1rem; }
  .christmas-card { padding: 1.4rem; }
  .christmas-search-fields button,
  .christmas-main .christmas-button { max-width: 100%; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .christmas-main a { transition: none; }
}
