/* ============================================
   Nordisk Form — style.css
   Design tokens hämtade från nordisk-form.se
   ============================================ */

:root {
  --color-bg: #ece4da;
  --color-surface: #f6f3ec;
  --color-text: #36302a;
  --color-text-soft: #6b6157;
  --color-accent: #b9a590;
  --color-border: #36302a;
  --color-button-bg: #36302a;
  --color-button-text: #f6f3ec;

  --font-heading: "Instrument Serif", "Georgia", serif;
  --font-body: "Cousine", "Courier New", monospace;

  --radius-soft: 24px;

  --container-max: 1180px;
  /* Logotyp/knappar 44px + 16px luft över och under + 1px kantlinje */
  --header-height: 77px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Headern är fixed och tar ingen plats i flödet. */
  padding-top: var(--header-height);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0 0 var(--space-2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
/* Ingen capitalize: svenska rubriker skrivs med stor bokstav bara
   först, inte på varje ord. Versaliseringen styrs av källtexten. */
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

.kicker {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

p {
  margin: 0 0 var(--space-2);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-button-bg);
  color: var(--color-button-text);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader__logo {
  height: 26px;
  width: auto;
  opacity: 0;
  animation: preloaderIn 1s ease forwards 0.15s;
}

@keyframes preloaderIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Set synchronously by an inline script before paint, when sessionStorage
   shows the preloader already played once this visit. Prevents any flash
   of the preloader on subsequent page loads within the same session. */
.no-preloader .preloader {
  display: none !important;
}

body.is-loading {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__logo {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(236, 228, 218, 0.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(54, 48, 42, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: 20px;
  width: auto;
  display: block;
  transition: filter 0.2s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Desktop: riktig menyrad i headern. Mobil: enbart hamburgaren.
   Aldrig båda samtidigt — en exponerad länk bredvid en hamburgare
   som gömmer resten läser som ett misstag, inte som ett designval. */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-quicklink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Understrykning markerar aktuell sida och hover. Färgen ensam räcker
   inte som signal, och den ljusa accentfärgen gav dessutom bara
   1,88:1 mot bakgrunden, långt under kravet på 4,5:1. */
.header-quicklink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-quicklink:hover::after,
.header-quicklink:focus-visible::after,
.header-quicklink[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .header-quicklink::after {
    transition: none;
  }
}

.menu-trigger {
  display: none; /* visas bara på mobil, se mediafrågan längst ned */
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s ease;
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
  color: var(--color-accent);
}

/* ---------- Full-screen nav overlay ---------- */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  /* Menyn rymmer nu fler nivåer — scrolla hellre än att klippa
     innehållet på låga skärmar (t.ex. mobil i liggande läge). */
  overflow-y: auto;
  padding: var(--space-6) 0 var(--space-4);
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

.nav-close:hover,
.nav-close:focus-visible {
  color: var(--color-accent);
}

.site-nav__inner {
  width: 100%;
  max-width: 640px;
  padding: 0 var(--space-3);
  text-align: center;
  margin: auto; /* centrerar även när menyn måste scrolla */
}

/* Primära länkar — sortiment och kontakt */
.site-nav__links {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-nav__links li,
.site-nav__sublinks li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i, 0) * 60ms);
}

.site-nav.is-open .site-nav__links li,
.site-nav.is-open .site-nav__sublinks li {
  opacity: 1;
  transform: translateY(0);
}

.site-nav__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--color-text);
  transition: color 0.2s ease;
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible,
.site-nav__links a[aria-current="page"] {
  color: var(--color-accent);
}

/* Sekundära länkar — villkor och policyer */
.site-nav__secondary {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(54, 48, 42, 0.12);
}

.site-nav__heading {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.site-nav__sublinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
}

.site-nav__sublinks a {
  display: inline-flex;
  align-items: center;
  /* Höjden håller träffytan bekväm för fingrar, inte bara för mus. */
  min-height: 44px;
  padding: 0 2px;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  transition: color 0.2s ease;
}

.site-nav__sublinks a:hover,
.site-nav__sublinks a:focus-visible,
.site-nav__sublinks a[aria-current="page"] {
  color: var(--color-text);
}

.site-nav__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.site-nav__meta a {
  transition: color 0.2s ease;
}

.site-nav__meta a:hover,
.site-nav__meta a:focus-visible {
  color: var(--color-text);
}

.site-nav__social {
  display: flex;
  gap: var(--space-2);
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav,
  .site-nav__links li {
    transition: none !important;
  }
}

/* ---------- Buttons & form controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-button-bg);
  color: var(--color-button-text);
  border: 1px solid var(--color-button-bg);
  border-radius: 0;
  /* Slankare än den rundade varianten tålde: utan pillerformen läser
     samma höjd som en tung kloss. Landar strax över 44 px, som är
     minimum för en träffyta. */
  padding: 10px 28px;
  font-family: var(--font-body);
  font-size: 1rem;
  /* Utskriven radhöjd: <button> och <a> ärver olika från webbläsaren,
     vilket annars ger knappar i olika höjd på olika sidor. */
  line-height: 1.4;
  min-height: 44px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  opacity: 0.85;
}

.btn:active {
  transform: scale(0.98);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
}

/* ---------- Sections ---------- */
.section {
  padding: var(--space-6) 0;
}

.section--tight {
  padding: var(--space-5) 0;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  /* Galleriet ligger i en naken .container, inte i en .section, och
     saknar därför bottenluft. Utan den nuddar bilderna sidfoten. */
  margin-bottom: var(--space-6);
}

.gallery img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-soft);
}

.gallery figure {
  margin: 0;
}

/* Referensbild som länkar vidare till studion som publicerat den */
.gallery__link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-soft);
  overflow: hidden;
}

.gallery__link img {
  border-radius: 0; /* hörnen sitter på länken i stället */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery__link:hover img,
.gallery__link:focus-visible img {
  transform: scale(1.03);
}

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

.gallery__credit {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-surface);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  /* Mjuk toning bara nedtill — bilden ska inte mörkna i onödan */
  background: linear-gradient(180deg, rgba(54, 48, 42, 0) 0%, rgba(54, 48, 42, 0.42) 100%);
  transition: opacity 0.3s ease;
}

.gallery__link:hover .gallery__credit,
.gallery__link:focus-visible .gallery__credit {
  opacity: 0.85;
}

/* ---------- Contact ---------- */
/* Kontaktytan hade tidigare två kolumner, text och formulär. Sedan
   formuläret tagits bort står texten ensam, och får en läsbar bredd
   i stället för att spänna över hela sidan. */
.contact {
  max-width: 46rem;
}

.contact__intro h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

.contact__intro p {
  color: var(--color-text-soft);
}

.contact__details {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact__details a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Återförsäljare ---------- */
/* Linjerna går ut i sidans kanter, men innehållet håller samma
   vänsterkant som loggan i headern. Därför ligger listan utanför
   .container och varje rad bär sin egen sidopadding. */
.reseller-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reseller {
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(54, 48, 42, 0.2);
}

.reseller:last-child {
  border-bottom: 1px solid rgba(54, 48, 42, 0.2);
}

.reseller__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Namnet till vänster, loggan till höger. Wrap gör att loggan
   hamnar under namnet när raden blir för smal. */
.reseller__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.reseller__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
}

.reseller__name a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.reseller__name a:hover,
.reseller__name a:focus-visible {
  border-bottom-color: currentColor;
}

/* Loggan är vit på genomskinlig botten och skulle försvinna mot
   sidans ljusa yta. Den får därför en mörk platta i sajtens egen
   brunton i stället för att färgas om: en återförsäljares märke ska
   visas som det är. */
.reseller__logo {
  flex: 0 0 auto;
  width: 220px;
  max-width: 100%;
  height: auto;
  background: var(--color-text);
  padding: 14px 22px;
}

.reseller__address {
  margin: var(--space-2) 0 0;
  color: var(--color-text-soft);
}

/* ---------- Social ---------- */
.social {
  text-align: center;
}

.social h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

.social__links {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
}

.social__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.social__links a:hover,
.social__links a:focus-visible {
  background: var(--color-button-bg);
  color: var(--color-button-text);
}

/* ---------- Legal / content pages ---------- */
.page-hero {
  padding: var(--space-6) 0 var(--space-4);
  text-align: center;
}

.page-hero p.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

.updated {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.prose {
  max-width: 760px;
  margin: 0 auto;
}

.prose h2 {
  margin-top: var(--space-4);
  font-size: 1.5rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.2em;
}

.prose li {
  margin-bottom: 6px;
}

.breadcrumbs {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}

.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(54, 48, 42, 0.12);
}

/* Avdelare i stället för kort: frågorna behöver skiljas åt, men
   kortlooken hör inte hemma i sidans övriga formspråk. */
.faq-item {
  border-bottom: 1px solid rgba(54, 48, 42, 0.12);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--color-text-soft);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: var(--space-3);
  color: var(--color-text-soft);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-text);
  color: var(--color-surface);
  padding: var(--space-5) 0 var(--space-3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.footer-grid h2,
.footer-grid h3 {
  color: var(--color-surface);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.footer-logo-img {
  height: 18px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-2);
}

.footer-grid p {
  color: rgba(246, 243, 236, 0.7);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: rgba(246, 243, 236, 0.85);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-surface);
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(246, 243, 236, 0.15);
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 0.85rem;
  color: rgba(246, 243, 236, 0.6);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .logo-img {
    height: 16px;
  }

  /* Mobil: menyraden viker för hamburgaren — det finns inte plats
     för både logotyp och länkar bredvid varandra. */
  .header-nav {
    display: none;
  }

  .menu-trigger {
    display: inline-flex;
  }

  .prose,
  .contact,
  .faq-item {
    padding: var(--space-3);
  }
}

/* ============================================
   Möbelsektionen (/mobler)
   ============================================ */

.page-hero__lead {
  max-width: 620px;
  margin: var(--space-2) auto 0;
  color: var(--color-text-soft);
}

.mobler-message {
  text-align: center;
  color: var(--color-text-soft);
  /* Ligger utanför .container på detaljsidan, därav sidluften här. */
  padding: var(--space-5) var(--space-3);
}

.mobler-message .btn {
  margin-top: var(--space-3);
}

/* ---------- Bild med platshållar-fallback ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-soft);
  background: var(--color-surface);
}

.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: linear-gradient(135deg, var(--color-surface) 0%, #e6ddd2 100%);
  border: 1px solid rgba(54, 48, 42, 0.08);
}

.media__placeholder-text {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-align: center;
  line-height: 1.4;
}

/* ---------- Listsida ---------- */
/* Modellerna visas som ett sammanhängande rutnät utan mellanrum —
   bilderna bär informationen, namnet ligger ovanpå. */
.model-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.model-card__link {
  display: block;
}

.model-card__media {
  border-radius: 0;
}

/* Platshållaren har en kantlinje, som blir en synlig söm mot
   grannkortet i det sammanhängande rutnätet. Bildkorten har ingen. */
.model-card__media.media--placeholder {
  border: none;
}

/* Miljöbilden tonas in vid hover. Studiobilden ligger kvar under, så
   kortet aldrig blir tomt medan miljöbilden laddas. Bara för mus:
   på pekskärm finns ingen hover att lämna, och bilden skulle fastna. */
.media__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .model-card__link:hover .media__img--hover,
  .model-card__link:focus-visible .media__img--hover {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media__img--hover {
    transition: none;
  }
}

/* Ingen slöja i viloläget. Studiobilderna är alla ljusa där namnet
   ligger, så mörk text ger över 11:1 utan att mörkna bilden. En
   gradient över hela kortet gjorde i stället att varje kort gick från
   ljust till mörkt, vilket blev en synlig söm mot grannkortet. */
.model-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(54, 48, 42, 0) 45%, rgba(54, 48, 42, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Vid hover byts studiobilden mot miljöbilden, och de varierar från
   nästan svart till ljus altan. Då tänds slöjan och namnet blir ljust.
   Den syns bara på det kort man pekar på, så den skapar ingen rand i
   rutnätet. */
@media (hover: hover) and (pointer: fine) {
  .model-card__link:hover .model-card__media::after,
  .model-card__link:focus-visible .model-card__media::after {
    /* Full styrka redan vid 82 %, så texten aldrig hamnar i det
       svagare partiet. 0,72 räcker för 4,5:1 mot vitt även om
       miljöbilden är helt utbränd just där. */
    background: linear-gradient(
      180deg,
      rgba(54, 48, 42, 0) 38%,
      rgba(54, 48, 42, 0.72) 82%,
      rgba(54, 48, 42, 0.72) 100%
    );
    opacity: 1;
  }

  .model-card__link:hover .model-card__name,
  .model-card__link:focus-visible .model-card__name {
    color: var(--color-surface);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
  }
}

.model-card__link:hover .media__img,
.model-card__link:focus-visible .media__img {
  transform: scale(1.04);
}

.model-card__link:focus-visible {
  outline: 2px solid var(--color-surface);
  outline-offset: -6px;
}

/* Studiobilderna renderas i omgångar, och bakgrundsgråt skiljer sig
   några steg mellan omgångarna. I rutnätet ligger korten kant i kant,
   så fem stegs skillnad blir en synlig linje mellan två kort. De två
   bilderna nedan ligger på 237 respektive 244 där de andra ligger på
   241, och lyfts hit. Raderna kan tas bort när bilderna exporterats om
   mot samma bakgrund. */
img[src*="lounge-table/terrazzo-perla.jpg"] {
  filter: brightness(1.017);
}

img[src*="coffee-table/rosso-levanto.jpg"] {
  filter: brightness(0.988);
}

.model-card__name {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  text-shadow: none;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ---------- Detaljsida ---------- */
.section--product {
  /* Lite luft upptill: bilden ska möta besökaren direkt. */
  padding: var(--space-3) 0 var(--space-6);
}

/* Detaljsidan ligger utanför .container, så brödsmulan linjerar med
   beskrivningstexten under bilden i stället för med sidbredden. */
.breadcrumbs--flush {
  padding-inline: var(--space-3);
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-2);
}

/* Bild och beskrivning i vänsterkolumnen, info till höger över båda
   raderna. Placeringen är utskriven, eftersom beskrivningen ligger
   sist i koden för att hamna rätt i läsordningen på mobil. */
.product__media { grid-column: 1; grid-row: 1; }
.product__desc { grid-column: 1; grid-row: 2; }
.product__info { grid-column: 2; grid-row: 1 / span 2; }

.product__media {
  /* Ingen sticky: med miljöbild blir kolumnen högre än fönstret,
     och då har sticky ingen effekt ändå. */
}

/* Bildspel: bara aktiv bild visas, pilarna ligger över nedre högra
   hörnet och döljs helt när det bara finns en bild. */
.pgallery {
  position: relative;
}

.pgallery__slide:not(.is-active) {
  display: none;
}

.pgallery__nav {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pgallery__nav[hidden] {
  display: none;
}

.pgallery__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(54, 48, 42, 0.16);
  background: rgba(246, 243, 236, 0.88);
  backdrop-filter: blur(4px);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pgallery__btn:hover,
.pgallery__btn:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-text);
}

.pgallery__counter {
  /* Egen platta: annars försvinner siffrorna mot en ljus bild. */
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  background: rgba(246, 243, 236, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(54, 48, 42, 0.16);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

/* Huvudbilden går ända ut i vänsterkanten, utan hörnradie. */
.product__image {
  border-radius: 0;
}

/* Texten under bilden behöver egen luft, eftersom kolumnen inte
   längre ligger i .container. */
.product__info {
  padding-right: var(--space-4);
}

/* Bildtext: ligger tätt mot bilden, med tydligt större avstånd ned
   till brödtexten. Lika avstånd åt båda håll fick den att läsa som
   ett eget stycke i stället för att höra till bilden. */
.product__imagenote {
  margin: var(--space-1) 0 0;
  padding-inline: var(--space-3);
  max-width: 52ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

/* Beskrivning under produktbilden. */
.product__desc {
  padding-inline: var(--space-3);
}

.product__facts {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.product__facts li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

.product__facts li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.product__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-soft);
}

.product__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-2);
}

.product__price {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
  color: var(--color-text);
}

.product__dims,
.product__chosen {
  margin: 0 0 6px;
  color: var(--color-text-soft);
}

.product__dims-label,
.product__chosen-label {
  display: inline-block;
  min-width: 62px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.product__note {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin: var(--space-2) 0 0;
}

/* Ingen egen kantlinje: dragspelet ovanför avslutas redan med en
   avdelare, och två streck efter varandra blir bara brus. Luften
   räcker för att skilja knappen från informationen. */
.product__cta {
  margin-top: var(--space-5);
}

/* Två knappar bredvid varandra på dator, staplade när kolumnen blir
   smal. Knapparna är lika breda i staplat läge, annars ser den
   kortare ut som en eftertanke. */
.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 520px) {
  .product__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .product__actions .btn {
    text-align: center;
  }
}

/* ---------- Stenval ---------- */
.swatches__label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.swatch {
  position: relative;
  width: 54px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-text-soft);
  -webkit-tap-highlight-color: transparent;
}

.swatch__media {
  /* Kanten bär rutan när stenen är mycket ljus, som travertin och
     terrazzon, och annars flyter ihop med bakgrunden. */
  border: 1px solid rgba(54, 48, 42, 0.28);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

/* Rutorna är för små för ett namn. Det valda utförandet står i
   STEN-raden ovanför, och namnet finns kvar för skärmläsare. */
.swatch .media__placeholder-text {
  display: none;
}

.swatch:hover .swatch__media {
  border-color: rgba(185, 165, 144, 0.6);
}

.swatch:focus-visible {
  outline: none;
}

.swatch:focus-visible .swatch__media {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.swatch.is-active .swatch__media {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.swatch.is-active {
  color: var(--color-text);
}

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

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
  .product {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* En kolumn: bild, sedan stenval och produktinfo, sedan texten.
     Ordningen följer koden, så placeringen ovan måste släppas. */
  .product__media,
  .product__desc,
  .product__info {
    grid-column: 1;
    grid-row: auto;
  }


  .product__info {
    padding-inline: var(--space-3);
  }

  /* Beskrivningen ligger sist på mobil, direkt efter produktinfon.
     Med bara rutnätets 24 px läser CTA-noten, punkterna och brödtexten
     som ett enda spretigt block. */
  .product__desc {
    margin-top: var(--space-4);
  }

  /* Punkterna och brödtexten skilde sig med 14,4 mot 16 px, vilket
     såg oavsiktligt ut när de ligger tätt. Samma storlek här. */
  .product__facts li,
  .product__lead {
    font-size: 0.95rem;
  }

  /* Bildtexten ska läsa som en notis, inte som brödtext. */
  .product__imagenote {
    font-size: 0.75rem;
  }

  /* Kvadratisk bild på smala skärmar ger mer höjd åt de smala, höga
     modellerna. Beskärningen tar 25 procent av bildens bredd, vilket
     ett brett lågt bord inte tål: kortändarna skulle kapas. Därför
     bara på de modeller som är märkta för det i tables.json. */
  .product--square-mobile .product__image.media--4x3 {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 600px) {
  /* Alla utföranden ska rymmas på en rad även på smala telefoner.
     Rutorna krymper därför i stället för att brytas ned. */
  .swatches {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .swatch {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 54px;
  }
}

@media (max-width: 720px) {
  /* Ett kort per rad. Bilden blir dubbelt så stor som i ett rutnät
     två i bredd, och stenen syns. */
  .model-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sortimentsektion på startsidan ---------- */
.section-cta {
  text-align: center;
  margin-top: var(--space-5);
}

/* Sektion vars innehåll går kant i kant (modellrutnätet) */
.section--flush {
  padding-left: 0;
  padding-right: 0;
}

/* Meddelanden ligger utanför .container i flush-läge — ge dem marginal */
.section--flush .mobler-message {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}


/* Möblerna möter besökaren direkt — ingen luft mot headern */
.section--flush-top {
  padding-top: 0;
}

/* ---------- Dragspel med produktinformation ---------- */
/* Samma formspråk som frågorna på FAQ-sidan: tunna avdelare och ett
   plustecken som vrids till kryss när panelen är öppen. */
.accordion {
  margin-top: var(--space-4);
  border-top: 1px solid rgba(54, 48, 42, 0.14);
}

.accordion__item {
  border-bottom: 1px solid rgba(54, 48, 42, 0.14);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  transition: color 0.2s ease;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary:hover,
.accordion__summary:focus-visible,
.accordion__item[open] .accordion__summary {
  color: var(--color-text);
}

.accordion__summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text-soft);
  transition: transform 0.2s ease;
}

.accordion__item[open] .accordion__summary::after {
  transform: rotate(45deg);
}

.accordion__panel {
  padding-bottom: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__summary,
  .accordion__summary::after {
    transition: none;
  }
}

/* Specifikationslista */
.spec-list {
  margin: 0;
}

.spec-row {
  display: grid;
  /* Bredd nog för den längsta etiketten, "Vid utomhusbruk", som annars
     bryts över tre rader. */
  grid-template-columns: 150px 1fr;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid rgba(54, 48, 42, 0.08);
}

/* Hänvisning i en specifikationsrad, t.ex. till garantivillkoren. */
.spec-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.spec-link:hover,
.spec-link:focus-visible {
  color: var(--color-accent);
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-row dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-top: 3px;
}

.spec-row dd {
  margin: 0;
  color: var(--color-text-soft);
}

.spec-dimension {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

@media (max-width: 560px) {
  /* Etikett över värde när utrymmet tryter */
  .spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Ankarlänkar ska inte hamna bakom den fixerade headern */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-2));
}

/* ---------- Cookiebanner ---------- */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  background: var(--color-surface);
  border-top: 1px solid rgba(54, 48, 42, 0.12);
  box-shadow: 0 -8px 40px rgba(54, 48, 42, 0.08);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.consent.is-visible {
  transform: translateY(0);
}

.consent__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.consent__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  max-width: 62ch;
}

.consent__text a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Båda valen ska väga lika tungt visuellt. */
.consent__actions .btn {
  padding: 12px 26px;
  font-size: 0.9rem;
  min-height: 44px;
}

/* Knapp som ser ut som en footerlänk (öppna inställningarna igen) */
.footer-linkbutton {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: inherit;
  color: rgba(246, 243, 236, 0.85);
  cursor: pointer;
  text-align: left;
}

.footer-linkbutton:hover,
.footer-linkbutton:focus-visible {
  color: var(--color-surface);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .consent__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: none;
  }
}

/* ---------- Materialhero (granitkeramik) ---------- */
.material-hero {
  position: relative;
  /* Fyller resten av skärmen under den fixerade headern.
     svh används där det finns, så mobilens adressfält inte klipper. */
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.material-hero__media {
  position: absolute;
  inset: 0;
}

.material-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Toning nedtill så texten är läsbar oavsett bildens ljushet */
.material-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(54, 48, 42, 0) 0%,
    rgba(54, 48, 42, 0.12) 38%,
    rgba(54, 48, 42, 0.55) 64%,
    rgba(54, 48, 42, 0.88) 100%
  );
}

.material-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: var(--space-6);
  color: var(--color-surface);
}

.material-hero__content .eyebrow {
  color: var(--color-surface);
  opacity: 0.8;
}

.material-hero__content h1 {
  color: var(--color-surface);
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-3);
}

.material-hero__lead {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--color-surface);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

/* Diskret vink om att sidan fortsätter */
.material-hero__cue {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-surface);
  opacity: 0.65;
  animation: cueDrift 2.4s ease-in-out infinite;
}

@keyframes cueDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .material-hero__cue {
    animation: none;
  }
}

@media (max-width: 720px) {
  /* Bilden är liggande, 16:9. En helskärmshero på en smal telefon
     skulle beskära bort båda skivorna och lägga skarven mellan dem
     rakt genom rubriken, så här ligger bilden hel överst i stället
     och texten läses under den. */
  .material-hero {
    display: block;
    height: auto;
    min-height: 0;
  }

  .material-hero__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }

  /* Toningen behövs bara när texten ligger ovanpå bilden. */
  .material-hero__media::after {
    display: none;
  }

  .material-hero__content {
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
    color: var(--color-text);
  }

  .material-hero__content .eyebrow {
    color: var(--color-accent);
    opacity: 1;
  }

  .material-hero__content h1 {
    color: var(--color-text);
    text-shadow: none;
  }

  .material-hero__lead {
    color: var(--color-text-soft);
    text-shadow: none;
  }

  .material-hero__cue {
    display: none;
  }
}