.spaceshop-kit {
  --spaceshop-heading: #1f2122;
  --spaceshop-text: #353738;
  --spaceshop-button: #ca0404;
  --spaceshop-line: #643f3f;
  --spaceshop-light-bg: #ece1e1;
  --spaceshop-extra-light-bg: #f6f2f2;
  --spaceshop-dark-bg: #2d1515;
  --spaceshop-extra-dark-bg: #080d0a;
  --spaceshop-accent: #bf7777;
  --spaceshop-neutral: #ffffff;

  color: var(--spaceshop-text);
  max-width: 72rem;
  margin: 0 auto;
}

.spaceshop-kit__section + .spaceshop-kit__section {
  margin-top: 2rem;
}

.spaceshop-kit__heading {
  color: var(--spaceshop-heading);
  font-size: 1.25rem;
  font-weight: 650;
  margin: 0 0 1rem;
}

/* Elementor-like masonry gallery (mobile: 2 cols / 5px gaps) */
.spaceshop-kit__gallery-container {
  --hgap: 5px;
  --vgap: 5px;
  --columns: 2;
  --animation-duration: 350ms;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .spaceshop-kit__gallery-container {
    --hgap: 10px;
    --vgap: 10px;
    --columns: 3;
  }
}

@media (min-width: 1024px) {
  .spaceshop-kit__gallery-container {
    --columns: 4;
  }
}

.spaceshop-kit__gallery-item {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
  box-sizing: border-box;
  transition: opacity var(--animation-duration) ease;
}

.spaceshop-kit__gallery-item:focus-visible {
  outline: 2px solid var(--spaceshop-button);
  outline-offset: 2px;
}

.spaceshop-kit__gallery-image {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.spaceshop-kit__gallery-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--spaceshop-accent) 45%, transparent);
  opacity: 0;
  transition: opacity var(--animation-duration) ease;
  pointer-events: none;
}

.spaceshop-kit__gallery-item:hover .spaceshop-kit__gallery-overlay,
.spaceshop-kit__gallery-item:focus-visible .spaceshop-kit__gallery-overlay {
  opacity: 1;
}

.spaceshop-kit__video-list {
  display: grid;
  gap: 1.25rem;
}

.spaceshop-kit__video-label {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--spaceshop-heading);
}

.spaceshop-kit__video-player {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: var(--spaceshop-extra-dark-bg);
  border-radius: 0.5rem;
}

.spaceshop-kit__brochure-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.spaceshop-kit__brochure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--spaceshop-line);
  border-radius: 0.5rem;
  background: var(--spaceshop-extra-light-bg);
}

.spaceshop-kit__brochure-name {
  font-weight: 600;
  color: var(--spaceshop-heading);
}

.spaceshop-kit__brochure-actions {
  display: flex;
  gap: 0.75rem;
}

.spaceshop-kit__brochure-link {
  color: var(--spaceshop-button);
  text-decoration: none;
  font-weight: 600;
}

.spaceshop-kit__brochure-link:hover {
  text-decoration: underline;
}

.spaceshop-kit__lightbox {
  /* Re-declare tokens so top-layer <dialog> keeps brand colors */
  --spaceshop-heading: #1f2122;
  --spaceshop-text: #353738;
  --spaceshop-button: #ca0404;
  --spaceshop-line: #643f3f;
  --spaceshop-light-bg: #ece1e1;
  --spaceshop-extra-light-bg: #f6f2f2;
  --spaceshop-dark-bg: #2d1515;
  --spaceshop-extra-dark-bg: #080d0a;
  --spaceshop-accent: #bf7777;
  --spaceshop-neutral: #ffffff;

  border: 0;
  padding: 0;
  width: min(100vw, 100%);
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  background: color-mix(in srgb, var(--spaceshop-dark-bg) 94%, var(--spaceshop-extra-dark-bg));
  color: var(--spaceshop-neutral);
}

.spaceshop-kit__lightbox::backdrop {
  background: color-mix(in srgb, var(--spaceshop-extra-dark-bg) 88%, var(--spaceshop-dark-bg));
}

.spaceshop-kit__lightbox-inner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 3.5rem 1rem 2rem;
  box-sizing: border-box;
}

.spaceshop-kit__lightbox-img {
  max-width: min(100%, 96vw);
  max-height: calc(100dvh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--spaceshop-line) 55%, transparent);
}

.spaceshop-kit__lightbox-close,
.spaceshop-kit__lightbox-nav {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--spaceshop-accent) 55%, transparent);
  background: color-mix(in srgb, var(--spaceshop-dark-bg) 75%, var(--spaceshop-line));
  color: var(--spaceshop-neutral);
  cursor: pointer;
  border-radius: 999px;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1.25rem;
}

.spaceshop-kit__lightbox-close:hover,
.spaceshop-kit__lightbox-nav:hover,
.spaceshop-kit__lightbox-close:focus-visible,
.spaceshop-kit__lightbox-nav:focus-visible {
  background: var(--spaceshop-button);
  border-color: var(--spaceshop-button);
  outline: none;
}

.spaceshop-kit__lightbox-close {
  top: 0.75rem;
  right: 0.75rem;
  background: var(--spaceshop-button);
  border-color: var(--spaceshop-button);
}

.spaceshop-kit__lightbox-prev {
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.spaceshop-kit__lightbox-next {
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.spaceshop-kit__lightbox-status {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  color: var(--spaceshop-heading);
  background: color-mix(in srgb, var(--spaceshop-extra-light-bg) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--spaceshop-line) 40%, transparent);
  border-radius: 999px;
}

@media (max-width: 640px) {
  .spaceshop-kit__lightbox-prev,
  .spaceshop-kit__lightbox-next {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spaceshop-kit * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}