/* ===========================================================================
   FyrværkeriVideo.dk - frontend
   Farver, typografi og mål er målt på den oprindelige side og genskabt her
   med moderne, responsivt layout. Pixeltro over for fyrvaerkerivideo.dk på
   alle sider - forside såvel som undersider (brand-sider, kontakt, 404).
   ======================================================================== */

:root {
  --bg:            #060013;
  --bg-glow-1:     #2b0a5e;
  --bg-glow-2:     #12063a;
  --panel:         rgba(38, 18, 92, 0.55);
  --panel-strong:  rgba(38, 18, 92, 0.85);
  --panel-active:  rgba(90, 55, 200, 0.65);
  --text:          #ffffff;
  --text-muted:    rgba(255, 255, 255, 0.62);
  --accent:        #4a2fd0;
  --accent-soft:   #6a4ae8;
  --line:          rgba(255, 255, 255, 0.10);

  --wrap:          1200px;
  --gap:           25px;
  --radius:        3px;

  --font: 'Lato', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  /* Ægte baggrundsbillede fra den originale side (glødende farve-blur foroven,
     transparent udenom) hen over den mørke bundfarve — ikke en CSS-gradient. */
  background-color: var(--bg);
  background-image: url("https://cdn.lugc.link/c993aa3d-88a1-4d44-940a-f5e26f414e0e/-/format/auto/");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: auto;
  background-attachment: fixed;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: 50;
}

.site-header__inner {
  /* Almindeligt blokelement - logo/ikon-rækken og den udfoldelige menu
     ligger som to selvstændige bokse under hinanden, IKKE i samme flex-linje.
     Ellers "hopper" logo/ikon en smule, fordi flexboxens align-items:center
     genberegner den lodrette centrering af første række, når menuens højde
     ændrer sig under åbne/lukke-animationen. */
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 77px;
}

.logo {
  display: inline-block;
  font-size: 25px;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.logo__strong { font-weight: 900; }
.logo__light  { font-weight: 300; }
.logo--footer { font-size: 17px; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav {
  /* Almindeligt blokelement under logo/ikon-rækken (ikke en flex-child til
     .site-header__row), så den skubber resten af siden ned i stedet for at
     ligge ovenpå heroen — uden at kunne påvirke logo/ikonets position.
     Det er sådan det virker på fyrvaerkerivideo.dk. */
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.nav-open .main-nav { max-height: 80vh; overflow-y: auto; }

/* Løse "pille" i stedet for et solidt panel — flyder ovenpå heroen,
   ligesom på fyrvaerkerivideo.dk (målt: linear-gradient(rgba(55,12,132,.6),
   rgba(55,12,132,.22)), 10px hjørner, hvid kursiv 700/13px Lato). */
.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 10px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.main-nav__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 10px;
  background-image: linear-gradient(rgba(55, 12, 132, .6), rgba(55, 12, 132, .22));
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}
.main-nav__list a:hover,
.main-nav__list a:focus-visible { filter: brightness(1.25); }
.main-nav__list a[aria-current="page"] { color: #c3b3ff; }

/* ---------------------------------------------------------------------------
   Søgefelt i header - mat glas-boks med live-filtrerede produkter
   ------------------------------------------------------------------------ */
.site-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}

.site-search__box {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-search__box:focus-within {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(196, 168, 255, .55);
  box-shadow: 0 0 0 3px rgba(124, 79, 235, .28);
}

.site-search__icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-left: 14px;
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px 0 10px;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font);
  font-size: 14px;
  color: #fff;
}
.site-search__input::placeholder { color: rgba(255, 255, 255, .48); }
/* Skjul de indbyggede søge-/ryd-ikoner i WebKit - vi tegner vores egen knap. */
.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.site-search__clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.site-search__clear:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.site-search__clear svg { width: 12px; height: 12px; }
/* En almindelig "display"-deklaration vinder altid over browserens indbyggede
   [hidden]{display:none} (UA-stylesheet har lavest prioritet i cascade'n,
   uanset specificitet) - uden denne regel ville knappen forblive synlig. */
.site-search__clear[hidden] { display: none; }

.site-search__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: rgba(24, 10, 56, .58);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: search-panel-in .18s ease;
}
@keyframes search-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-search__status {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.site-search__note {
  margin: 2px 6px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(124, 79, 235, .18);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .85);
}
.site-search__note strong { color: #fff; }

.site-search__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  transition: background-color .15s ease;
}
.site-search__result:hover,
.site-search__result:focus-visible,
.site-search__result.is-focused {
  background: rgba(255, 255, 255, .1);
  outline: 0;
}

.site-search__result-media {
  flex: none;
  width: 52px;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.site-search__result-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.site-search__result-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-search__result-brand {
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c3b3ff;
}
.site-search__result-title {
  font-size: 13.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .site-search__result-brand { display: none; }

  /* Ikon-only søgefelt på mobil: kun forstørrelsesglasset er synligt, så det
     ikke klemmer logoet på smalle skærme. Et tryk på det udvider boksen blødt
     til hele headerens bredde, mens logoet samtidig klapper sammen og toner
     væk - så søgningen ender med at nå helt ud til venstre kant og hen til
     burger-ikonet. Se initSearch() i site.js for selve åbne/lukke-logikken
     (den sætter/fjerner klassen "search-open" på <body>, ligesom burger-
     menuen allerede gør med "nav-open"). */
  .site-header__row {
    gap: 10px;
    transition: gap .42s cubic-bezier(.22, 1, .36, 1);
  }
  .site-search {
    flex: none;
    width: 40px;
    max-width: none;
    /* Suger al den ledige plads til sig fra venstre, så ikonet (og burger-
       knappen lige efter) hænger sammen ved højre kant i stedet for at blive
       spredt ud af rækkens justify-content:space-between. */
    margin-left: auto;
    transition: width .42s cubic-bezier(.22, 1, .36, 1), margin-left .42s cubic-bezier(.22, 1, .36, 1);
  }
  .site-search__box {
    width: 100%;
    height: 44px;
    padding: 0;
    justify-content: center;
    overflow: hidden;
    /* Sammenklappet er det kun selve ikonet, der vises - ingen mat glas-boks
       omkring det, ligesom burger-knappen heller ikke har nogen baggrund. */
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-search__icon {
    margin-left: 0;
    cursor: pointer;
    /* Samme visuelle streg-tykkelse som burger-ikonets streger (2px). */
    stroke-width: 2.35;
  }
  .site-search__input,
  .site-search__clear {
    opacity: 0;
    transition: opacity .2s ease;
  }
  body:not(.search-open) .site-search__input,
  body:not(.search-open) .site-search__clear {
    pointer-events: none;
  }

  /* Logoet har ingen egen bredde sat (auto, styret af teksten) - men CSS kan
     ikke bløde en overgang fra "auto" til 0. max-width kan derimod altid
     animeres, og har ingen effekt i hviletilstand, så længe grænsen ligger
     over logoets faktiske bredde. */
  .logo {
    max-width: 220px;
    overflow: hidden;
    transition: max-width .42s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  }

  body.search-open .site-header__row { gap: 0; }
  body.search-open .logo {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
  }
  body.search-open .site-search {
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
  }
  body.search-open .site-search__box {
    justify-content: flex-start;
    /* Udvidet er det igen den matterede glas-pille, ligesom på desktop. */
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  body.search-open .site-search__box:focus-within {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(196, 168, 255, .55);
    box-shadow: 0 0 0 3px rgba(124, 79, 235, .28);
  }
  body.search-open .site-search__icon {
    margin-left: 14px;
    stroke-width: 1.6;
  }
  body.search-open .site-search__input,
  body.search-open .site-search__clear { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Videoafspiller
   ------------------------------------------------------------------------ */
.player-section { padding-block: 0 6px; }

.player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
/* Fallback for browsere uden aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .player__frame { height: 0; padding-bottom: 56.25%; }
}

.player__frame iframe,
.player__frame > div:first-child {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.player__placeholder,
.player__error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, #170842, #0a0125);
  color: var(--text-muted);
  font-size: 15px;
}
/* En almindelig CSS-deklaration for "display" vinder altid over browserens
   indbyggede [hidden]{display:none} (UA-stylesheet har lavest prioritet i
   cascade'n, uanset specificitet) - så uden denne regel forbliver
   fejlbeskeden synlig ovenpå videoen, selvom JS sætter hidden-attributten. */
.player__placeholder[hidden],
.player__error[hidden] { display: none; }
.player__error { background: rgba(10, 1, 37, .94); color: #fff; z-index: 3; }
.player__error p { margin: 0; line-height: 1.6; }

.player__now {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--text);
  min-height: 21px;
}

/* ---------------------------------------------------------------------------
   Sektioner og overskrifter
   ------------------------------------------------------------------------ */
.product-section { padding-block: 22px 26px; }

.section-heading {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  text-transform: uppercase;
}

.empty-note { color: var(--text-muted); font-size: 14px; }

/* ---------------------------------------------------------------------------
   Sortering af produktlisten
   ------------------------------------------------------------------------ */
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-block: 6px 4px;
}
.sort-bar label {
  font-size: 13px;
  color: var(--text-muted);
}
.sort-bar select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 34px 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23c3b3ff' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.sort-bar select:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.sort-bar select option { color: #000; }

.prose-section { padding-block: 28px; }
.prose { max-width: 78ch; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.8); }
.prose h2, .prose h3 { font-style: italic; font-weight: 700; }
.prose a { color: #c3b3ff; }

/* ---------------------------------------------------------------------------
   Produktgitter
   ------------------------------------------------------------------------ */
.product-grid {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px var(--gap);
}

.product-card {
  position: relative;
  min-width: 0;
}

/* Billede + navnebar - selve "produktet". Specifikationspanelet ligger UDENFOR
   denne wrapper (som søskende i .product-card), så hverken info-knappen eller
   glow'en herunder flytter sig, når specifikationerne foldes ud. */
.product-card__frame {
  position: relative;
  /* Egen stacking context, så glow-laget herunder (z-index: -1) lægger sig
     bag selve produktet og ikke bag hele sidens baggrund - ellers ville det
     aldrig blive synligt, fordi <body> har en uigennemsigtig baggrund. */
  isolation: isolate;
}

/* Markering af valgt produkt: et blødt lilla lys bag billedet/baren i stedet
   for en farveændring på selve navnet. Sidder på .product-card__frame (ikke
   hele .product-card), så den holder sig til produktet og ikke breder sig
   ned bag et udfoldet specifikationspanel. Ligger altid i DOM'en med
   opacity:0, så den både toner ind ved valg og toner ud igen, når et andet
   produkt vælges. */
.product-card__frame::before {
  content: '';
  position: absolute;
  inset: -14px;
  background: radial-gradient(ellipse at center, rgba(124, 79, 235, .65) 0%, rgba(124, 79, 235, .32) 45%, rgba(124, 79, 235, 0) 75%);
  filter: blur(6px);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.product-card.is-active .product-card__frame::before { opacity: 1; }

.product-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.product-card__btn[disabled] { cursor: default; }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
@supports not (aspect-ratio: 2 / 1) {
  .product-card__media { height: 0; padding-bottom: 50%; }
}

.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s ease;
}
.product-card__btn:hover .product-card__media img,
.product-card__btn:focus-visible .product-card__media img { transform: scale(1.06); }
.product-card__btn[disabled]:hover .product-card__media img { transform: none; }

.product-card__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px 0 0 0;
}

.product-card__novideo {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 3px 8px;
  background: rgba(0, 0, 0, .6);
  color: rgba(255, 255, 255, .8);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.product-card__bar {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 34px 6px 10px;
  background: var(--panel);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: background .2s ease;
}
.product-card__btn:hover .product-card__bar { background: var(--panel-strong); }

.product-card__name {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.35;
  color: #fff;
  overflow-wrap: anywhere;
}
.product-card__name strong { font-weight: 700; }
.product-card__name .sep { opacity: .55; }

.product-card--novideo .product-card__bar { opacity: .6; }

/* Info-knap til specifikationer */
.product-card__info {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, .78);
  touch-action: manipulation;
}
.product-card__info:hover { color: #fff; }
.product-card__info-icon { width: 18px; height: 18px; fill: currentColor; }
/* To ikoner ligger oven på hinanden - kun ét vises ad gangen, styret af
   aria-expanded (sættes af initSpecs() i site.js). Sådan er det altid tydeligt
   om knappen viser eller skjuler specifikationerne. */
.product-card__info-icon--close { display: none; }
.product-card__info[aria-expanded="true"] { color: #c3b3ff; }
.product-card__info[aria-expanded="true"] .product-card__info-icon--open { display: none; }
.product-card__info[aria-expanded="true"] .product-card__info-icon--close { display: block; }

.product-specs {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--panel-strong);
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.5;
}
.product-specs dl { margin: 0; display: grid; gap: 3px; }
.product-specs dl > div { display: flex; justify-content: space-between; gap: 10px; }
.product-specs dt { font-weight: 700; color: rgba(255, 255, 255, .75); }
.product-specs dd { margin: 0; text-align: right; }

/* ---------------------------------------------------------------------------
   Forside
   ------------------------------------------------------------------------ */
.hero { padding-block: 55px 34px; text-align: center; }
.hero__title {
  margin: 0 0 14px;
  font-size: 35px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
.hero__lead {
  max-width: 61.5%;
  margin: 0 auto;
  font-size: 11px;
  font-weight: 300;
  font-style: normal;
  line-height: 2.1;
  color: rgba(255, 255, 255, .88);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

.tile-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 30px;
}
.tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
}
.tile__media { display: block; aspect-ratio: 360 / 170; overflow: hidden; }
@supports not (aspect-ratio: 360 / 170) { .tile__media { height: 0; padding-bottom: 47.2%; } }
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.tile:hover .tile__media img,
.tile:focus-visible .tile__media img { transform: scale(1.05); }
.tile__bar {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(60, 0, 153, .55);
  backdrop-filter: blur(2px);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.tile:hover .tile__bar,
.tile:focus-visible .tile__bar { opacity: 1; transform: translateY(0); }
.tile__count { font-size: 11px; font-weight: 400; font-style: normal; color: rgba(255,255,255,.8); }

.catalog-section { padding-block: 84px 20px; }
.catalog-section__sub {
  margin: -10px 0 18px;
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
}

.catalog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px var(--gap);
}
.catalog {
  display: block;
  text-decoration: none;
  color: #fff;
}
.catalog__media {
  display: block;
  aspect-ratio: 200 / 260;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
}
@supports not (aspect-ratio: 200 / 260) { .catalog__media { height: 0; padding-bottom: 130%; } }
.catalog__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.catalog:hover .catalog__media img { transform: scale(1.05); }
.catalog__cta {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.catalog__title {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------------------------
   Kontaktside
   ------------------------------------------------------------------------ */
.contact-section { padding-block: 30px 50px; }
.contact-form { max-width: 560px; display: grid; gap: 14px; margin-top: 18px; }
.contact-form label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form button {
  justify-self: start;
  padding: 12px 26px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.contact-form button:hover { background: var(--accent-soft); }
.form-note { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; }
.form-note--ok  { background: rgba(46, 160, 90, .22); border: 1px solid rgba(46, 160, 90, .5); }
.form-note--err { background: rgba(190, 60, 60, .22); border: 1px solid rgba(190, 60, 60, .5); }

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.site-footer {
  margin-top: 44px;
  padding-block: 34px 26px;
  background: #0f0133;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(5, 1fr);
  gap: 22px;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col a {
  display: block;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.site-footer__col a:hover { color: #fff; text-decoration: underline; }
.site-footer__note {
  margin: 24px 0 0;
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
}

.preview-bar {
  padding: 10px 16px;
  background: #6a4ae8;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.preview-bar a { color: #fff; margin-left: 10px; }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 1239px) {
  .product-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .product-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; }
  .catalog-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { font-size: 22px; }
  .hero__title   { font-size: 28px; }
}

@media (max-width: 767px) {
  .wrap { padding-inline: 12px; }
  .player-section { padding-inline: 0; }
  .player-section .wrap { padding-inline: 0; }
  .player__frame { border-radius: 0; }
  .player__now { padding-inline: 12px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .site-header__row { min-height: 60px; }
  .logo { font-size: 21px; }
  .hero { padding-block: 45px 24px; }
  .hero__title { font-size: 24px; }
}

@media (max-width: 400px) {
  .tile-grid { grid-template-columns: 1fr; }
  .product-card__name { font-size: 11px; }
  .section-heading { font-size: 19px; }
}