/* =============================================================
   SÖDER & SÖNER — sektioner och sidmoduler
   Bygger på tokens och komponenter i style.css.
   ============================================================= */

/* ============ STARTSIDAN ==================================== */

/* ---------- Hero -------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: clamp(9rem, 16vh, 12rem) 0 clamp(6rem, 12vh, 9rem);
  overflow: hidden;
  background: #08080a;
}

.hero__stage { position: absolute; inset: 0; }
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(8, 8, 10, 0.25) 0%, rgba(8, 8, 10, 0.82) 100%),
    linear-gradient(to bottom, rgba(8, 8, 10, 0.85) 0%, rgba(8, 8, 10, 0.32) 34%, rgba(8, 8, 10, 0.92) 100%);
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  scale: 1.04;
  transition: opacity 1.6s var(--ease);
}
/* Den enda riktigt långsamma rörelsen på sajten: bilden kryper
   inåt medan man läser rubriken. */
.hero__slide.is-active {
  opacity: 1;
  animation: kenburns 11s linear forwards;
}
@keyframes kenburns {
  from { scale: 1.04; }
  to { scale: 1.14; }
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  text-align: center;
  justify-items: center;
}
.hero__panel {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  opacity: 0;
  translate: 0 24px;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), translate 0.9s var(--ease), visibility 0.9s;
}
.hero__panel.is-active { opacity: 1; translate: 0 0; visibility: visible; }
.hero__mark { color: var(--brass); margin-bottom: 2rem; }
.hero__panel .display { max-width: 16ch; }
.hero__panel .btn { margin-top: 2.6rem; }
.hero__panel .eyebrow { margin-bottom: 1.1rem; }

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  translate: 0 -50%;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: rgba(11, 11, 13, 0.25);
  backdrop-filter: blur(4px);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.hero__arrow:hover { background: var(--brass); border-color: var(--brass); color: #0b0b0d; }
.hero__arrow--prev { left: clamp(0.8rem, 3vw, 3rem); rotate: 180deg; }
.hero__arrow--next { right: clamp(0.8rem, 3vw, 3rem); }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(3.5rem, 7vh, 5rem);
  z-index: 4;
  display: flex;
  gap: 0.9rem;
  translate: -50% 0;
}
.hero__dots button {
  width: 34px; height: 2px;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.4s var(--ease), width 0.4s var(--ease);
}
.hero__dots button.is-active { background: var(--brass); width: 54px; }

@media (max-width: 720px) {
  .hero__arrow { display: none; }
  .hero { min-height: 92svh; }
}

/* ---------- Vår historia ------------------------------------- */

.intro { overflow: hidden; }
.intro__watermark { top: 8%; right: -6rem; }
.intro__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.intro__stack { position: relative; padding-bottom: 5rem; }
.intro__portrait { margin: 0; }
.intro__portrait img { width: 100%; }
.intro__tools {
  position: absolute;
  right: -2rem;
  bottom: 0;
  width: 62%;
  margin: 0;
  border: 8px solid var(--ink);
}
.intro__tools img { width: 100%; }

.years {
  position: absolute;
  top: -3.2rem;
  right: -1.6rem;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 6.6rem; height: 6.6rem;
  border-radius: 50%;
  background: var(--brass);
  color: #0b0b0d;
  text-align: center;
}
.years__num { font-size: 1.9rem; line-height: 1; font-weight: 400; }
.years__label {
  margin-top: 0.25rem;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  max-width: 5rem;
}

.intro__text .lede + .lede { margin-top: 1.2rem; }
.intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2.6rem;
}

@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__stack { max-width: 30rem; }
  .intro__watermark { display: none; }
}

/* ---------- Fyra ingångar ------------------------------------ */

.services__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.services__item { display: grid; justify-items: start; }
.services__item .ico { color: var(--brass); margin-bottom: 1.5rem; }
.services__item h2 {
  margin-bottom: 0.8rem;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.services__item p { font-size: 0.88rem; color: var(--muted); max-width: 28ch; }

@media (max-width: 900px) { .services__list { grid-template-columns: 1fr 1fr; row-gap: 2.8rem; } }
@media (max-width: 520px) { .services__list { grid-template-columns: 1fr; } }

/* ---------- Balansen ----------------------------------------- */

.balance__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
}
.balance__panel {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  margin-right: -4rem;
  background: var(--panel);
  border: 1px solid var(--line);
}
.balance__panel .btn { margin-top: 2.2rem; }
.balance__figure { margin: 0; }
.balance__figure img {
  width: 100%;
  /* Fotot är varmare än resten av sidan; en aning nedtonat sitter det
     i samma rum som mässingen istället för att lysa förbi den. */
  filter: saturate(0.9) contrast(1.05) brightness(0.94);
}

.stamp {
  position: absolute;
  top: clamp(-2.5rem, -3vw, -2rem);
  right: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  place-items: center;
  width: 7.4rem; height: 7.4rem;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line);
}
.stamp__ring {
  position: absolute;
  inset: 0;
  fill: var(--brass);
  font-size: 9.4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: spin 26s linear infinite;
}
.stamp__mark { width: 1.9rem; height: 1.9rem; color: var(--text); }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .stamp__ring { animation: none; } }

@media (max-width: 900px) {
  .balance__grid { grid-template-columns: 1fr; }
  .balance__panel { margin-right: 0; order: 2; margin-top: -3rem; margin-inline: 1.2rem; }
  .balance__figure { order: 1; }
}

/* ---------- Manifestet --------------------------------------- */

.manifest {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(5rem, 12vw, 10rem);
  background-size: cover;
  background-position: center 35%;
}
.manifest__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(11, 11, 13, 0.55) 0%, rgba(11, 11, 13, 0.86) 100%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(11, 11, 13, 0.25) 22%, rgba(11, 11, 13, 0.35) 78%, var(--ink) 100%);
}
.manifest__inner { position: relative; text-align: center; }
.manifest__title {
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.manifest__title em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brass-lt);
  font-size: 1.08em;
}
@media (max-width: 1024px) { .manifest { background-attachment: scroll; } }

/* ---------- Paketen ------------------------------------------ */

.prices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.pricecard {
  position: relative;
  display: grid;
  justify-items: center;
  padding: clamp(2rem, 3vw, 2.8rem) clamp(1.5rem, 2.4vw, 2.4rem) clamp(2.2rem, 3vw, 2.8rem);
  background: var(--ink-2);
  border: 1px solid var(--line);
  text-align: center;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.pricecard:hover { border-color: rgba(194, 146, 79, 0.45); }
.pricecard--featured {
  background: var(--panel-2);
  border-color: var(--brass);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.pricecard__flag {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -50%;
  padding: 0.35rem 1.1rem;
  background: var(--brass);
  color: #0b0b0d;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pricecard__tier {
  margin: 0 0 0.9rem;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
}
.pricecard__name {
  font-size: 1.12rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pricecard__price {
  margin: 1.4rem 0 0.2rem;
  font-size: clamp(2.4rem, 3.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1;
  color: var(--text);
}
.pricecard__price span {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pricecard__time {
  margin: 0 0 1.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.pricecard__list {
  width: 100%;
  margin-bottom: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.pricecard__list li {
  display: flex;
  gap: 0.8rem;
  padding: 0.5rem 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.pricecard__list .ico { color: var(--brass); margin-top: 0.35rem; width: 0.85em; height: 0.85em; }
.prices__note {
  margin-top: 2.8rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--muted);
}
.prices__note a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .prices__grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .pricecard--featured { order: -1; }
}

/* ---------- Hyllan ------------------------------------------- */

.brands__label {
  margin-bottom: 2.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.brands__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding-block: 2rem;
  border-block: 1px solid var(--line);
}
.brands__row li {
  text-align: center;
  font-size: clamp(0.72rem, 1.1vw, 0.86rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f6a63;
  transition: color 0.4s var(--ease);
}
.brands__row li:hover { color: var(--brass-lt); }
@media (max-width: 900px) { .brands__row { grid-template-columns: repeat(3, 1fr); row-gap: 1.8rem; } }

/* ---------- Videotur ----------------------------------------- */

.videotour {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
  background-size: cover;
  background-position: center;
}
.videotour__veil { position: absolute; inset: 0; background: rgba(9, 9, 11, 0.78); }
.videotour__inner { position: relative; display: grid; justify-items: center; text-align: center; }
.playbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  color: var(--brass);
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
.playbtn .ico { width: 1.4rem; height: 1.4rem; margin-left: 4px; }
.playbtn:hover { background: var(--brass); color: #0b0b0d; }
.playbtn__ring {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(194, 146, 79, 0.35);
  border-radius: 50%;
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { scale: 1; opacity: 0.8; }
  70% { scale: 1.28; opacity: 0; }
  100% { scale: 1.28; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .playbtn__ring { animation: none; } }
.videotour__label {
  margin: 1.8rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text);
}
.videotour__note {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--brass-lt);
}
.videotour__note[hidden] { display: none; }

/* ---------- Grundaren ---------------------------------------- */

.founder__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.founder__words .display { max-width: 20ch; }
.founder__sign {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.founder__signature { width: 6.5rem; height: 2rem; color: var(--brass); }
.founder__sign span {
  display: grid;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.founder__sign small {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: none;
}
.founder__portrait { margin: 0; }
.founder__portrait img {
  width: 100%;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.hours {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.hours__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hours__title .ico { color: var(--brass); }
.hours__table { width: 100%; border-collapse: collapse; }
.hours__table th,
.hours__table td {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--muted);
}
.hours__table th { text-align: left; }
.hours__table td { text-align: right; color: var(--text); }
.hours__table .is-closed td { color: var(--brass); }
.hours__note { margin-top: 1.2rem; font-size: 0.76rem; color: var(--muted); }

@media (max-width: 1024px) {
  .founder__grid { grid-template-columns: 1fr 1fr; }
  .founder__words { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .founder__grid { grid-template-columns: 1fr; }
  .founder__portrait { max-width: 18rem; }
}

/* ---------- Siffror ------------------------------------------ */

.stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}
.stats__row li {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(2rem, 3.4vw, 2.8rem) 1rem;
  text-align: center;
}
.stats__row li + li { border-left: 1px solid var(--line); }
.stats__num {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 200;
  line-height: 1;
  color: var(--brass);
}
.stats__label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 16ch;
}
@media (max-width: 860px) {
  .stats__row { grid-template-columns: 1fr 1fr; }
  .stats__row li:nth-child(3) { border-left: 0; }
  .stats__row li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- Hitta hit ---------------------------------------- */

.places__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.places__figure { position: relative; margin: 0; }
.places__figure img { width: 100%; height: 100%; object-fit: cover; }
.places__panel {
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  background: var(--panel);
}
.places__panel > .btn { margin-top: 2.4rem; }
.places__list { margin-top: 2.6rem; }
.places__list li {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.places__list li:last-child { border-bottom: 1px solid var(--line); }
.places__list h3 {
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}
.places__list p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.places__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin-top: 0.5rem !important;
  font-size: 0.84rem !important;
}
.places__meta a { color: var(--text); }
.places__meta a:hover { color: var(--brass-lt); }

@media (max-width: 860px) {
  .places__grid { grid-template-columns: 1fr; }
  .places__figure { aspect-ratio: 4 / 3; }
}

/* ============ OM OSS ======================================== */

.story__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.story__media { position: relative; padding-bottom: 4rem; }
.story__media figure { margin: 0; }
.story__media img { width: 100%; }
.story__inset {
  position: absolute;
  left: -3rem;
  bottom: 0;
  width: 58%;
  border: 8px solid var(--ink);
}
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__media { max-width: 28rem; }
  .story__inset { left: auto; right: -1rem; }
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.timeline li {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--panel);
}
.timeline__year {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 200;
  color: var(--brass);
  letter-spacing: 0.04em;
}
.timeline h3 {
  margin-bottom: 0.7rem;
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.timeline p { margin: 0; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }

.values__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.values__list li { padding-top: 1.8rem; border-top: 1px solid var(--brass); }
.values__num {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--brass);
}
.values__list h3 {
  margin-bottom: 0.9rem;
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.values__list p { margin: 0; font-size: 0.92rem; color: var(--muted); }
@media (max-width: 860px) { .values__list { grid-template-columns: 1fr; } }

.teamteaser__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.teamteaser__grid .btn { margin-top: 2.2rem; }
.teamteaser__faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.teamteaser__faces img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .teamteaser__grid { grid-template-columns: 1fr; } }

.ctaband {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
  background-size: cover;
  background-position: center;
}
.ctaband__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 13, 0.88), rgba(11, 11, 13, 0.94));
}
.ctaband__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.ctaband__inner .lede { margin-top: 1.4rem; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; justify-content: center; }

/* ============ TEAMET ======================================== */

.teamgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
}
.barber {
  display: grid;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.5s var(--ease);
}
.barber:hover { border-color: rgba(194, 146, 79, 0.4); }
.barber__photo { position: relative; margin: 0; overflow: hidden; }
.barber__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.94);
  transition: scale 1.1s var(--ease);
}
.barber:hover .barber__photo img { scale: 1.04; }
.barber__years {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 1rem;
  background: var(--brass);
  color: #0b0b0d;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.barber__body { padding: clamp(1.5rem, 2.4vw, 2rem); }
.barber__body h2 {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.barber__role {
  margin: 0.5rem 0 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.barber__text { font-size: 0.88rem; color: var(--muted); }
.barber__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0 1.6rem; }
.barber__tags li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1024px) { .teamgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .teamgrid { grid-template-columns: 1fr; } }

.joinus {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.joinus__box {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.joinus__box p {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  font-size: 0.92rem;
}
.joinus__box .ico { color: var(--brass); }
.joinus__note { font-size: 0.82rem !important; color: var(--muted); margin-top: 1.2rem !important; }
@media (max-width: 860px) { .joinus { grid-template-columns: 1fr; } }

/* ============ PORTFOLIO OCH GALLERI ========================= */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.6rem;
  margin-bottom: clamp(2rem, 3vw, 2.8rem);
  border-bottom: 1px solid var(--line);
}
.filterbar__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filterbar__btn {
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--line);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.filterbar__btn:hover { color: var(--text); border-color: var(--line-strong); }
.filterbar__btn.is-active { background: var(--brass); border-color: var(--brass); color: #0b0b0d; }
.filterbar__count {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.worksgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.work a { position: relative; display: block; overflow: hidden; }
.work img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: scale 1.2s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.9) brightness(0.92);
}
.work a:hover img { scale: 1.05; filter: saturate(1) brightness(1); }
.work__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  gap: 0.2rem;
  padding: 1.6rem 1.3rem 1.2rem;
  background: linear-gradient(to top, rgba(9, 9, 11, 0.94), transparent);
  translate: 0 12px;
  opacity: 0;
  transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
}
.work a:hover .work__meta,
.work a:focus-visible .work__meta { opacity: 1; translate: 0 0; }
.work__meta strong {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.work__meta em {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
@media (max-width: 900px) { .worksgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .worksgrid { grid-template-columns: 1fr; } }

.splitcta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.splitcta .btn { margin-top: 2rem; }
.splitcta__figure { margin: 0; }
.splitcta__figure img { width: 100%; }
@media (max-width: 860px) { .splitcta { grid-template-columns: 1fr; } }

.gallery { display: grid; gap: clamp(0.8rem, 1.4vw, 1.2rem); }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
.gallery a { display: block; overflow: hidden; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.9);
  transition: scale 1.2s var(--ease), filter 0.6s var(--ease);
}
.gallery a:hover img,
.gallery a:focus-visible img { scale: 1.05; filter: saturate(1) brightness(1); }
.gallery__note {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--muted);
}
.gallery__note a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1024px) { .gallery--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) {
  .gallery--3, .gallery--4 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Lightbox ----------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: clamp(3rem, 8vh, 5rem) clamp(0.8rem, 3vw, 2.5rem);
  background: rgba(6, 6, 8, 0.95);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 1.2rem; min-width: 0; }
.lightbox__figure img {
  max-height: 76svh;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.lightbox__figure figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.lightbox__close:hover { background: var(--brass); border-color: var(--brass); color: #0b0b0d; }
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lightbox__nav:hover { background: var(--brass); border-color: var(--brass); color: #0b0b0d; }
.lightbox__nav--prev { rotate: 180deg; }

/* ============ OMDÖMEN ======================================= */

.ratings__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.ratings__score { display: grid; justify-items: center; gap: 0.6rem; }
.ratings__num {
  font-size: clamp(3rem, 6vw, 4.4rem);
  font-weight: 200;
  line-height: 1;
  color: var(--brass);
}
.ratings__stars { display: flex; gap: 0.25rem; color: var(--brass); }
.ratings__stars .ico { fill: currentColor; stroke: none; width: 1rem; height: 1rem; }
.ratings__of {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ratings__bars { display: grid; gap: 0.7rem; }
.ratings__bars li {
  display: grid;
  grid-template-columns: 6rem 1fr 3rem;
  gap: 1rem;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ratings__bars .bar { display: block; height: 3px; background: rgba(255, 255, 255, 0.08); }
.ratings__bars .bar i { display: block; height: 100%; background: var(--brass); }
@media (max-width: 720px) {
  .ratings__summary { grid-template-columns: 1fr; }
  .ratings__bars li { grid-template-columns: 5rem 1fr 2.6rem; }
}

/* Citaten ligger i samma cell och tonas mot varandra; märket och
   kontrollerna har egna rader så höjden inte hoppar mellan omdömen. */
.quotes {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.quotes__mark {
  grid-row: 1;
  width: 2.6rem; height: 2.6rem;
  margin-bottom: 2rem;
  color: var(--brass);
  opacity: 0.55;
}
.quote {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease), visibility 0.6s;
}
.quotes__controls { grid-row: 3; }
.quote.is-active { opacity: 1; visibility: visible; translate: 0 0; }
.quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--text);
}
.quote footer { margin-top: 1.8rem; display: grid; gap: 0.3rem; }
.quote footer strong {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.quote footer span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.6rem;
}
.quotes__arrow {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.quotes__arrow:hover { background: var(--brass); border-color: var(--brass); color: #0b0b0d; }
.quotes__arrow:first-child { rotate: 180deg; }
.quotes__dots { display: flex; gap: 0.6rem; }
.quotes__dots button {
  width: 26px; height: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.35s var(--ease), width 0.35s var(--ease);
}
.quotes__dots button.is-active { background: var(--brass); width: 40px; }

.reviewgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.review {
  display: grid;
  align-content: start;
  gap: 1.2rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.review__stars { display: flex; gap: 0.2rem; color: var(--brass); }
.review__stars .ico { fill: currentColor; stroke: none; width: 0.9rem; height: 0.9rem; }
.review__stars .is-off { color: rgba(255, 255, 255, 0.16); }
.review p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.review footer { display: grid; gap: 0.25rem; }
.review footer strong {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.review footer span { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--brass); }
@media (max-width: 900px) { .reviewgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviewgrid { grid-template-columns: 1fr; } }

/* ============ FRÅGOR OCH PRISLISTA ========================== */

.faq__layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--brass);
  transition: rotate 0.35s var(--ease);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--brass-lt); }
.faq__answer {
  padding: 0 0 1.8rem;
  max-width: 62ch;
  color: var(--muted);
  animation: faqIn 0.4s var(--ease);
}
.faq__answer p { font-size: 0.92rem; }
.faq__answer a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }
@keyframes faqIn {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

.faq__card {
  position: sticky;
  top: 8rem;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.faq__cardtitle {
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.faq__card p { font-size: 0.88rem; color: var(--muted); }
.faq__contact { margin: 1.5rem 0; }
.faq__contact li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
}
.faq__contact .ico { color: var(--brass); }
@media (max-width: 900px) {
  .faq__layout { grid-template-columns: 1fr; }
  .faq__card { position: static; }
}

.pricelist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.pricelist__group h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--brass);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.pricelist__group h3 .ico { color: var(--brass); }
.pricelist__group li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.pricelist__name {
  display: grid;
  font-size: 0.92rem;
  color: var(--text);
}
.pricelist__name em {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pricelist__dots {
  flex: 1;
  height: 1px;
  margin-bottom: 0.25rem;
  background: repeating-linear-gradient(to right, var(--line) 0 3px, transparent 3px 7px);
}
.pricelist__price {
  font-size: 0.94rem;
  color: var(--brass);
  white-space: nowrap;
}
@media (max-width: 780px) { .pricelist { grid-template-columns: 1fr; } }

/* ============ JOURNALEN ===================================== */

.bloglayout {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.bloglist { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }

.post { display: grid; gap: 1.6rem; }
.post__figure {
  position: relative;
  display: block;
  overflow: hidden;
}
.post__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.92);
  transition: scale 1.2s var(--ease), filter 0.6s var(--ease);
}
.post__figure:hover img { scale: 1.04; filter: saturate(1) brightness(1); }
.post__cat {
  position: absolute;
  left: 0; top: 0;
  padding: 0.5rem 1.1rem;
  background: var(--brass);
  color: #0b0b0d;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.post__meta {
  margin-bottom: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.post__body h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.22;
}
.post__body h2 a:hover { color: var(--brass-lt); }
.post__body p { max-width: 64ch; color: var(--muted); font-size: 0.94rem; }
.post__body .tlink { margin-top: 1.2rem; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.pagination--center { justify-content: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.pagination__item {
  display: grid;
  place-items: center;
  min-width: 44px; height: 44px;
  padding-inline: 1rem;
  border: 1px solid var(--line);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.pagination__item:hover { color: var(--text); border-color: var(--line-strong); }
.pagination__item.is-active { background: var(--brass); border-color: var(--brass); color: #0b0b0d; }
.pagination__next { display: inline-flex; align-items: center; gap: 0.7rem; text-transform: uppercase; }

.sidebar { display: grid; gap: 1.5rem; position: sticky; top: 7.5rem; }
.widget {
  padding: clamp(1.4rem, 2.2vw, 1.8rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.widget__title {
  margin-bottom: 1.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.widget__search { position: relative; display: flex; }
.widget__search input {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 3rem 0.8rem 1rem;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.86rem;
}
.widget__search input:focus { outline: none; border-color: var(--brass); }
.widget__search button {
  position: absolute;
  right: 0; top: 0;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 100%;
  color: var(--brass);
}
.widget__list li + li { border-top: 1px solid var(--line); }
.widget__list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  font-size: 0.84rem;
  color: var(--muted);
}
.widget__list a span { color: var(--brass); font-size: 0.72rem; }
.widget__list a:hover { color: var(--brass-lt); }
.widget__list--plain a { justify-content: flex-start; }
.widget__posts li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.widget__posts a { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center; }
.widget__posts img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.widget__posts span { display: grid; gap: 0.3rem; }
.widget__posts strong {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}
.widget__posts em {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.widget__posts a:hover strong { color: var(--brass-lt); }
.widget--cta { background: var(--panel-2); border-color: rgba(194, 146, 79, 0.35); }
.widget--cta p { font-size: 0.86rem; color: var(--muted); margin-bottom: 1.4rem; }

@media (max-width: 960px) {
  .bloglayout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .sidebar { grid-template-columns: 1fr; } }

.cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.card {
  display: grid;
  align-content: start;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.5s var(--ease);
}
.card:hover { border-color: rgba(194, 146, 79, 0.4); }
.card__figure { position: relative; display: block; overflow: hidden; }
.card__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.9);
  transition: scale 1.2s var(--ease), filter 0.6s var(--ease);
}
.card:hover .card__figure img { scale: 1.05; filter: saturate(1) brightness(1); }
.card__body { padding: clamp(1.3rem, 2.2vw, 1.8rem); }
.card__body h2 {
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card__body h2 a:hover { color: var(--brass-lt); }
.card__body p { margin-top: 0.9rem; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 900px) { .cardgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cardgrid { grid-template-columns: 1fr; } }

/* ---------- Ett inlägg --------------------------------------- */

.article {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.article__lead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--text);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.article__tags,
.article__share { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.article__tags span,
.article__share span {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.article__tags a {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.article__tags a:hover { color: #0b0b0d; background: var(--brass); border-color: var(--brass); }
.article__share a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.article__share a:hover { color: #0b0b0d; background: var(--brass); border-color: var(--brass); }

.authorcard {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: center;
  margin-top: 3rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.authorcard img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.authorcard__role {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.authorcard h2 {
  margin-bottom: 0.8rem;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.authorcard p { font-size: 0.88rem; color: var(--muted); }
.authorcard .tlink { margin-top: 1rem; }

@media (max-width: 960px) { .article { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .authorcard { grid-template-columns: 1fr; } .authorcard img { max-width: 10rem; } }

/* ============ BUTIKEN ======================================= */

.shopgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.shopgrid--4 { grid-template-columns: repeat(4, 1fr); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.product {
  display: grid;
  align-content: start;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.5s var(--ease);
}
.product:hover { border-color: rgba(194, 146, 79, 0.4); }
.product[hidden] { display: none; }
.product__figure {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-2);
}
.product__figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: scale 1.1s var(--ease);
}
.product:hover .product__figure img { scale: 1.05; }
.product__flag {
  position: absolute;
  left: 0; top: 0;
  padding: 0.45rem 1rem;
  background: var(--brass);
  color: #0b0b0d;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.product__body { display: grid; gap: 0.6rem; padding: clamp(1.2rem, 2vw, 1.6rem); }
.product__cat {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}
.product__body h2 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product__body h2 a:hover { color: var(--brass-lt); }
.product__desc { margin: 0; font-size: 0.84rem; color: var(--muted); }
.product__price { margin: 0.3rem 0 0.9rem; font-size: 1.05rem; color: var(--text); }
.product .btn.is-done { border-color: var(--brass); color: var(--brass); }

/* Presentkortet är ritat, inte fotograferat — det finns inget
   trovärdigt foto av ett presentkort som inte ser ut som en attrapp. */
.voucher {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  aspect-ratio: 1;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(194, 146, 79, 0.05) 0 8px, transparent 8px 16px),
    var(--ink-2);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.voucher__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 0.8rem;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-size: 1rem;
  line-height: 1;
}
.voucher__mark i { font-family: var(--font-serif); font-style: italic; }
.voucher__label {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}
.voucher__value {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 200;
  color: var(--brass);
}
.voucher__fine { margin: 0; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); }

.shopnote {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.shopnote p {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.shopnote .ico { color: var(--brass); width: 0.9em; height: 0.9em; }

@media (max-width: 1024px) { .shopgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .shopgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .shopgrid, .shopgrid--4 { grid-template-columns: 1fr; } }

/* ---------- Produktsidan ------------------------------------- */

.crumbs--light { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.productpage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.productgallery__main { margin: 0 0 1rem; overflow: hidden; background: var(--panel); }
.productgallery__main img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.productgallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.productgallery__thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.4s var(--ease);
}
.productgallery__thumbs a:hover img { opacity: 1; }

.productinfo__price {
  margin: 1.4rem 0 1rem;
  font-size: 1.9rem;
  font-weight: 200;
  color: var(--brass);
}
.productinfo__price span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.productinfo__rating {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.productinfo__text { margin-top: 1.6rem; color: var(--muted); }
.productinfo__facts { margin: 1.6rem 0 2rem; }
.productinfo__facts li,
.productinfo__ship li {
  display: flex;
  gap: 0.8rem;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.productinfo__facts .ico,
.productinfo__ship .ico { color: var(--brass); width: 0.85em; height: 0.85em; margin-top: 0.4rem; }
.productinfo__buy { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.productinfo__ship { padding-top: 1.6rem; border-top: 1px solid var(--line); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
}
.qty button {
  display: grid;
  place-items: center;
  width: 2.9rem;
  align-self: stretch;
  color: var(--muted);
  font-size: 1rem;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.qty button:hover { color: #0b0b0d; background: var(--brass); }
.qty input,
.qty span {
  width: 3rem;
  padding: 0.9rem 0;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: center;
  font-size: 0.92rem;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty span { display: block; }

.producttabs { margin-top: clamp(3rem, 5vw, 4.5rem); }
.producttabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.producttabs__btn {
  padding: 1rem 1.6rem;
  border: 1px solid transparent;
  border-bottom: 0;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease), background 0.35s var(--ease);
}
.producttabs__btn:hover { color: var(--text); }
.producttabs__btn.is-active {
  background: var(--panel);
  border-color: var(--line);
  color: var(--brass);
}
.producttabs__panel { padding-top: 2rem; }
.producttabs__panel[hidden] { display: none; }

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

/* ---------- Varukorg ----------------------------------------- */

.cart {
  display: grid;
  grid-template-columns: 1fr 21rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.cart[hidden] { display: none; }
.cart__table { width: 100%; border-collapse: collapse; }
.cart__table thead th {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.cart__table thead th:nth-child(3) { text-align: right; }
.cart__table td { padding: 1.4rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart__product { display: flex; align-items: center; gap: 1.2rem; }
.cart__thumb {
  flex: none;
  width: 4.5rem; height: 4.5rem;
  background: var(--ink-2) center / cover no-repeat;
  border: 1px solid var(--line);
}
.cart__product strong { display: block; font-size: 0.94rem; font-weight: 400; }
.cart__product em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart__sum { text-align: right; font-size: 1rem; color: var(--brass); white-space: nowrap; }
.cart__remove { text-align: right; width: 3rem; }
.cart__remove button { color: var(--muted); transition: color 0.3s var(--ease); }
.cart__remove button:hover { color: var(--brass-lt); }
.cart__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
}
.cart__left { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--brass); }

.cart__summary,
.checkout__summary {
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.cart__summarytitle {
  margin-bottom: 1.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.sumlist { margin-bottom: 1.2rem; }
.sumlist li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.sumlist__total {
  padding-top: 1rem;
  border-bottom: 0;
  font-size: 1.05rem;
  color: var(--text);
}
.sumlist__total span:last-child { color: var(--brass); }
.cart__vat { font-size: 0.74rem; color: var(--muted); margin-bottom: 1.4rem; }
.cart__perks { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.cart__perks li {
  display: flex;
  gap: 0.7rem;
  padding: 0.35rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.cart__perks .ico { color: var(--brass); width: 0.85em; height: 0.85em; margin-top: 0.35rem; }

.cart__empty {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--panel);
}
.cart__empty[hidden] { display: none; }
.cart__empty .ico { color: var(--brass); }
.cart__empty .btn { margin-top: 0.8rem; }

@media (max-width: 900px) {
  .cart { grid-template-columns: 1fr; }
  .cart__table thead { display: none; }
  .cart__table tr { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
  .cart__table td { border: 0; padding: 0; }
  .cart__product { grid-column: 1 / -1; }
  .cart__sum { text-align: left; }
  .cart__remove { text-align: right; }
}

/* ---------- Kassa -------------------------------------------- */

.checkout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.checkout__block { margin: 0 0 2.5rem; padding: 0; border: 0; }
.checkout__legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.checkout__legend span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0;
  color: var(--brass);
}
.choicelist { display: grid; gap: 0.8rem; margin-top: 1.6rem; }
.choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.choice:hover { border-color: var(--line-strong); }
.choice input {
  appearance: none;
  width: 1.05rem; height: 1.05rem;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.choice input::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--brass);
  scale: 0;
  transition: scale 0.25s var(--ease);
}
.choice input:checked { border-color: var(--brass); }
.choice input:checked::after { scale: 1; }
.choice:has(input:checked) { border-color: var(--brass); background: var(--brass-dim); }
.choice__body { display: grid; gap: 0.2rem; flex: 1; }
.choice__body strong { font-size: 0.9rem; font-weight: 400; }
.choice__body em {
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.choice__price { font-size: 0.9rem; color: var(--brass); }
.checkout__terms { margin: 1.8rem 0; }
.checkout__items { margin-bottom: 1.4rem; }
.checkout__items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}
.checkout__items em { font-style: normal; color: var(--brass); }
.checkout__empty a { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }

/* ---------- Mitt konto --------------------------------------- */

.account { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.account__forms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.account__card {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--panel);
  border: 1px solid var(--line);
}
.account__title {
  margin-bottom: 1.6rem;
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.account__intro { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.6rem; }
.account__forgot { margin: 0; font-size: 0.8rem; text-align: center; }
.account__forgot a { color: var(--brass); }
.account__list li {
  display: grid;
  grid-template-columns: 10rem 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.account__when,
.account__what { display: grid; gap: 0.25rem; }
.account__list strong { font-size: 0.9rem; font-weight: 400; }
.account__list em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.account__price { font-size: 0.94rem; color: var(--brass); white-space: nowrap; }
.account__status {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.account__status.is-coming { border-color: var(--brass); color: var(--brass); }
.account__note { margin-top: 1.4rem; font-size: 0.78rem; color: var(--muted); }
.account__preview .eyebrow { margin-bottom: 1.6rem; }
@media (max-width: 860px) {
  .account__forms { grid-template-columns: 1fr; }
  .account__list li { grid-template-columns: 1fr auto; row-gap: 0.6rem; }
  .account__what { grid-column: 1 / -1; }
}

/* ============ KONTAKT ======================================= */

.salonggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.salong {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 1px solid var(--brass);
}
.salong h2 {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.salong__address { font-size: 0.94rem; color: var(--text); }
.salong__facts { margin: 1.4rem 0; }
.salong__facts li {
  display: flex;
  gap: 0.8rem;
  padding: 0.45rem 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.salong__facts .ico { color: var(--brass); margin-top: 0.3rem; }
.salong__note {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
@media (max-width: 900px) { .salonggrid { grid-template-columns: 1fr; } }

.bookinglayout {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.booking__form { margin-top: 2.4rem; }
.booking__aside { display: grid; gap: 1.5rem; }
.booking__quick {
  padding: clamp(1.4rem, 2.2vw, 1.8rem);
  background: var(--panel-2);
  border: 1px solid rgba(194, 146, 79, 0.35);
}
.booking__quick h3 {
  margin-bottom: 0.7rem;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.booking__quick p { font-size: 0.86rem; color: var(--muted); margin-bottom: 1.2rem; }
@media (max-width: 900px) { .bookinglayout { grid-template-columns: 1fr; } }

.mapblock {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border: 1px solid var(--line);
}
.mapblock__canvas { background: var(--ink-2); }
.mapblock__canvas svg { width: 100%; height: 100%; min-height: 20rem; display: block; }
.mapblock__panel { padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--panel); }
.mapblock__list { margin: 1.8rem 0; }
.mapblock__list li {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.mapblock__list strong {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.mapblock__list span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 860px) { .mapblock { grid-template-columns: 1fr; } }

/* ============ 404 OCH KOMMER SNART ========================== */

.errorpage,
.soon {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - 92px);
  padding-block: clamp(4rem, 10vw, 8rem);
  background-size: cover;
  background-position: center;
}
.errorpage__veil,
.soon__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 8, 10, 0.95) 20%, rgba(8, 8, 10, 0.72) 100%),
    linear-gradient(to top, rgba(8, 8, 10, 0.95), rgba(8, 8, 10, 0.55));
}
.errorpage__inner,
.soon__inner { position: relative; }
.errorpage__code {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 12vw, 9rem);
  font-style: italic;
  line-height: 0.9;
  color: var(--brass);
  opacity: 0.32;
  margin-bottom: -0.4em;
}
.errorpage .lede { margin-top: 1.6rem; }
.errorpage__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.errorpage__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.errorpage__links a {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.errorpage__links a:hover { color: var(--brass-lt); }

.soon .lede { margin-top: 1.6rem; }
.soon__count {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2.8rem 0;
  padding: 1.8rem 0;
  border-block: 1px solid var(--line);
}
.soon__count li { display: grid; gap: 0.4rem; }
.soon__num { font-size: 2.2rem; font-weight: 200; line-height: 1; color: var(--brass); }
.soon__label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.soon__form { display: flex; flex-wrap: wrap; gap: 0.8rem; max-width: 34rem; }
.soon__form input {
  flex: 1;
  min-width: 14rem;
  padding: 1rem 1.2rem;
  background: rgba(11, 11, 13, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.soon__form input:focus { outline: none; border-color: var(--brass); }
.soon__form .formnote { flex-basis: 100%; }
.soon__fine { margin-top: 1.2rem; font-size: 0.78rem; color: var(--muted); }
.soon__back { margin-top: 2.5rem; }