.christmas-page,
.offer-detail-christmas {
  --christmas-green: #284b40;
  --christmas-red: #793043;
}

.christmas-page h1,
.christmas-page h2,
.christmas-page h3 {
  letter-spacing: 0;
}

.christmas-page main section[id] {
  scroll-margin-top: 90px;
}

.christmas-page [hidden],
.offer-detail-christmas [hidden] {
  display: none !important;
}

.christmas-page :focus-visible,
.offer-detail-christmas :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}

.christmas-skip {
  position: fixed;
  z-index: 150;
  top: 12px;
  left: 20px;
  padding: 12px 20px;
  background: #fff;
  transform: translateY(-200%);
}

.christmas-skip:focus {
  transform: translateY(0);
}

.christmas-hero {
  padding-top: 76px;
}

.christmas-hero-copy {
  padding: 24px var(--edge) 32px;
  text-align: center;
}

.christmas-breadcrumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  color: #625b55;
  font-size: 12px;
}

.christmas-breadcrumbs a:hover,
.christmas-text-link:hover {
  color: var(--christmas-red);
}

.christmas-hero .script-label,
.christmas-story .script-label {
  color: var(--christmas-red);
  font-size: 42px;
}

.christmas-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
}

.christmas-hero h1 span {
  display: block;
  margin-top: 14px;
  color: var(--christmas-green);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
}

.christmas-hero-copy > p {
  max-width: 62ch;
  margin: 18px auto 22px;
  color: #635c56;
  font-size: 17px;
}

.christmas-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.christmas-page .button,
.christmas-filters button {
  letter-spacing: 0;
}

.christmas-actions .button {
  border-color: var(--christmas-green);
  background: var(--christmas-green);
  color: #fff;
}

.christmas-text-link {
  font-size: 13px;
  text-underline-offset: 5px;
  text-decoration: underline;
}

.christmas-ribbon {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 0.8fr;
  gap: 4px;
  height: min(46svh, 480px);
}

.christmas-ribbon figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.christmas-ribbon img {
  object-position: center 40%;
}

.christmas-section-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  padding: 20px var(--edge);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.christmas-section-nav a:hover {
  color: var(--christmas-red);
}

.christmas-section {
  padding: 88px var(--edge);
}

.christmas-intro,
.christmas-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
}

.christmas-section h2,
.christmas-package h2,
.christmas-story h2,
.christmas-invitation h2 {
  margin: 14px 0 24px;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.04;
  text-wrap: balance;
}

.christmas-prose p {
  margin: 0 0 22px;
  color: #635c56;
  font-size: 18px;
}

.christmas-intro h2,
.christmas-faq h2 {
  max-width: 14ch;
}

.christmas-package {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--christmas-green);
  color: var(--ivory);
}

.christmas-package-copy {
  padding: 72px var(--edge);
  align-self: center;
}

.christmas-package .eyebrow {
  color: #d8c5ae;
}

.christmas-package-copy > p:not(.christmas-package-price) {
  max-width: 54ch;
  color: #ece9e1;
}

.christmas-package-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0;
}

.christmas-package-price strong {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
}

.christmas-package-list {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.christmas-package-list li {
  padding: 12px 0;
  border-top: 1px solid #ffffff38;
}

.christmas-package-note {
  margin: 24px 0;
  font-size: 14px;
}

.christmas-package-photo {
  position: relative;
  min-height: 760px;
  margin: 0;
}

.christmas-package-photo img {
  position: absolute;
  inset: 0;
  object-position: center 40%;
}

.christmas-section-heading {
  max-width: 850px;
  margin-bottom: 38px;
}

.christmas-section-heading > p {
  max-width: 62ch;
  font-size: 17px;
  color: #635c56;
}

.christmas-preparation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.christmas-preparation-grid article {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.christmas-preparation-grid img {
  width: 24px;
  height: 24px;
  opacity: 0.65;
}

.christmas-preparation-grid h3 {
  margin: 20px 0 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
}

.christmas-preparation-grid p {
  color: #635c56;
  margin: 0;
}

.christmas-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #eee8df;
}

.christmas-story figure {
  margin: 0;
  position: relative;
  min-height: 640px;
}

.christmas-story img {
  position: absolute;
  inset: 0;
  object-position: center 35%;
}

.christmas-story > div {
  padding: 64px var(--edge);
  align-self: center;
}

.christmas-story p {
  margin: 0 0 24px;
  color: #635c56;
  font-size: 17px;
}

.christmas-questions details {
  border-top: 1px solid var(--line);
}

.christmas-questions details:last-child {
  border-bottom: 1px solid var(--line);
}

.christmas-questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.christmas-questions summary::-webkit-details-marker {
  display: none;
}

.christmas-questions summary img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  transition: transform 200ms ease;
}

.christmas-questions details[open] summary img {
  transform: rotate(180deg);
}

.christmas-questions details > p {
  margin: 0 0 26px;
  color: #635c56;
}

.christmas-questions a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.christmas-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding: 52px var(--edge);
  background: var(--christmas-red);
  color: var(--ivory);
}

.christmas-invitation .eyebrow {
  color: #ead3b6;
}

.christmas-invitation h2 {
  max-width: 24ch;
  font-size: 44px;
}

.christmas-invitation p {
  margin: 0;
}

.christmas-gallery {
  --gallery-cols: 4;
  --gallery-gap: 14px;
  columns: 4;
  column-gap: 14px;
}

.christmas-photo {
  display: block;
  break-inside: avoid;
  margin-bottom: 14px;
  cursor: zoom-in;
  overflow: hidden;
  background: #e3ded6;
}

.christmas-photo img {
  width: 100%;
  height: auto;
  transition: opacity 200ms ease;
}

.christmas-photo:hover img {
  opacity: 0.88;
}

.christmas-gallery-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}

.christmas-gallery-actions p {
  margin: 0;
  color: #635c56;
  font-size: 13px;
}

.christmas-lightbox-open {
  overflow: hidden;
}

.christmas-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 16px 24px;
  border: 0;
  background: #121217;
  color: #fff;
}

.christmas-viewer[open] {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 48px;
  gap: 8px;
}

.christmas-viewer::backdrop {
  background: #121217;
}

.christmas-viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.christmas-viewer-top p,
.christmas-viewer-caption {
  margin: 0;
  color: #dedbd6;
  font-size: 13px;
}

.christmas-viewer-stage {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 16px;
  align-items: center;
  min-height: 0;
}

.christmas-icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 1px solid #ffffff45;
  background: transparent;
  cursor: pointer;
}

.christmas-icon-button:hover {
  background: #ffffff18;
}

.christmas-icon-button img {
  width: 26px;
  height: 26px;
  filter: invert(1);
}

.christmas-viewer-image {
  position: relative;
  height: 100%;
  min-height: 0;
}

.christmas-viewer-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.christmas-viewer-image > p {
  position: absolute;
  inset: 45% 0 auto;
  text-align: center;
  font-size: 14px;
}

.christmas-viewer-caption {
  align-self: center;
  text-align: center;
}

/* Snow is confined to the photographs and never intercepts links or controls. */
[data-snow] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.snowfall {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -12px;
  left: var(--snow-left);
  width: var(--snow-size);
  height: var(--snow-size);
  border-radius: 50%;
  background: #fff;
  opacity: var(--snow-opacity);
  animation: christmas-snowfall var(--snow-duration) linear infinite;
  animation-delay: var(--snow-delay);
  animation-play-state: paused;
}

.snow-is-running .snowflake {
  animation-play-state: running;
}

.snow-is-disabled .snowfall {
  display: none;
}

.snow-control {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f7f2eaee;
  color: #1e1b18;
  font-size: 12px;
  cursor: pointer;
}

.snow-control input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #284b40;
}

.offer-detail-christmas .offer-detail-copy > .eyebrow {
  color: var(--christmas-red);
}

.offer-detail-christmas .seasonal-price {
  border-color: #284b404a;
}

.offer-detail-christmas .seasonal-price strong {
  color: var(--christmas-green);
}

.offer-detail-christmas .offer-detail-copy > .button {
  border-color: var(--christmas-green);
  background: var(--christmas-green);
  color: #fff;
}

@keyframes christmas-snowfall {
  to { transform: translate3d(var(--snow-drift), var(--snow-distance, 900px), 0); }
}

@media (max-width: 1100px) {
  .christmas-intro,
  .christmas-faq {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .christmas-package-copy {
    padding: 48px 30px;
  }

  .christmas-package h2,
  .christmas-story h2 {
    font-size: 44px;
  }

  .christmas-gallery {
    --gallery-cols: 3;
    columns: 3;
  }

  .christmas-preparation-grid {
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .christmas-hero {
    padding-top: 68px;
  }

  .christmas-hero-copy {
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .christmas-breadcrumbs {
    margin-bottom: 20px;
    font-size: 11px;
  }

  .christmas-hero .script-label {
    font-size: 34px;
  }

  .christmas-hero h1 {
    font-size: 44px;
  }

  .christmas-hero h1 span {
    font-size: 14px;
    margin-top: 12px;
  }

  .christmas-hero-copy > p {
    font-size: 15px;
    margin-top: 14px;
  }

  .christmas-actions {
    gap: 16px;
  }

  .christmas-ribbon {
    height: min(32svh, 320px);
    grid-template-columns: 1fr 1.6fr;
    gap: 3px;
  }

  .christmas-ribbon figure:last-of-type {
    display: none;
  }

  .christmas-section-nav {
    gap: 12px 20px;
  }

  .christmas-section {
    padding-block: 58px;
  }

  .christmas-section h2,
  .christmas-story h2,
  .christmas-package h2,
  .christmas-invitation h2 {
    font-size: 40px;
  }

  .christmas-prose p {
    font-size: 16px;
  }

  .christmas-package,
  .christmas-preparation-grid,
  .christmas-story {
    grid-template-columns: 1fr;
  }

  .christmas-package-copy,
  .christmas-story > div {
    padding: 44px var(--edge);
  }

  .christmas-package-photo {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .christmas-package-price strong {
    font-size: 52px;
  }

  .christmas-preparation-grid {
    gap: 30px;
  }

  .christmas-story figure {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .christmas-invitation {
    padding-block: 40px;
  }

  .christmas-gallery {
    --gallery-cols: 2;
    --gallery-gap: 8px;
    columns: 2;
    column-gap: 8px;
  }

  .christmas-photo {
    margin-bottom: 8px;
  }

  .christmas-filters {
    gap: 6px;
  }

  .christmas-filters button {
    padding: 10px 12px;
    font-size: 11px;
  }

  .christmas-viewer {
    padding: 8px;
    grid-template-rows: 44px minmax(0, 1fr) 70px;
  }

  .christmas-viewer-stage {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 4px;
  }

  .christmas-icon-button {
    width: 36px;
    height: 44px;
    padding: 4px;
  }

  .christmas-viewer-caption {
    font-size: 12px;
    padding-inline: 16px;
  }

  .snow-control {
    right: 10px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snowfall,
  .snow-control {
    display: none !important;
  }

  .christmas-photo img,
  .christmas-questions summary img {
    transition: none;
  }
}

/* Galerie ofert z panelu: ten sam wygląd kolumn, ale kolejność czytana w poziomie (1, 2, 3, 4 w pierwszym rzędzie),
   każde kolejne zdjęcie trafia do najkrótszej kolumny. Pozycje liczy js/christmas.js z proporcji zdjęć. */
.christmas-gallery.is-masonry {
  position: relative;
  columns: auto;
}

.is-masonry .christmas-photo {
  position: absolute;
  margin: 0;
}

.is-masonry .christmas-photo img {
  height: 100%;
  object-fit: cover;
}

/* Galeria oferty pokazuje się dopiero po ułożeniu zdjęć według panelu (js/christmas.js dodaje .is-ready). */
.christmas-gallery[data-offer]:not(.is-ready) {
  visibility: hidden;
}