/* ===== tokens.css ===== */
/* =========================================================================
   Kickis Mössor — tokens
   Paletten är inte vald, den är avläst. Varje färg är samplad ur ett av
   Kickis egna foton: solen och K:et ur den vävda etiketten som sitter i varje
   mössa, blåtonerna ur hennes bild på Skutan i vinterljus.
   ========================================================================= */

:root {
  /* ---- Färg ------------------------------------------------------------
     Papper, inte creme. Produktfotonas bakgrund är nästan vit, så sidan är
     matchad mot dem: mössan hamnar direkt på arket utan synlig bildkant. */
  --paper:      #fcfbf8;
  --paper-sunk: #f4f1ea;   /* indraget: filterrad, formulärfält */
  --ink:        #141310;
  --ink-soft:   #57534b;   /* 7,4:1 mot papper */
  --rule:       #e2ded4;
  --rule-hard:  #c9c3b5;

  /* Ur den vävda etiketten */
  --sol:        #f88000;   /* solskivan. 2,5:1 mot papper — aldrig text på ljust */
  --sol-ink:    #a84703;   /* samma orange nedmörkad tills den bär text: 6,0:1 */
  --glod:       #f03000;   /* K:et */
  --vav:        #f4ece8;   /* etikettväven */

  /* Ur fotot på Skutan, blå timmen */
  --fjall:      #001030;
  --fjall-lift: #0a1c3e;
  --is:         #3070b0;
  --snow:       #f2f5f8;
  --snow-soft:  #b9c6d6;   /* 8,9:1 mot fjäll */

  --focus:      var(--sol);
  --sold-out:   #8a2a1c;

  /* ---- Typografi -------------------------------------------------------
     Tre röster. Groteskan är gränssnittet. Serifen är Kicki själv och
     används ingen annanstans. Monon räknar: priser, storlekar, lager. */
  --face-display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --face-voice:   'Faustina', Georgia, 'Times New Roman', serif;
  --face-meta:    'Sometype Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-hero: clamp(2.9rem, 7.6vw, 8rem);
  --t-xxl:  clamp(2.4rem, 6vw, 5rem);
  --t-xl:   clamp(1.9rem, 3.6vw, 3rem);
  --t-l:    clamp(1.4rem, 2.2vw, 1.9rem);
  --t-m:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-s:    0.9375rem;
  --t-xs:   0.8125rem;
  --t-xxs:  0.75rem;

  --lead-tight: 0.92;
  --lead-snug:  1.14;
  --lead-body:  1.62;
  --lead-voice: 1.72;

  --track-hero: -0.045em;
  --track-head: -0.022em;
  --track-meta: 0.08em;

  /* ---- Mått ------------------------------------------------------------
     Avsiktligt ojämn skala. 1 px mellan prover, 11 rem mellan avsnitt —
     det är skillnaden i avstånd som bygger hierarkin, inte ramar. */
  --s-1: 0.375rem;
  --s-2: 0.75rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3.25rem;
  --s-6: 5rem;
  --s-7: 7.5rem;
  --s-8: 11rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 34rem;          /* brödtext */
  --measure-voice: 30rem;    /* Kickis ord, kortare rad */
  --page: 96rem;

  --swatch-gap: 1px;
  --radius-label: 2px;       /* enda rundningen på sajten: den vävda etiketten */

  /* ---- Rörelse ---------------------------------------------------------
     En kurva. Snabbt ut, lång mjuk inbromsning — trikå som faller och
     lägger sig. Aldrig studs. */
  --settle: cubic-bezier(0.16, 1, 0.3, 1);
  --swift:  cubic-bezier(0.32, 0.08, 0.24, 1);
  --t-fast: 190ms;
  --t-mid:  380ms;
  --t-slow: 760ms;
  --t-overture: 1400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-mid: 1ms; --t-slow: 1ms; --t-overture: 1ms; }
}

/* ===== base.css ===== */
/* ========================= Grund ========================= */

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

/* [hidden] måste vinna över display från komponentklasser. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-display);
  font-size: var(--t-body);
  line-height: var(--lead-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: var(--lead-snug);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Fokus syns alltid, och syns lika bra på papper som på fjällblått. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
:where(.panel--night) :focus-visible { outline-color: var(--sol); }

::selection { background: var(--sol); color: var(--ink); }

/* ---- Återkommande textklasser ---- */
.meta {
  font-family: var(--face-meta);
  font-size: var(--t-xs);
  letter-spacing: var(--track-meta);
  font-variant-numeric: tabular-nums;
}
.kicker {
  font-family: var(--face-meta);
  font-size: var(--t-xxs);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.panel--night .kicker { color: var(--snow-soft); }

.voice {
  font-family: var(--face-voice);
  font-size: var(--t-m);
  line-height: var(--lead-voice);
  font-weight: 380;
  letter-spacing: 0;
}

.lede {
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}
.panel--night .lede { color: var(--snow-soft); }

/* ---- Hoppa till innehåll ---- */
.skip {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 200;
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--swift);
}
.skip:focus { transform: none; }

/* ---- Knappar ----
   Två sorter. En fylld som bär huvudhandlingen, en textlänk med streck.
   Ingen tredje, ingen skugga, ingen rundning. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background var(--t-fast) var(--swift), color var(--t-fast) var(--swift);
}
.btn:hover { background: var(--sol-ink); }
.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--rule-hard);
  color: var(--paper);
  cursor: not-allowed;
}
.panel--night .btn { background: var(--sol); color: var(--fjall); }
.panel--night .btn:hover { background: var(--snow); }

.btn--ghost {
  background: none;
  color: var(--ink);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ink);
}
.btn--ghost:hover { background: none; color: var(--sol-ink); border-color: var(--sol-ink); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
}
.link-arrow::after {
  content: '→';
  transition: transform var(--t-mid) var(--settle);
}
.link-arrow:hover::after { transform: translateX(0.3em); }

/* ---- Sidbredd ---- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 58rem); margin-inline: auto; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== layout.css ===== */
/* ========================= Skal ========================= */

.demo-banner {
  margin: 0;
  padding: 0.45rem var(--gutter);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

/* ---- Huvud ---- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.wordmark__text {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  white-space: nowrap;
}

.site-nav__list { display: flex; gap: var(--s-4); }
.site-nav__link {
  text-decoration: none;
  font-size: var(--t-s);
  font-weight: 500;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--swift);
}
.site-nav__link:hover { border-color: var(--rule-hard); }
.site-nav__link.is-current { border-color: var(--ink); }

.site-head__end { display: flex; align-items: center; gap: var(--s-3); }

.lang {
  font-family: var(--face-meta);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-hard);
  padding-bottom: 0.15em;
}
.lang:hover { color: var(--ink); border-color: var(--ink); }

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-s);
  font-weight: 600;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--ink);
}
.cart-button__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.3rem;
  background: var(--sol);
  color: var(--ink);
  font-size: var(--t-xxs);
  letter-spacing: 0;
}

.burger { display: none; padding: 0.5rem; margin-right: -0.5rem; }
.burger__bars { display: grid; gap: 5px; width: 22px; }
.burger__bars span { display: block; height: 2px; background: var(--ink); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  background: var(--fjall);
  color: var(--snow);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { display: grid; gap: var(--s-3); text-align: center; }
.mobile-menu__list a {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: var(--track-head);
  text-decoration: none;
}
.mobile-menu__list a[aria-current] { color: var(--sol); }
.mobile-menu__close {
  position: absolute;
  top: var(--s-3); right: var(--gutter);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--snow);
}

@media (max-width: 62rem) {
  .site-nav, .lang { display: none; }
  .burger { display: block; }
  .site-head__inner { gap: var(--s-3); min-height: 3.75rem; }
  .cart-button { font-size: var(--t-xs); }
}
@media (max-width: 26rem) {
  .wordmark__text { font-size: 0.95rem; }
  .demo-banner { font-size: 0.625rem; letter-spacing: 0; }
}

/* ---- Avsnitt ---- */
.section { padding-block: var(--s-7); }
.section--picked { padding-bottom: var(--s-6); }
.section--stockists { padding-block: var(--s-6); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.section__title {
  font-size: var(--t-xl);
  max-width: 20ch;
  margin-top: 0.35rem;
}
.section__title--small { font-size: var(--t-l); }

.page-head { padding-block: var(--s-6) var(--s-4); display: grid; gap: var(--s-3); justify-items: start; }
.page-title {
  font-size: var(--t-xxl);
  letter-spacing: var(--track-hero);
  line-height: var(--lead-tight);
  font-weight: 700;
}
.page-title--light { color: var(--snow); }

.panel--night { background: var(--fjall); color: var(--snow); }
.panel--night a { color: inherit; }

/* ---- Fot ---- */
.site-foot { padding-block: var(--s-6) var(--s-4); margin-top: var(--s-6); }
.site-foot__inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-5) var(--s-4);
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}
.site-foot__brand { display: grid; gap: var(--s-3); align-content: start; }
.site-foot__blurb { max-width: 22ch; color: var(--snow-soft); font-size: var(--t-s); }
.site-foot__nav h2 { margin-bottom: var(--s-2); }
.site-foot__nav ul, .site-foot__nav + div ul { display: grid; gap: 0.45rem; }
.site-foot__nav li, .site-foot div li { font-size: var(--t-s); color: var(--snow-soft); }
.site-foot a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-foot a:hover { border-color: currentColor; color: var(--snow); }
.site-foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: var(--s-6) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  color: var(--snow-soft);
}

@media (max-width: 56rem) {
  .site-foot__inner { grid-template-columns: repeat(2, 1fr); }
  .site-foot__brand { grid-column: 1 / -1; }
}

.live {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
}

/* ===== wall.css ===== */
/* =========================================================================
   Väggen
   Ett prov är inget kort. Fotot går ut i kanten, ingen ram, ingen skugga,
   ingen rundning — det enda som skiljer proven åt är en pixel papper.
   Samma primitiv i tre tätheter: hjälte, butik, liknande.
   ========================================================================= */

.wall {
  display: grid;
  gap: var(--swatch-gap);
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.wall--home    { grid-template-columns: repeat(4, 1fr); }
.wall--shop    { grid-template-columns: repeat(6, 1fr); }
.wall--related { grid-template-columns: repeat(4, 1fr); }

/* Antalet kolumner följer hur stort ett prov behöver vara för att mönstret
   ska gå att se — inte en generisk mobil/surfplatta/dator-indelning. */
@media (max-width: 88rem) { .wall--shop { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 70rem) {
  .wall--shop { grid-template-columns: repeat(4, 1fr); }
  .wall--home, .wall--related { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 52rem) {
  .wall--shop { grid-template-columns: repeat(3, 1fr); }
  .wall--home, .wall--related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
  .wall--shop { grid-template-columns: repeat(2, 1fr); }
}

.swatch { position: relative; background: var(--paper); }
.swatch__link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.swatch__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--photo-bg, var(--paper-sunk));
}
.swatch__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--t-slow) var(--settle);
}
.swatch__link:hover .swatch__frame img,
.swatch__link:focus-visible .swatch__frame img { transform: scale(1.035); }

.swatch--sold-out .swatch__frame img { opacity: 0.55; }

/* ---- Den vävda etiketten ----
   Sitter i nedre vänstra hörnet, samma plats som på den riktiga mössan.
   Cremen och den 1-pixelsrandiga väven är avlästa ur fotot av etiketten. */
.woven {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  max-width: calc(100% - 1.2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.55rem 0.34rem 0.4rem;
  background-color: var(--vav);
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.045) 0 1px, transparent 1px 2px);
  border-top: 2px solid rgb(0 0 0 / 0.07);
  border-radius: var(--radius-label);
  color: var(--ink);
  transform: translateY(0);
  transition: transform var(--t-mid) var(--settle), padding var(--t-mid) var(--settle);
}
.swatch__link:hover .woven,
.swatch__link:focus-visible .woven { transform: translateY(-3px); padding-right: 0.75rem; }

.woven .mark { flex: none; }
.woven__text { display: grid; min-width: 0; }
.woven__name {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.woven__meta { color: var(--ink-soft); font-size: 0.6875rem; letter-spacing: 0.04em; }
.swatch--sold-out .woven__meta { color: var(--sold-out); }

@media (max-width: 34rem) {
  .woven { left: 0.4rem; bottom: 0.4rem; gap: 0.35rem; padding: 0.28rem 0.4rem; }
  .woven .mark { width: 13px; height: 13px; }
}

/* =========================================================================
   Hjälten — väggen i rörelse
   ========================================================================= */

.hero {
  position: relative;
  height: clamp(30rem, 82svh, 54rem);
  overflow: hidden;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}

.hero__wall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--swatch-gap);
}
.hero__col { overflow: hidden; }
.hero__run {
  display: grid;
  gap: var(--swatch-gap);
  will-change: transform;
  animation: drift var(--speed, 60s) linear infinite;
  animation-direction: var(--rev, normal);
}
.hero__tile { display: block; background: var(--photo-bg, var(--paper-sunk)); aspect-ratio: 1; }
.hero__tile img { width: 100%; height: 100%; object-fit: cover; }

@keyframes drift { to { transform: translate3d(0, -50%, 0); } }

@media (max-width: 80rem) { .hero__wall { grid-template-columns: repeat(5, 1fr); } .hero__col:nth-child(n+6) { display: none; } }
@media (max-width: 52rem) { .hero__wall { grid-template-columns: repeat(3, 1fr); } .hero__col:nth-child(n+4) { display: none; } }

.hero__stage {
  position: relative;
  z-index: 2;
  height: 100%;
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding-block: var(--s-4);
}
.hero__card {
  background: var(--paper);
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  /* Minst 46rem, men aldrig smalare än rubriken: den bryts inte, och en rad
     som sticker ut ur kortet hamnar ovanpå mönstren. */
  justify-self: start;
  width: max-content;
  min-width: min(46rem, 100%);
  max-width: 100%;
  /* Kortet är urklippt ur väggen: papperet fortsätter ut åt vänster ända
     till fönsterkanten, så texten aldrig ligger ovanpå ett mönster. */
  box-shadow: -4rem 0 0 var(--paper), -8rem 0 0 var(--paper), -12rem 0 0 var(--paper), -16rem 0 0 var(--paper);
}
.hero__head {
  /* Krymper på de smalaste telefonerna, så att "från Undersåker" får plats. */
  font-size: min(var(--t-hero), 12vw);
  text-wrap: nowrap;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-hero);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.hero__line { display: block; }
.hero__line--2 { color: var(--sol-ink); }
.hero__lede {
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: var(--t-m);
  line-height: 1.5;
  margin-bottom: var(--s-4);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }

@media (max-width: 48rem) {
  .hero { height: clamp(28rem, 72svh, 40rem); }
  .hero__card { padding-right: var(--s-3); }
}

/* =========================================================================
   Filter
   ========================================================================= */

.shop-head { padding-block: var(--s-6) var(--s-4); display: grid; gap: var(--s-3); justify-items: start; }
.size-guide { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem var(--s-3); color: var(--ink-soft); }
/* Smalt bryts raden ojämnt; då hellre en storlek per rad. */
@media (max-width: 40rem) { .size-guide { flex-direction: column; } }

.filters {
  position: sticky;
  top: 4.25rem;
  z-index: 40;
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
}
.filters__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: 0.75rem;
}
.filter { border: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.filter__label { flex: none; }
.filter__row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.filter__row--colors { gap: 0.25rem; }

.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.chip__face {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--face-meta);
  font-size: var(--t-xxs);
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--rule-hard);
  background: var(--paper);
  transition: color var(--t-fast) var(--swift), border-color var(--t-fast) var(--swift), background var(--t-fast) var(--swift);
}
.chip:hover .chip__face { border-color: var(--ink); color: var(--ink); }
.chip input:checked + .chip__face { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + .chip__face { outline: 2px solid var(--focus); outline-offset: 2px; }

.chip__dot { width: 0.7rem; height: 0.7rem; background: var(--chip); flex: none; }

/* Färgfiltret är tolv val. På en telefon tar de halva skärmen i en klibbig
   rad, så där ligger de bakom en knapp tills man vill ha dem. */
.filter__toggle { display: none; align-items: center; gap: 0.4rem; color: var(--ink-soft); border-bottom: 1px solid var(--rule-hard); padding-bottom: 0.1em; }
.filter__toggle-mark { border: 4px solid transparent; border-top-color: currentColor; translate: 0 2px; transition: rotate var(--t-fast) var(--swift); }
.filter__toggle[aria-expanded='true'] .filter__toggle-mark { rotate: 180deg; translate: 0 -2px; }

.filters__result {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-soft);
}
.filters__clear {
  border-bottom: 1px solid var(--rule-hard);
  padding-bottom: 0.1em;
  color: var(--ink-soft);
}
.filters__clear:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 62rem) {
  .filters { top: 3.75rem; }
  .filters__inner { gap: var(--s-2) var(--s-3); padding-block: 0.6rem; }
  .filter { flex-wrap: wrap; }
  .filters__result { margin-left: 0; width: 100%; }
}
@media (max-width: 56rem) {
  .filter__toggle { display: inline-flex; }
  .filter--color .filter__row--colors { display: none; width: 100%; }
  .filter--color.is-open .filter__row--colors { display: flex; }
  .filters__inner { padding-block: 0.5rem; }
  .shop-head { padding-block: var(--s-4) var(--s-3); }
  .page-head { padding-block: var(--s-4) var(--s-3); }
}

.swatch[hidden] { display: none; }

.wall-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding-block: var(--s-7);
  color: var(--ink-soft);
}

/* ===== product.css ===== */
/* =========================================================================
   Produktsidan
   ========================================================================= */

.crumbs { padding-block: var(--s-3) 0; }
.link-arrow--back::after { content: none; }
.link-arrow--back::before { content: '←'; margin-right: 0.45em; transition: transform var(--t-mid) var(--settle); display: inline-block; }
.link-arrow--back:hover::before { transform: translateX(-0.3em); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  gap: var(--s-6);
  align-items: start;
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: var(--s-4) auto 0;
}

/* Fältet tonas till just det här fotots egen bakgrund. Då finns ingen
   bildkant att se, oavsett vilket underlag Kicki fotograferade på. */
.product__media {
  background: var(--photo-bg);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  aspect-ratio: 1;
  position: relative;
}
.product__photo {
  width: 100%;
  transform-origin: center 58%;
  transform: scale(var(--size-scale, 1));
  transition: transform var(--t-slow) var(--settle);
}
/* Fotokanten tonas ut i fältet. Flera av Kickis foton har en svag vinjett,
   så även med rätt fältfärg syns annars en rektangel. Sju procent mjuk kant
   på varje sida tar bort den utan att röra mössan. */
.product__photo img {
  width: 100%;
  height: auto;
  --feather: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
             linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: var(--feather);
  -webkit-mask-composite: source-in;
  mask-image: var(--feather);
  mask-composite: intersect;
}
.product__scale-hint {
  position: absolute;
  left: var(--s-3); bottom: var(--s-3);
  color: var(--ink-soft);
  mix-blend-mode: multiply;
  opacity: 0.72;
  font-size: 0.6875rem;
}

.product__panel { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
.product__head { display: grid; gap: var(--s-1); }
.product__name {
  font-size: var(--t-xxl);
  line-height: var(--lead-tight);
  letter-spacing: var(--track-hero);
  font-weight: 700;
}
.product__price {
  font-size: var(--t-l);
  letter-spacing: 0;
  color: var(--ink);
  display: inline-block;
}
.product__price.is-changing { animation: tick var(--t-mid) var(--settle); }
@keyframes tick {
  0%   { opacity: 0; transform: translateY(0.45em); }
  100% { opacity: 1; transform: none; }
}

.product__buy { display: grid; gap: var(--s-3); }

/* ---- Storlek som storlek ----
   Rutorna har faktiskt olika storlek. XS är mindre än M eftersom den är det. */
.sizes, .colorways { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sizes__legend, .colorways__legend { padding: 0; }
.sizes__row { display: flex; align-items: flex-end; gap: var(--s-2); }
.size { position: relative; display: grid; justify-items: center; gap: 0.4rem; cursor: pointer; }
.size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.size__box {
  width: calc(3.4rem * var(--scale));
  height: calc(3.4rem * var(--scale));
  border: 1px solid var(--rule-hard);
  background: var(--paper);
  transition: background var(--t-fast) var(--swift), border-color var(--t-fast) var(--swift);
}
.size__label { color: var(--ink-soft); }
.size:hover .size__box { border-color: var(--ink); }
.size input:checked + .size__box { background: var(--ink); border-color: var(--ink); }
.size input:checked ~ .size__label { color: var(--ink); font-weight: 600; }
.size input:focus-visible + .size__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.size--out { cursor: not-allowed; }
.size--out .size__box {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 6px);
}
.size--out .size__label { color: var(--rule-hard); }
.sizes .size-guide { flex-direction: column; }

/* ---- Färgval ----
   Rutor, inte cirklar. Allt på sajten är ett tygprov. */
.colorways__row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.colorway { position: relative; display: inline-flex; cursor: pointer; }
.colorway input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.colorway__chip {
  width: 2rem; height: 2rem;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  transition: outline-offset var(--t-fast) var(--swift);
  outline: 2px solid transparent;
  outline-offset: 0;
}
.colorway:hover .colorway__chip { outline-color: var(--rule-hard); outline-offset: 2px; }
.colorway input:checked + .colorway__chip { outline-color: var(--ink); outline-offset: 3px; }
.colorway input:focus-visible + .colorway__chip { outline-color: var(--focus); outline-offset: 3px; }
.colorway--out .colorway__chip { opacity: 0.3; cursor: not-allowed; }
.colorways__chosen { color: var(--ink-soft); }

.product__stock { color: var(--ink-soft); }
.product__stock.is-out, .product__stock.is-low { color: var(--sold-out); }
.product__soldout { color: var(--ink-soft); display: grid; gap: var(--s-2); justify-items: start; }
.product__add { justify-self: start; min-width: 14rem; justify-content: center; }
.product__add.is-added { background: var(--sol-ink); }

.facts { display: grid; gap: 0.5rem; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.facts dt { margin-bottom: 0.2rem; }
.facts dd { margin: 0; font-size: var(--t-s); color: var(--ink-soft); }
.facts__label { display: flex; align-items: center; gap: 0.5rem; }

@media (max-width: 62rem) {
  .product { grid-template-columns: 1fr; gap: var(--s-4); }
  .product__media { padding: var(--s-4); }
  .product__panel { padding-top: 0; }
}

.related { padding-top: var(--s-7); }

/* Kickis text om mönstret. Styckena hålls korta av radlängden, inte av typsnittet. */
.product__about { display: grid; gap: var(--s-2); margin-top: var(--s-4); max-width: var(--measure-voice); white-space: pre-line; }

/* ===== cart.css ===== */
/* =========================================================================
   Varukorg och kassa
   ========================================================================= */

.cart { position: fixed; inset: 0; z-index: 100; }
.cart[hidden] { display: none; }
.cart__scrim {
  position: absolute; inset: 0;
  background: rgb(20 19 16 / 0.42);
  opacity: 0;
  transition: opacity var(--t-mid) var(--swift);
}
.cart.is-open .cart__scrim { opacity: 1; }

.cart__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(28rem, 100%);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--settle);
}
.cart.is-open .cart__panel { transform: none; }

.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.cart__title { font-size: var(--t-l); }
.cart__close { font-size: 2rem; line-height: 1; padding: 0 0.25rem; }
.cart__body { overflow-y: auto; padding: var(--s-3) var(--s-4); }
.cart__foot { padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.cart__foot[hidden] { display: none; }
.cart__sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.cart__sum .meta { font-size: var(--t-m); letter-spacing: 0; }
.cart__ship { color: var(--ink-soft); }
.cart__checkout { justify-content: center; margin-top: var(--s-1); }

.cart-empty { display: grid; gap: var(--s-3); justify-items: start; color: var(--ink-soft); padding-block: var(--s-4); }

.cart-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__thumb { background: var(--photo-bg, var(--paper-sunk)); aspect-ratio: 1; }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-weight: 600; font-size: var(--t-s); line-height: 1.3; }
.cart-line__name a { text-decoration: none; }
.cart-line__name a:hover { text-decoration: underline; }
.cart-line__opts { color: var(--ink-soft); margin-top: 0.15rem; }
.cart-line__price { font-family: var(--face-meta); font-size: var(--t-xs); text-align: right; white-space: nowrap; }
.cart-line__qty { grid-column: 2; display: inline-flex; align-items: center; border: 1px solid var(--rule-hard); width: max-content; margin-top: 0.4rem; }
.cart-line__qty button { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font-size: var(--t-s); }
.cart-line__qty button:hover:not(:disabled) { background: var(--paper-sunk); }
.cart-line__qty button:disabled { color: var(--rule-hard); cursor: not-allowed; }
.cart-line__n { min-width: 2rem; text-align: center; font-family: var(--face-meta); font-size: var(--t-xs); }
.cart-line__remove {
  grid-column: 3; grid-row: 2;
  font-size: var(--t-xxs); font-family: var(--face-meta);
  color: var(--ink-soft); border-bottom: 1px solid var(--rule-hard);
  justify-self: end; margin-top: 0.75rem;
}
.cart-line__remove:hover { color: var(--sold-out); border-color: var(--sold-out); }

/* ---- Kassa ---- */
.checkout { width: min(100% - var(--gutter) * 2, 62rem); margin-inline: auto; padding-block: var(--s-5) var(--s-7); }
.checkout .page-title { margin-bottom: var(--s-3); }
.checkout__steps { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.checkout__step {
  font-family: var(--face-meta); font-size: var(--t-xxs); letter-spacing: 0.08em;
  color: var(--rule-hard); display: inline-flex; align-items: center; gap: 0.5rem;
}
.checkout__step.is-current { color: var(--ink); }
.checkout__step.is-done { color: var(--ink-soft); }
.checkout__step::before { content: ''; width: 0.6rem; height: 0.6rem; background: currentColor; }

.checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-6); align-items: start; }
.checkout__grid [data-pane] > div:first-child, .checkout__grid [data-checkout-lines] { max-width: 34rem; }
@media (max-width: 60rem) { .checkout__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.checkout__summary { background: var(--paper-sunk); padding: var(--s-3); display: grid; gap: var(--s-2); }
.checkout__summary h2 { font-size: var(--t-m); }
.checkout__row { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-s); }
.checkout__row--total { border-top: 1px solid var(--rule-hard); padding-top: var(--s-2); font-weight: 600; }

/* En upplysning, inte en varning: streckad ram och indraget papper, och ingen
   färgad vänsterkant som på ungefär varje AI-byggd notisruta. */
.pay-note {
  border: 1px dashed var(--rule-hard);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-3);
  background: var(--paper-sunk);
  font-size: var(--t-s);
  color: var(--ink-soft);
}

/* Kassan har sagt något: en vara tog slut, ett pris ändrades, betalningen
   avbröts. Samma ram som resten av kassans besked — inget rött larm. */
.checkout__notice {
  border: 1px solid var(--rule-hard);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  font-size: var(--t-s);
}
.checkout__notice ul { margin: var(--s-1) 0 0; padding-left: 1.1em; }
.checkout__notice li + li { margin-top: 0.25em; }

.checkout__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-3); }

.checkout-done { display: grid; gap: var(--s-3); justify-items: start; max-width: 44ch; padding-block: var(--s-5); }
.checkout-done__title { font-size: var(--t-xl); }

/* ---- Formulärfält ---- */
.form { display: grid; gap: var(--s-3); max-width: 34rem; }
.form--2col { grid-template-columns: 1fr 1fr; }
.form--2col .field--wide { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form--2col { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.35rem; }
.field__label { font-size: var(--t-s); font-weight: 600; display: flex; gap: 0.4rem; align-items: baseline; }
.field__req { color: var(--sol-ink); }
.field__opt { color: var(--ink-soft); font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule-hard);
  border-radius: 0;
  font-size: var(--t-s);
  transition: border-color var(--t-fast) var(--swift), background var(--t-fast) var(--swift);
}
.field input:focus, .field textarea:focus { background: var(--paper); border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 7rem; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--sold-out); }
.field__error { color: var(--sold-out); font-size: var(--t-xs); }
.field__error[hidden] { display: none; }

.form__errors {
  border: 1px solid var(--sold-out);
  padding: var(--s-2) var(--s-3);
  color: var(--sold-out);
  font-size: var(--t-s);
  font-weight: 600;
}
.form__errors[hidden] { display: none; }

.form-done { display: grid; gap: var(--s-3); justify-items: start; max-width: 44ch; }
.form-done[hidden] { display: none; }
.form-done__title { font-size: var(--t-xl); }
.form-done__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Kassan: kunduppgifter och fraktval, sedan Kickis betalningsbesked på kvittot. */
.checkout__form { display: grid; gap: var(--s-3); margin-top: var(--s-5); max-width: 36rem; }
.checkout__form[hidden] { display: none; }

.choices { display: grid; gap: var(--s-2); }
.choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-2);
  align-items: baseline;
  border: 1px solid var(--rule);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice__price { font-size: var(--t-s); white-space: nowrap; }

.checkout-done__pay {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  border: 1px solid var(--rule-hard);
  padding: var(--s-4);
  max-width: 40rem;
}
.checkout-done__pay[hidden] { display: none; }
.checkout-done__amount { font-size: var(--t-l); font-weight: 600; }
.checkout-done__payment { white-space: pre-line; }

/* ===== pages.css ===== */
/* ========================= Startsidans partier ========================= */

.story-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.story-teaser__media { position: relative; min-height: 24rem; }
.story-teaser__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.story-teaser__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-6) clamp(1.5rem, 5vw, var(--s-6));
}
.story-teaser__quote { max-width: 26ch; }
.story-teaser__quote p {
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.story-teaser__by { color: var(--snow-soft); }
@media (max-width: 60rem) {
  .story-teaser { grid-template-columns: 1fr; }
  .story-teaser__media { min-height: 16rem; }
}

.stockist-teaser { display: grid; justify-items: start; gap: var(--s-2); }
.stockist-teaser .section__title { max-width: 16ch; }
.stockist-teaser .link-arrow { margin-top: var(--s-2); }

/* ========================= Historien ========================= */

.story-hero { position: relative; }
.story-hero__media { position: relative; height: clamp(18rem, 46svh, 32rem); }
/* Toppen på Skutan ligger en femtedel ner i bilden. Centrerat beskärs den
   bort på breda skärmar, så beskärningen förankras högre upp. */
.story-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.story-hero__text { padding-block: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.story-hero__caption { color: var(--snow-soft); max-width: 46ch; }

/* Allt i brevet ligger på samma vänsterkant, och blocket är centrerat på
   sidan — annars hamnar en 30 rem bred text långt ut till vänster. */
.story {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding-block: var(--s-6);
  max-width: 36rem;
  margin-inline: auto;
}
.story__kicker { margin-bottom: var(--s-1); }
.story__body { display: grid; gap: var(--s-3); max-width: var(--measure-voice); }
.story__body p { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.story__signoff { margin-top: var(--s-2); color: var(--ink-soft); }
.story__signature {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 600; font-size: var(--t-m);
  margin-bottom: var(--s-3);
}
.story__note { max-width: var(--measure); }
.story__cta { margin-top: var(--s-3); }

/* ========================= Återförsäljare ========================= */

.regions { display: grid; gap: var(--s-6); padding-bottom: var(--s-6); }
.region__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-3);
}
.region__title { font-size: var(--t-l); }
.region__count { color: var(--ink-soft); }
.region__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-4) var(--s-4);
}
.stockist { display: grid; gap: 0.2rem; align-content: start; padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.stockist__name { font-size: var(--t-m); font-weight: 600; }
.stockist__place { color: var(--ink-soft); }
.stockist__address { font-size: var(--t-s); color: var(--ink-soft); margin-top: 0.35rem; line-height: 1.5; }
.stockist__links { display: grid; gap: 0.25rem; margin-top: 0.5rem; justify-items: start; }
.stockist__link {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-hard);
  padding-bottom: 0.1em;
  overflow-wrap: anywhere;
}
.stockist__link:hover { border-color: var(--ink); }

/* ========================= Kontakt ========================= */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  gap: var(--s-6);
  align-items: start;
  padding-bottom: var(--s-6);
}
@media (max-width: 58rem) { .contact { grid-template-columns: 1fr; gap: var(--s-5); } }
.contact__sub { font-size: var(--t-l); margin-bottom: var(--s-3); }
.contact__details { display: grid; gap: var(--s-5); }
.details { display: grid; gap: var(--s-3); }
.details dt { margin-bottom: 0.25rem; }
.details dd { margin: 0; font-size: var(--t-s); line-height: 1.55; }
.details a { text-decoration: none; border-bottom: 1px solid var(--rule-hard); }
.details a:hover { border-color: var(--ink); }
.contact__retail p { font-size: var(--t-s); color: var(--ink-soft); margin-bottom: var(--s-2); max-width: 34ch; }

/* ========================= Jämförelsen ========================= */

.compare { padding-bottom: var(--s-6); display: grid; gap: var(--s-3); }
.compare__scroll { overflow-x: auto; }
.compare__table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: var(--t-s); }
.compare__table th, .compare__table td { text-align: left; padding: 0.7rem var(--s-2); border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare__table thead th { font-family: var(--face-meta); font-size: var(--t-xxs); letter-spacing: 0.08em; color: var(--ink-soft); border-bottom-color: var(--ink); }
.compare__table tbody th { font-weight: 600; width: 32%; }
.compare__before { color: var(--ink-soft); width: 34%; }
.compare__after { color: var(--ink); width: 34%; }
.compare__after::before { content: '→ '; color: var(--sol-ink); }
.compare__note { color: var(--ink-soft); max-width: var(--measure); }

/* På smala skärmar blir varje rad ett eget stycke i stället för en tabell
   man måste dra i sidled. Jämförelsen är hela poängen med sidan — den får
   inte ligga utanför skärmkanten. */
@media (max-width: 52rem) {
  .compare__scroll { overflow-x: visible; }
  .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; width: auto; min-width: 0; }
  .compare__table thead { display: none; }
  .compare__table tr { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .compare__table tbody th { padding: 0 0 0.5rem; font-size: var(--t-m); border: 0; }
  .compare__table td { padding: 0.25rem 0; border: 0; }
  .compare__table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--face-meta);
    font-size: var(--t-xxs);
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
  }
  .compare__after { padding-top: 0.6rem !important; }
  .compare__after::before { color: var(--sol-ink); }
}

/* ========================= Platshållare =========================
   Märkt för vad den är. Ingen påhittad produkttext presenteras som fakta. */

.placeholder {
  border: 1px dashed var(--rule-hard);
  background: var(--paper-sunk);
  padding: var(--s-3);
  display: grid;
  gap: 0.4rem;
}
.placeholder__tag { color: var(--sol-ink); }
.placeholder__title { font-size: var(--t-m); }
.placeholder__body { font-size: var(--t-s); color: var(--ink-soft); max-width: 46ch; }
.panel--night .placeholder { border-color: rgb(255 255 255 / 0.28); background: var(--fjall-lift); }
.panel--night .placeholder__tag { color: var(--sol); }
.panel--night .placeholder__body { color: var(--snow-soft); }

/* ---- Villkor, integritetspolicy och ångersidan ---- */

.prose { max-width: var(--measure); padding-block: var(--s-3) var(--s-6); display: grid; gap: var(--s-4); }
.prose__section { display: grid; gap: var(--s-2); }
.prose__h { font-size: var(--t-m); }
.prose p { text-wrap: pretty; }
.prose__p + .prose__p { margin-top: var(--s-2); }
.prose__aside { color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: var(--s-3); }

/* En lucka i villkoren. Ska synas — inte smygas förbi. */
.fill {
  background: var(--sol);
  color: var(--ink);
  padding: 0.05em 0.35em;
  border-radius: var(--radius-label);
  font-family: var(--face-meta);
  font-size: 0.85em;
}

.field__hint { color: var(--ink-soft); }

/* Fältet som bara robotar fyller i. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== motion.css ===== */
/* =========================================================================
   Rörelse

   Fyra tillfällen, inte fler:
     1. Ouvertyren när startsidan öppnas
     2. Väggen som bromsar in när man scrollar förbi hjälten (styrs i app.js)
     3. Storlek som storlek på produktsidan (product.css)
     4. Etiketten som glider ut när man pekar på ett prov (wall.css)

   En kurva genom hela sajten: snabbt ut, lång mjuk inbromsning. Aldrig studs.
   ========================================================================= */

/* ---- 1. Ouvertyren ----
   Solens strålar ritas upp, ordmärket drar ihop sin spärrning, hjältekortet
   lägger sig på plats. Körs en gång per besök. */

.mark__rays line {
  stroke-dasharray: var(--ray-len) var(--ray-len);
}
.mark--draw .mark__rays line {
  stroke-dashoffset: var(--ray-len);
  animation: ray-draw 460ms var(--settle) forwards;
  animation-delay: calc(90ms + var(--i) * 26ms);
}
@keyframes ray-draw { to { stroke-dashoffset: 0; } }

.mark--draw .mark__disc {
  transform-origin: 24px 24px;
  animation: disc-settle 520ms var(--settle) both;
}
@keyframes disc-settle {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.mark--draw .mark__k { animation: k-in 420ms var(--settle) 340ms both; }
@keyframes k-in { from { opacity: 0; } to { opacity: 1; } }

.mark__k { fill: none; stroke: var(--glod); stroke-width: 3; stroke-linecap: square; }

/* Ordmärket i huvudet: spärrningen drar ihop sig en gång. */
.page-home .wordmark__text { animation: track-in 900ms var(--settle) 120ms both; }
@keyframes track-in {
  from { letter-spacing: 0.34em; opacity: 0; }
  to   { letter-spacing: -0.028em; opacity: 1; }
}

/* Hjältekortet och raderna lägger sig. */
.page-home .hero__card { animation: settle-up 860ms var(--settle) 220ms both; }
.page-home .hero__line { animation: settle-up 760ms var(--settle) both; animation-delay: calc(320ms + var(--i) * 90ms); }
.page-home .hero__lede,
.page-home .hero__actions { animation: settle-up 760ms var(--settle) 620ms both; }
@keyframes settle-up {
  from { opacity: 0; transform: translate3d(0, 1.4rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* Väggen faller in kolumn för kolumn bakom kortet. */
.page-home .hero__col { animation: wall-drop var(--t-overture) var(--settle) both; }
.page-home .hero__col:nth-child(1) { animation-delay: 0ms; }
.page-home .hero__col:nth-child(2) { animation-delay: 70ms; }
.page-home .hero__col:nth-child(3) { animation-delay: 140ms; }
.page-home .hero__col:nth-child(4) { animation-delay: 210ms; }
.page-home .hero__col:nth-child(5) { animation-delay: 280ms; }
.page-home .hero__col:nth-child(6) { animation-delay: 350ms; }
.page-home .hero__col:nth-child(7) { animation-delay: 420ms; }
@keyframes wall-drop {
  from { opacity: 0; transform: translate3d(0, -2.5rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- Prover som kommer in när de scrollas fram ----
   Ett svep per rad, inte en fade per element. */
.swatch { opacity: 1; }
.js .wall--shop .swatch,
.js .wall--home .swatch,
.js .wall--related .swatch { opacity: 0; }
.js .swatch.is-in {
  animation: swatch-in 620ms var(--settle) both;
  animation-delay: calc(var(--stagger, 0) * 45ms);
}
@keyframes swatch-in {
  from { opacity: 0; transform: translate3d(0, 1.1rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- Lugnt läge ----
   Allt som flyttar något stängs av. Kvar blir det som bär information:
   etiketten tonar fram, priset byts, fokus syns. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .hero__run { animation: none !important; transform: none !important; }
  .js .wall--shop .swatch,
  .js .wall--home .swatch,
  .js .wall--related .swatch { opacity: 1; }
  .swatch__link:hover .swatch__frame img,
  .swatch__link:focus-visible .swatch__frame img { transform: none; }
  .swatch__link:hover .woven,
  .swatch__link:focus-visible .woven { transform: none; }
  .product__photo { transition: none; }
  .link-arrow:hover::after { transform: none; }
}