/* =============================================================================
   NEW DAVID JONE FASHION, designsystem
   Godkand av Thomas 2026-09-18 mot docs/design-preview.html

   Tokens och @font-face inlinas i head av inc/design/class-assets.php eftersom
   de behovs fore forsta malningen. Den har filen ar allt ovrigt, och den ska
   cachas, inte inlinas.

   Ordningen ar medveten och foljer kaskaden:
     1. Astra-neutralisering
     2. Bas och typografi
     3. Layout och rytm
     4. Komponenter
     5. Rorelse och tillganglighet
   ============================================================================= */


/* 1. ASTRA-NEUTRALISERING
   ---------------------------------------------------------------------------
   Astra satter egen typografi, egna behallarbredder och egna knappstilar via
   sin dynamiska CSS. Vi tar over de delarna i stallet for att slass med dem pa
   varje enskild regel. Det som inte rors har ar Astras rutnat och responsivitet,
   som fungerar bra och inte ska byggas om.                                     */

.ast-container,
.ast-container-fluid,
.site-content .ast-container {
	max-width: var(--ndj-site-width);
	padding-left: var(--ndj-gutter);
	padding-right: var(--ndj-gutter);
}

.entry-content > * {
	max-width: none;
}

/* Astras standardknapp far inte lacka in i vart innehall. */
.entry-content .wp-block-button__link {
	border-radius: 0;
}


/* 2. BAS OCH TYPOGRAFI
   ---------------------------------------------------------------------------
   Radlangd ar viktigare an teckenstorlek. En brodtext bredare an cirka 66
   tecken lases samre och ser billigare ut, oavsett hur fin typsnittet ar.      */

body {
	font-family: var(--ndj-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ndj-text);
	background: var(--ndj-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--ndj-font-heading);
	font-weight: 700;
	color: var(--ndj-dark);
	line-height: 1.14;
}

h1, .ndj-d1 { font-size: clamp(40px, 5.4vw, 66px); letter-spacing: -.005em; }
h2, .ndj-d2 { font-size: clamp(28px, 3.6vw, 42px); }
h3, .ndj-d3 { font-size: clamp(21px, 2.4vw, 27px); }
h4          { font-size: 20px; }

.entry-content p,
.entry-content ul,
.entry-content ol {
	max-width: 66ch;
}

.entry-content > * + * { margin-top: 1.15em; }
.entry-content > * + h2 { margin-top: 2.4em; }
.entry-content > * + h3 { margin-top: 1.9em; }

.entry-content a {
	color: var(--ndj-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--ndj-gold);
	padding-bottom: 1px;
	transition: border-color 320ms var(--ndj-ease), color 320ms var(--ndj-ease);
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--ndj-gray);
	border-color: var(--ndj-dark);
}

/**
 * Etiketten. Liten spard versal ovanfor en rubrik.
 * Kostar ingenting och ar det enskilt billigaste greppet i hela systemet.
 */
.ndj-eyebrow {
	font-family: var(--ndj-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ndj-gray);
	margin-bottom: 14px;
}

.ndj-lead { font-size: 20px; line-height: 1.6; max-width: 62ch; }
.ndj-small { font-size: 14px; color: var(--ndj-gray); }


/* 3. LAYOUT OCH RYTM
   ---------------------------------------------------------------------------
   Rytmen ar det som gor en sida dyr. En sajt dar varje sektion har samma hojd
   laser platt. Darfor tre hojder, inte en.                                     */

.ndj-wrap { max-width: var(--ndj-site-width); margin: 0 auto; padding: 0 var(--ndj-gutter); }
.ndj-narrow { max-width: 780px; margin-inline: auto; }

.ndj-sec { padding: 96px 0; }
.ndj-sec--tight { padding: 62px 0; }
.ndj-sec--tall { padding: 132px 0; }
.ndj-sec--dark { background: var(--ndj-dark); color: rgba(255, 255, 255, .8); }
.ndj-sec--dark h1,
.ndj-sec--dark h2,
.ndj-sec--dark h3 { color: var(--ndj-white); }
.ndj-sec--light { background: var(--ndj-light); }

@media (max-width: 782px) {
	.ndj-sec { padding: 62px 0; }
	.ndj-sec--tall { padding: 78px 0; }
}


/* 4. KOMPONENTER
   --------------------------------------------------------------------------- */

/* 4a. Hero. Tar hela vyn, som hos LV och Armani. */
.ndj-hero {
	position: relative;
	min-height: 76vh;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--ndj-white);
	/* Reservbakgrund om ingen hero-bild ar satt. Den riktiga regeln, med
	   bilden och dampningen, star i avsnitt 6f. */
	background-color: #1b1c1e;
}

.ndj-hero__in { position: relative; z-index: 1; padding: 120px 30px 90px; max-width: 840px; }
.ndj-hero h1 { color: var(--ndj-white); }
.ndj-hero .ndj-eyebrow { color: var(--ndj-gold); }
.ndj-hero .ndj-lead { color: rgba(255, 255, 255, .78); margin: 22px auto 30px; }

/* Ligger en bild bakom behovs en dampning for att texten ska na 4,5:1. */
.ndj-hero--bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 13, .52);
}

/* 4b. Knappar. Minst 48px hoga. Guldet bar ALDRIG vit text, se DESIGN-DECISIONS. */
.ndj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 32px;
	font-family: var(--ndj-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 320ms var(--ndj-ease), color 320ms var(--ndj-ease), border-color 320ms var(--ndj-ease);
}

.ndj-btn--gold { background: var(--ndj-gold); color: var(--ndj-btn-text); }
.ndj-btn--gold:hover,
.ndj-btn--gold:focus-visible { background: var(--ndj-dark); color: var(--ndj-gold); }

.ndj-btn--line { background: transparent; color: var(--ndj-dark); border-color: var(--ndj-dark); }
.ndj-btn--line:hover,
.ndj-btn--line:focus-visible { background: var(--ndj-dark); color: var(--ndj-gold); }

/* 4c. Textlank som CTA. LV-greppet: lyx skriker inte pa knappar. */
.ndj-tlink {
	display: inline-block;
	font-family: var(--ndj-font-body);
	font-size: 15px;
	letter-spacing: .04em;
	color: var(--ndj-dark);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: color 320ms var(--ndj-ease), border-color 320ms var(--ndj-ease);
}

.ndj-tlink:hover,
.ndj-tlink:focus-visible { color: var(--ndj-gray); border-color: var(--ndj-gold); }

.ndj-hero .ndj-tlink,
.ndj-sec--dark .ndj-tlink { color: var(--ndj-white); border-color: rgba(255, 255, 255, .6); }
.ndj-hero .ndj-tlink:hover,
.ndj-sec--dark .ndj-tlink:hover { color: var(--ndj-gold); border-color: var(--ndj-gold); }

/* 4d. Bevisraden.
   Alternativet till konkurrentens fem identiska svarta lador. Harfina
   avgransare, inga lador, siffran bar. */
.ndj-proof {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	border-top: 1px solid var(--ndj-border);
	border-bottom: 1px solid var(--ndj-border);
}

.ndj-proof__i { padding: 34px 26px; border-right: 1px solid var(--ndj-border); }
.ndj-proof__i:last-child { border-right: 0; }

.ndj-proof strong {
	display: block;
	font-family: var(--ndj-font-heading);
	font-size: 27px;
	font-weight: 700;
	color: var(--ndj-dark);
	margin-bottom: 4px;
}

.ndj-proof span { font-size: 14px; color: var(--ndj-gray); line-height: 1.45; }

@media (max-width: 600px) {
	.ndj-proof__i { border-right: 0; border-bottom: 1px solid var(--ndj-border); }
	.ndj-proof__i:last-child { border-bottom: 0; }
}

/* 4e. Artikelkort, till bloggen och relaterat. */
.ndj-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px 34px; }
.ndj-card a { text-decoration: none; border: 0; }
.ndj-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; }
.ndj-card h3 { font-size: 21px; margin-bottom: 8px; }
.ndj-card h3 a { color: var(--ndj-dark); transition: color 320ms var(--ndj-ease); }
.ndj-card a:hover h3, .ndj-card h3 a:hover { color: var(--ndj-gold); }
.ndj-card p { font-size: 15px; color: var(--ndj-gray); max-width: none; }

/* 5. RORELSE OCH TILLGANGLIGHET
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ndj-dark);
	outline-offset: 3px;
}

.ndj-sec--dark :focus-visible,
.ndj-hero :focus-visible { outline-color: var(--ndj-gold); }

/* Hoppa till innehall. Syns bara vid tangentbord. */
.ndj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ndj-dark);
	color: var(--ndj-gold);
	padding: 12px 20px;
	font-size: 14px;
}

.ndj-skip:focus { left: 0; }

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


/* 6. HEADER, PANEL OCH LAYOUT
   ---------------------------------------------------------------------------
   🔴 FLYTTAD HIT 2026-09-18. Reglerna lag tidigare inlinade i <head> via
   wp_head. Det var fel, och felet var svart att se:

   wp_head skriver ut inline-stilen TIDIGT. Astras egen stilmall kos med
   wp_enqueue_style och skrivs ut SENARE i samma <head>. Vid samma specificitet
   vinner den som kommer sist. Alltsa vann Astra varje gang.

   Resultatet var synligt men obegripligt: hamburgaren blev en BLA KNAPP, for
   Astras button-regel tog over, och headerns text blev vit pa vitt eftersom
   layoutreglerna aldrig gallde.

   Den har filen beror pa astra-theme-css och laddas darfor efter den. Da
   behovs inga !important och inga uppskruvade selektorer.                     */

/* 6a. Slapp Astras behallare pa sidor som bygger sin egen layout. */
.ndj-full .ast-container,
.ndj-full .site-content > .ast-container{max-width:none;padding-left:0;padding-right:0}
/* #primary ar det Astra kallar content-area, och den bar
   .ast-plain-container.ast-no-sidebar #primary{margin-top:60px;margin-bottom:60px}
   Det var de 60 px vit remsa ovanfor hero. Jag nollstallde .site-main och
   .entry-content men missade behallaren ovanfor dem. */
/* SPECIFICITET, matt och inte gissad.
   Astras regel ar:
     .ast-plain-container.ast-no-sidebar #primary{margin-top:60px;margin-bottom:60px}
   Det ar en id plus tva klasser, alltsa (1,2,0).
   Mitt forsta forsok var `.ndj-full #primary`, alltsa (1,1,0), och forlorade.
   Regeln fanns i filen, men den vann aldrig. Renderad matning visade
   marginTop:60px kvar.
   Andra forsoket var `body.ndj-full #primary`. Ocksa fel, och felet var mitt
   eget resonemang: `body` ar ett ELEMENT, inte en klass. Den selektorn ar
   (1,1,1), och vid jamforelse gar id forst, sedan klasser, sedan element.
   1=1 pa id, sedan 1 mot 2 pa klasser. Astra vann igen. Renderad matning
   visade marginTop:60px kvar bada gangerna.
   Tredje forsoket matchar Astras EGEN behallarklass plus var egen:
   (1,2,1) mot (1,2,0). Klar vinst pa element-niva, ingen tie, inget
   !important, och det syns i selektorn vad som overstyrs. */
body.ndj-full.ast-plain-container #primary,
body.ndj-full.ast-separate-container #primary,
body.ndj-full.ast-narrow-container #primary,
body.ndj-full.ast-plain-container .content-area,
body.ndj-full.ast-separate-container .content-area,
.ndj-full .site-main,
.ndj-full .entry-content,
.ndj-full .ast-article-single{max-width:none;padding:0;margin:0}
.ndj-full .entry-content > *{max-width:none;margin-top:0}
.ndj-full .entry-header{display:none}
.ndj-full .site-content{padding-top:0}
.ndj-full .ast-plain-container.ast-no-sidebar .entry-content .alignfull{margin:0}

/* 6b. Headern. */
.ndj-head{position:relative;width:100%;z-index:90}
.ndj-head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  max-width:none;padding:22px 34px}

/* Astras button-regler far inte rora var trigger. */
.ndj-head__menu,
.ndj-panel__close{display:inline-flex;align-items:center;gap:11px;background:none;border:0;
  border-radius:0;box-shadow:none;padding:6px 2px;margin:0;cursor:pointer;color:inherit;
  font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.09em;text-transform:none;
  line-height:1;min-height:44px;-webkit-appearance:none;appearance:none}
.ndj-head__menu:hover,.ndj-panel__close:hover,
.ndj-head__menu:focus,.ndj-panel__close:focus{background:none;color:inherit;box-shadow:none}
.ndj-head__menu{justify-self:start}

.ndj-burger{display:block;width:18px;flex:0 0 18px}
.ndj-burger i{display:block;height:1px;background:currentColor;margin:5px 0;
  transition:transform 320ms var(--ndj-ease),opacity 320ms var(--ndj-ease)}
.ndj-head__menu:hover .ndj-burger i:first-child{transform:translateX(3px)}
.ndj-head__menu:hover .ndj-burger i:last-child{transform:translateX(-3px)}

.ndj-head__word{font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.09em;color:inherit}

/* 6c. Logotypen. Tva varianter i markupen, CSS visar ratt en. */
.ndj-head__mark{justify-self:center;display:flex;align-items:center;text-decoration:none;
  border:0;line-height:0;color:inherit}
.ndj-logo{display:none;width:auto;height:51px;max-width:none}
.ndj-head__ordmarke{font-family:var(--ndj-font-heading);font-size:20px;letter-spacing:.17em;
  text-transform:uppercase;white-space:nowrap;color:inherit}
.ndj-har-hero .ndj-logo--ljus{display:block}
body:not(.ndj-har-hero) .ndj-logo--mork{display:block;height:58px}

/* 6d. Hogersidan. */
.ndj-head__right{display:flex;align-items:center;gap:28px;justify-self:end}
.ndj-head__word--link{text-decoration:none;position:relative;padding-bottom:4px;
  color:inherit;border:0}
.ndj-head__word--link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform 320ms var(--ndj-ease)}
.ndj-head__word--link:hover::after,
.ndj-head__word--link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.ndj-head__wa{display:inline-flex;color:inherit;opacity:.8;border:0;
  transition:opacity 320ms var(--ndj-ease),transform 320ms var(--ndj-ease)}
.ndj-head__wa:hover{opacity:1;transform:translateY(-1px)}
/* Instagram och Facebook bredvid Book a Fitting. Tatare mellanrum an
   textlankarna sa att ikonerna laser som ett par. Pa mobil ligger de i panelen. */
.ndj-head__ikoner{display:flex;align-items:center;gap:18px;padding-left:28px;
  border-left:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.ndj-head__ikoner .ndj-head__wa{opacity:.72}
.ndj-head__ikoner .ndj-head__wa:hover,.ndj-head__ikoner .ndj-head__wa:focus-visible{opacity:1}

/* 6e. HEADERNS TVA LAGEN
   ---------------------------------------------------------------------------
   ANALYS av varfor forsta versionen kandes grov, och vad som ratades:

   1. Headern lag `absolute` och scrollade darmed BORT med sidan. Vid troskeln
      slog den om till `fixed` och kom TILLBAKA. Det ar inte en intoning, det
      ar ett ateruppdykande, och det upplevs som ett hopp hur mjuk fargen an ar.
      Rattat: headern ar ALLTID fixed. Da flyttar den sig aldrig, och det enda
      som andras ar farg och storlek.

   2. Binar troskel. Allt hande i en punkt. Rattat med scroll-driven animation
      dar den stods, sa att bakgrunden folier scrollpositionen kontinuerligt i
      stallet for att sla om.

   3. Allt rorde sig pa samma kurva och samma tid. Rattat: bakgrunden leder
      (0 till 180px) och storleken foljer strax efter (60 till 260px). Den
      forskjutningen ar hela skillnaden mellan "allt hander nu" och nagot som
      kanns komponerat.

   Stodet ar uppmatt, inte antaget: node _scripts/matt-stod.js.
   Chrome 153 har animation-timeline, animation-range och linear(). Webblasare
   utan stod faller tillbaka pa klassvaxlingen nedan, som ar samma design men
   i tva steg i stallet for kontinuerligt.                                      */

.ndj-har-hero .ndj-head{position:fixed;top:0;left:0;color:var(--ndj-white)}

/* --- Reserv: klassvaxling for webblasare utan scroll-timeline --- */
.ndj-har-hero .ndj-head{
  background-color:rgba(14,14,15,0);
  box-shadow:0 1px 0 rgba(255,255,255,0);
  transition:background-color 520ms cubic-bezier(.4,0,.2,1),
             box-shadow 520ms cubic-bezier(.4,0,.2,1)}
.ndj-har-hero .ndj-head .ndj-head__in{
  transition:padding 560ms cubic-bezier(.4,0,.2,1) 80ms}
.ndj-har-hero .ndj-head .ndj-logo{
  transition:height 560ms cubic-bezier(.4,0,.2,1) 80ms}

.ndj-har-hero .ndj-head.ar-fast{
  background-color:rgba(14,14,15,.95);
  box-shadow:0 1px 0 rgba(255,255,255,.07)}
.ndj-har-hero .ndj-head.ar-fast .ndj-head__in{padding-top:13px;padding-bottom:13px}
.ndj-har-hero .ndj-head.ar-fast .ndj-logo{height:42px}

/* --- Det sofistikerade laget: bunden till scrollpositionen, noll JS --- */
@supports (animation-timeline: scroll()){
  .ndj-har-hero .ndj-head{
    animation:ndj-head-bakgrund linear both;
    animation-timeline:scroll(root block);
    animation-range:0 180px;
    transition:none}

  .ndj-har-hero .ndj-head .ndj-head__in{
    animation:ndj-head-hojd linear both;
    animation-timeline:scroll(root block);
    animation-range:60px 260px;
    transition:none}

  .ndj-har-hero .ndj-head .ndj-logo{
    animation:ndj-logo-hojd linear both;
    animation-timeline:scroll(root block);
    animation-range:60px 260px;
    transition:none}

  /* Klassen far inte ta over nar animationen styr. */
  .ndj-har-hero .ndj-head.ar-fast{background-color:transparent;box-shadow:none}
}

@keyframes ndj-head-bakgrund{
  from{background-color:rgba(14,14,15,0);box-shadow:0 1px 0 rgba(255,255,255,0)}
  to{background-color:rgba(14,14,15,.95);box-shadow:0 1px 0 rgba(255,255,255,.07)}
}
@keyframes ndj-head-hojd{
  from{padding-top:22px;padding-bottom:22px}
  to{padding-top:13px;padding-bottom:13px}
}
@keyframes ndj-logo-hojd{
  from{height:51px}
  to{height:42px}
}

/* Pa ovriga sidor ligger headern kvar i flodet, mork text pa vitt. */
body:not(.ndj-har-hero) .ndj-head{color:var(--ndj-dark);border-bottom:1px solid var(--ndj-border)}

@media(max-width:860px){
  .ndj-head__in{padding:16px 20px;gap:12px}
  .ndj-head__right .ndj-head__word--link{display:none}
  .ndj-head__soc{display:none}
  .ndj-head__ikoner{padding-left:0;border-left:0}
  .ndj-logo{height:40px}
  .ndj-head__menu .ndj-head__word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* 6f. Hero. Bilden kommer som custom property fran pluginet.
   Tva lager ligger ovanpa bilden, och bada har ett skal:

   1. En toppgradient. Headern star ovanpa bilden, och om kunden byter till en
      ljus bild blir vit logotyp och vit text olasbar. Gradienten garanterar
      kontrast i de oversta 220 px oavsett vilken bild som valjs. Den ar
      dessutom osynlig pa en redan mork bild.
   2. En jamn dampning pa 52 procent, sa att H1 och lanken nar 4,5:1 aven pa
      bildens ljusaste parti.

   Ordningen spelar roll: forsta angivna gradienten ligger overst.              */
.ndj-hero{width:100%;max-width:100%;
  background-image:
    linear-gradient(to bottom,rgba(10,10,11,.55) 0,rgba(10,10,11,.22) 130px,rgba(10,10,11,0) 220px),
    linear-gradient(rgba(12,12,13,.52),rgba(12,12,13,.52)),
    var(--ndj-hero-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* 6g. Overlagget och panelen. */
.ndj-overlay{position:fixed;inset:0;background:rgba(10,10,10,.62);opacity:0;z-index:100;
  transition:opacity 320ms var(--ndj-ease)}
.ndj-overlay.ar-oppen{opacity:1}

.ndj-panel{position:fixed;top:0;left:0;height:100%;width:100%;max-width:440px;
  background:var(--ndj-white);color:var(--ndj-dark);z-index:101;overflow-y:auto;
  overscroll-behavior:contain;transform:translate3d(-100%,0,0);
  transition:transform 600ms var(--ndj-ease);padding:22px 34px 60px}
@media(min-width:1024px){.ndj-panel{width:33.3333%;min-width:330px;max-width:none}}
.ndj-panel.ar-oppen{transform:translate3d(0,0,0)}
.ndj-panel__close{color:var(--ndj-dark);margin-bottom:54px}
.ndj-x{position:relative;display:block;width:16px;height:16px;flex:0 0 16px}
.ndj-x::before,.ndj-x::after{content:"";position:absolute;top:7px;left:0;width:16px;height:1px;
  background:currentColor;transition:transform 320ms var(--ndj-ease)}
.ndj-x::before{transform:rotate(45deg)}
.ndj-x::after{transform:rotate(-45deg)}
.ndj-panel__close:hover .ndj-x::before{transform:rotate(135deg)}
.ndj-panel__close:hover .ndj-x::after{transform:rotate(45deg)}

.ndj-panel__nav ul{list-style:none;margin:0 0 46px;padding:0}
.ndj-panel__nav ul:last-child{margin-bottom:0}
.ndj-panel__nav a{display:block;padding:9px 0;text-decoration:none;border:0;
  color:var(--ndj-dark);font-family:var(--ndj-font-body);line-height:1.25;
  transition:color 320ms var(--ndj-ease),transform 320ms var(--ndj-ease)}
.ndj-grp--primar a{font-size:20px}
.ndj-grp--sekundar a{font-size:14px;color:var(--ndj-gray)}
.ndj-panel__nav a:hover,.ndj-panel__nav a:focus-visible{color:var(--ndj-gold);transform:translateX(5px)}
.ndj-panel__nav [aria-current=page]{text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1px;text-decoration-color:var(--ndj-gold)}

.ndj-panel li{opacity:0;transform:translateY(8px)}
.ndj-panel.ar-oppen li{opacity:1;transform:none;
  transition:opacity 420ms var(--ndj-ease),transform 420ms var(--ndj-ease);
  transition-delay:calc(var(--i) * 45ms + 140ms)}

/* Panelens egen rorelse ar sidans storsta. Ingen av de atta granskade
   lyxsajterna skyddade den med prefers-reduced-motion. Vi gor det. */
@media(prefers-reduced-motion:reduce){
  .ndj-panel,.ndj-overlay,.ndj-panel li{transition-duration:1ms !important;transition-delay:0ms !important}
}


/* 7. HERO, SKARPT LAGE
   ---------------------------------------------------------------------------
   Andringar mot forsta versionen, alla harledda ur referenssajterna:

   - Blocket ankras LAGRE i stallet for i exakt mitten. Bilden far andas ovanfor,
     och blicken landar dar innehallet borjar i stallet for mitt i motivet.
   - Negativ tracking pa rubriken. En serif pa 60px spretar utan den. Det ar en
     av de detaljer som skiljer satt text fran skriven text.
   - Radlangden begransas i tecken, inte med ett hardkodat <br>. Ett radbrott
     som fungerar pa 1440px bryter fel pa 1180px.
   - Entre. Innehallet stiger in i stallet for att bara finnas dar. Fyra
     element med 90ms mellanrum, alltsa en komposition och inte en animation.  */

.ndj-hero--lagt{place-items:end center}
.ndj-hero--lagt .ndj-hero__in{padding-bottom:clamp(90px,14vh,150px);padding-top:160px}

.ndj-hero h1{
  letter-spacing:-.018em;
  /* 26ch ger tva rader for en mening pa cirka 50 tecken. 18ch gav tre, och
     tre rader i ett hero laser som en text i stallet for som ett pastaende. */
  max-width:26ch;
  margin-inline:auto;
  text-wrap:balance}

.ndj-hero__kalla{
  font-family:var(--ndj-font-body);
  font-size:14px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.62);
  margin:18px auto 30px}

/* Entren. `--d` satts per element i markupen, sa ordningen ar redigerbar
   tillsammans med innehallet och inte gomd i CSS. */
.ndj-stig{opacity:0;transform:translateY(14px);
  animation:ndj-stig 900ms cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--d,0ms)}

@keyframes ndj-stig{to{opacity:1;transform:none}}

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


/* 8. PARALLAX
   ---------------------------------------------------------------------------
   Gen 2 anvander `background-attachment: fixed`. Det ar fel pa tva satt:
   det tvingar fram ommalning vid varje scroll-frame, och flera mobila
   webblasare ignorerar vardet helt, sa effekten syns inte dar den kostar mest.

   Har ligger bilden i ett eget lager som forskjuts med `translate3d` bundet
   till `animation-timeline: view()`. Alltsa elementets position i vyn styr
   forskjutningen. Det kors pa kompositorn, utan layout och utan ommalning,
   och utan en enda rad JavaScript.

   Bilden ar 120 procent hog och forskjuts 10 procent i vardera riktningen, sa
   att inga kanter nagonsin syns.

   Webblasare utan `animation-timeline` far en stillastaende bild. Det ar en
   fullt godtagbar sida, bara utan rorelsen. Ingen polyfill: den kostar 16,3 kB
   for en effekt som ar dekor.

   Stodet ar uppmatt, se node _scripts/matt-stod.js.                            */

.ndj-par{position:relative;overflow:hidden;display:grid;place-items:center;
  isolation:isolate;color:var(--ndj-white)}
.ndj-par--citat{min-height:min(80vh,680px)}
.ndj-par--bred{min-height:min(62vh,540px)}

/* Bilden ligger som <img> i en forskjuten behallare, inte som CSS-bakgrund.
   Skalet: en bakgrund kan inte ha srcset, sa telefonen hade hamtat samma fil
   som en 27-tumsskarm. Nu valjer webblasaren sjalv, och vi far alt-text och
   lazy loading pa kopet. */
.ndj-par__bild{position:absolute;left:0;right:0;top:-10%;height:120%;z-index:-2;
  will-change:transform}
.ndj-par__img{width:100%;height:100%;object-fit:cover;display:block}

/* Dampningen. Utan den klarar vit text inte 4,5:1 pa bildens ljusa partier. */
/* 58 procent racker pa en mork bild men inte pa butiksfasaden, som ar ljus och
   full av farg. Citatet ar sidans starkaste pastaende och far inte tavla med
   motivet. En radiell dampning morkar mitten dar texten star och slapper upp
   kanterna, sa bilden syns men texten vinner. */
.ndj-par::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(8,8,9,.82) 0,rgba(8,8,9,.62) 55%,rgba(8,8,9,.5) 100%)}
.ndj-par--bred::after{background:linear-gradient(90deg,rgba(10,10,11,.78) 0,rgba(10,10,11,.42) 62%,rgba(10,10,11,.3) 100%)}

.ndj-par__in{position:relative;z-index:1;max-width:900px;padding:60px 30px;text-align:center}
.ndj-par--bred .ndj-par__in{text-align:left;max-width:var(--ndj-site-width);width:100%;
  margin-inline:auto;padding-inline:var(--ndj-gutter)}
.ndj-par--bred h2{color:var(--ndj-white);max-width:20ch}
.ndj-par--bred .ndj-eyebrow{color:var(--ndj-gold)}

.ndj-par blockquote{margin:0}
.ndj-par blockquote p{font-family:var(--ndj-font-heading);font-weight:700;
  font-size:clamp(30px,4.4vw,54px);line-height:1.16;letter-spacing:-.018em;
  color:var(--ndj-white);max-width:22ch;margin:0 auto;text-wrap:balance}
.ndj-par blockquote cite{display:block;margin-top:26px;font-family:var(--ndj-font-body);
  font-style:normal;font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.62)}

@supports (animation-timeline: view()){
  .ndj-par__bild{
    animation:ndj-parallax linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%}
}

@keyframes ndj-parallax{
  from{transform:translate3d(0,-8%,0)}
  to{transform:translate3d(0,8%,0)}
}

@media(prefers-reduced-motion:reduce){
  .ndj-par__bild{animation:none;transform:none;top:0;height:100%}
}


/* 9. SEKTIONER FRAN MICHAEL ANDREWS-UPPLAGGET
   ---------------------------------------------------------------------------
   Ordningen ar deras, innehallet vart. Uppmatt med node _scripts/matt-struktur.js.

   Genomgaende: mer luft. Deras sida ar 13 810px och tal det. Var ar en tredjedel
   sa lang, och da maste luften gora jobbet i stallet for langden.              */

/* Sektionens egen topp. Etikett, rubrik, ingress, som ett block med eget andrum. */
.ndj-sec__topp{max-width:64ch;margin:0 auto 72px;text-align:center}
.ndj-sec__topp .ndj-lead{margin-inline:auto;margin-top:22px}
.ndj-sec__fot{margin-top:66px;text-align:center}

/* 9a. Konstruktionsnivaerna. Tre spalter, hårfina avgransare, inga lador. */
.ndj-nivaer{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;border-top:1px solid var(--ndj-border)}
.ndj-niva{padding:48px 40px 44px;border-right:1px solid var(--ndj-border);
  border-bottom:1px solid var(--ndj-border)}
.ndj-niva:last-child{border-right:0}
.ndj-niva__nr{font-family:var(--ndj-font-body);font-size:12px;letter-spacing:.24em;
  color:var(--ndj-gold);margin-bottom:22px}
.ndj-niva h3{font-size:25px;margin-bottom:16px}
.ndj-niva p{font-size:16px;line-height:1.7;max-width:none}
.ndj-niva__for{margin-top:20px;padding-top:20px;border-top:1px solid var(--ndj-border);
  font-size:14px;color:var(--ndj-gray)}

@media(max-width:860px){
  .ndj-niva{border-right:0;padding:36px 0 32px}
  .ndj-niva:last-child{border-bottom:0}
}

/* 9a2. Recensionerna. Samma sprak som konstruktionsnivaerna: harfina linjer,
   guld i detaljerna, inga lador och inga avatarer. Google far stjarnor och
   Tripadvisor bubblor, sa att det syns var omdomet ar skrivet. */
.ndj-omd__betygrad{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 56px;margin:-30px auto 64px}
.entry-content .ndj-omd__betygrad p,.ndj-omd__betyg{display:flex;align-items:center;gap:14px;margin:0;max-width:none;
  font-size:15px;color:var(--ndj-gray)}
.ndj-omd__betyg strong{font-family:var(--ndj-font-heading);font-size:24px;font-weight:700;color:var(--ndj-dark);margin-right:4px}
.ndj-omd__markor{display:inline-flex;gap:3px;color:var(--ndj-gold);line-height:0}

.ndj-omd__lista{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ndj-border)}
.ndj-omd__kort{display:flex;flex-direction:column;margin:0;padding:44px 38px 36px;
  border-right:1px solid var(--ndj-border);border-bottom:1px solid var(--ndj-border)}
.ndj-omd__kort:nth-child(3n){border-right:0}
.ndj-omd__kort blockquote{margin:22px 0 0;padding:0;border:0;background:none}
.entry-content .ndj-omd__kort blockquote p,.ndj-omd__kort blockquote p{margin:0;max-width:none;font-size:16px;line-height:1.75;
  color:var(--ndj-dark);font-style:normal}
.ndj-omd__kort figcaption{margin-top:auto;padding-top:26px}
.ndj-omd__kort figcaption strong{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ndj-dark)}
.ndj-omd__kort figcaption a{color:inherit;text-decoration:none;border:0}
.ndj-omd__kort figcaption a:hover{color:var(--ndj-gold)}
.ndj-omd__kort figcaption span{display:block;margin-top:6px;font-size:13px;color:var(--ndj-gray)}
.ndj-omd__lankar{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px}

/* Mobil: en rad att svepa i, i stallet for nio kort pa hojden. Nasta kort
   sticker fram i kanten sa att det syns att det finns fler. */
@media(max-width:860px){
  .ndj-omd__betygrad{flex-direction:column;align-items:center;margin:-36px auto 44px}
  .ndj-omd__lista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;scrollbar-width:none}
  .ndj-omd__lista::-webkit-scrollbar{display:none}
  .ndj-omd__kort{flex:0 0 84%;scroll-snap-align:start;padding:34px 26px 30px;border-bottom:0}
  .ndj-omd__kort:nth-child(3n){border-right:1px solid var(--ndj-border)}
  .ndj-omd__kort:last-child{border-right:0}
}

/* 9b. Processen. En numrerad sekvens, inte en punktlista. */
.ndj-steg{list-style:none;margin:0;padding:0;counter-reset:steg;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:54px 48px}
.ndj-steg li{position:relative;padding-left:64px}
.ndj-steg__nr{position:absolute;left:0;top:2px;font-family:var(--ndj-font-heading);
  font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--ndj-gold);
  padding-bottom:8px;border-bottom:1px solid var(--ndj-gold)}
.ndj-steg h3{font-size:21px;margin-bottom:10px}
.ndj-steg p{font-size:16px;line-height:1.7;color:var(--ndj-gray);max-width:none}

@media(max-width:600px){
  .ndj-steg{gap:40px}
  .ndj-steg li{padding-left:52px}
}

/* 9c. Tvaspalt med bild. Manniskorna och materialet far plats. */
.ndj-tva{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ndj-tva--omvand .ndj-tva__bild{order:2}
.ndj-tva__bild{margin:0}
.ndj-bild{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.ndj-tva__text h2{margin-bottom:22px}
.ndj-tva__text p{max-width:52ch}
.ndj-tva__text p + p{margin-top:18px}
.ndj-tva__text .ndj-lead{margin-bottom:22px}
.ndj-tva__text .ndj-tlink{margin-top:14px}

@media(max-width:860px){
  .ndj-tva{grid-template-columns:1fr;gap:36px}
  .ndj-tva--omvand .ndj-tva__bild{order:0}
}

/* 9d. Knappar bredvid varandra, med luft. */
.ndj-knappar{display:flex;gap:18px;flex-wrap:wrap;margin-top:38px}
.ndj-btn--ljus{color:var(--ndj-white);border-color:rgba(255,255,255,.45)}
.ndj-btn--ljus:hover,.ndj-btn--ljus:focus-visible{background:var(--ndj-white);
  color:var(--ndj-dark);border-color:var(--ndj-white)}

/* 9e. Mer luft overallt. Var sida ar kortare an referensens, sa luften far
   gora det langden gor dar. */
.ndj-sec--tall{padding:150px 0}
@media(max-width:782px){.ndj-sec--tall{padding:86px 0}}


/* 10. INNERSIDOR
   ---------------------------------------------------------------------------
   Sidor utan hero. De borjar med en textblock i stallet, och headern ligger da
   i flodet med mork text pa vitt.                                             */

/* 190px var raknat for en header OVANPA innehallet. Pa innersidorna ligger
   den i flodet och ar redan 100px, sa 190 gav ca 250px tomt fore etiketten
   (uppmatt 2026-09-25). 120 behaller luften utan att sidan ser tom ut. */
.ndj-sida__topp{padding:120px 0 96px;text-align:center}
.ndj-sida__topp h1{max-width:20ch;margin-inline:auto;letter-spacing:-.018em;text-wrap:balance}
.ndj-sida__topp .ndj-lead{margin:26px auto 0;color:var(--ndj-gray)}

@media(max-width:782px){.ndj-sida__topp{padding:72px 0 56px}}

/* Loptext i en sektion. Radlangden ar det som avgor lasbarhet, inte storleken. */
.ndj-text p{max-width:62ch}
.ndj-text p + p{margin-top:20px}
.ndj-text h2{margin-bottom:24px}
.ndj-text .ndj-eyebrow{margin-bottom:16px}
.ndj-sec--dark .ndj-text p{color:rgba(255,255,255,.82)}
.ndj-sec--dark .ndj-eyebrow{color:var(--ndj-gold)}

/* Aret som rubrik. En etikett med siffror bar mer an ett ord gor. */
.ndj-sec--dark .ndj-text h2{font-size:clamp(32px,4.2vw,48px)}


/* 11. MATDIAGRAM
   ---------------------------------------------------------------------------
   Diagrammet och listan ar samma sak, visad pa tva satt. Att peka pa en rad
   tander linjen, och tvartom.

   Tillganglighet: SVG:en ar aria-hidden och ren dekor. All information finns i
   listan som vanlig text. Raderna ar fokuserbara sa att kopplingen finns aven
   for den som anvander tangentbord, men ingen information gar forlorad utan
   den.                                                                         */

.ndj-matt{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:64px;align-items:start}

.ndj-matt__fig{position:sticky;top:120px}
.ndj-matt__fig svg{width:100%;height:auto;display:block}

.ndj-matt__kontur .ndj-fig{fill:none;stroke:#c9ccd1;stroke-width:1.6;
  stroke-linejoin:round}
.ndj-matt__kontur .ndj-fig--tunn{stroke-width:1}

/* Linjerna ligger dampade tills nagot pekas ut. Alla samtidigt i full styrka
   ar en spagettiteckning, inte en karta. */
.ndj-matt__linje{opacity:.62;transition:opacity 320ms var(--ndj-ease)}
.ndj-matt__linje line,
.ndj-matt__linje path{stroke:var(--ndj-gold);stroke-width:1.5;fill:none}
.ndj-matt__linje circle{fill:var(--ndj-gold)}
.ndj-matt__linje text{fill:var(--ndj-dark);font-family:var(--ndj-font-body);
  font-size:15px;font-weight:500}

.ndj-matt.ar-aktiv .ndj-matt__linje{opacity:.14}
.ndj-matt__linje.ar-tand,
.ndj-matt.ar-aktiv .ndj-matt__linje.ar-tand{opacity:1}
.ndj-matt__linje.ar-tand line,
.ndj-matt__linje.ar-tand path{stroke-width:2.5}
.ndj-matt__linje.ar-tand text{font-weight:700}

.ndj-matt__lista{list-style:none;margin:0;padding:0;counter-reset:matt}
.ndj-matt__lista li{counter-increment:matt;position:relative;padding:20px 0 20px 54px;
  border-bottom:1px solid var(--ndj-border);cursor:default;
  transition:background 320ms var(--ndj-ease)}
.ndj-matt__lista li:first-child{border-top:1px solid var(--ndj-border)}
.ndj-matt__lista li::before{content:counter(matt,decimal-leading-zero);
  position:absolute;left:0;top:22px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.2em;color:var(--ndj-gold)}
.ndj-matt__lista li:hover,
.ndj-matt__lista li:focus-visible{background:var(--ndj-light);outline:none}
.ndj-matt__lista li.ar-tand{background:var(--ndj-light)}
.ndj-matt__lista strong{display:block;font-family:var(--ndj-font-heading);font-size:19px;
  font-weight:700;color:var(--ndj-dark);margin-bottom:5px}
.ndj-matt__lista span{font-size:16px;line-height:1.65;color:var(--ndj-gray)}

@media(max-width:860px){
  .ndj-matt{grid-template-columns:1fr;gap:40px}
  .ndj-matt__fig{position:static;max-width:320px;margin-inline:auto}
}

/* Tat variant av stegen, till listor som inte ar en process. */
.ndj-steg--tat{gap:34px 44px}
.ndj-steg--tat li{padding-left:56px}


/* 12. FOTEN
   ---------------------------------------------------------------------------
   LJUS, pa Thomas instruktion. Sajten ska vara light, och en ljus fot later
   dessutom de morka sektionerna inne pa sidorna behalla sin tyngd. En sajt dar
   bade sektioner och fot ar morka har inga morka sektioner, bara en mork sajt.

   Hierarkin foljer samma princip som panelen och nivaerna: luft och
   teckenstorlek, harfina avgransare, inga lador.                               */

.ndj-fot{background:var(--ndj-light);border-top:1px solid var(--ndj-border);
  padding:96px 0 40px;color:var(--ndj-gray)}

/* Husblocket far mer bredd an ovriga. Adressen ar 58 tecken och brot pa tre
   rader nar kolumnen var 1.5fr. Med 2.1fr far den tva, vilket ar rimligt for
   en gatuadress. `align-items:start` hindrar att korta kolumner strackas ut. */
.ndj-fot__rutnat{display:grid;
  grid-template-columns:2.1fr repeat(4,1fr);gap:48px 44px;
  align-items:start;
  padding-bottom:52px;border-bottom:1px solid var(--ndj-border)}

.ndj-fot__logo{width:170px;height:auto;margin-bottom:22px;display:block}

.ndj-fot address{font-style:normal;font-size:15px;line-height:1.7;color:var(--ndj-gray);
  max-width:34ch}
.ndj-fot__oppet{margin-top:14px;font-size:15px;color:var(--ndj-dark)}

.ndj-fot__grupp h2{font-family:var(--ndj-font-body);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ndj-dark);margin-bottom:20px}
.ndj-fot__grupp ul{list-style:none;margin:0;padding:0}
.ndj-fot__grupp li{margin-bottom:11px}
.ndj-fot a{color:var(--ndj-gray);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:1px;transition:color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.ndj-fot a:hover,.ndj-fot a:focus-visible{color:var(--ndj-dark);border-color:var(--ndj-gold)}
.ndj-fot__grupp li a{font-size:15px}

.ndj-fot__sociala{margin-top:24px;display:flex;gap:18px}
.ndj-fot__sociala li{margin:0}

/* Tygraden. Det enda vi tog rakt av fran live-foten. Nio ord som sager vad
   huset arbetar med, och nio interna lankar till tygsidan. */
.ndj-fot__tyger{padding:44px 0;border-bottom:1px solid var(--ndj-border)}
.ndj-fot__tyger h2{font-family:var(--ndj-font-body);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ndj-dark);margin-bottom:20px}
.ndj-fot__tyger ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 0}
.ndj-fot__tyger li{position:relative;padding:0 20px 0 0;margin-right:20px}
.ndj-fot__tyger li::after{content:"";position:absolute;right:0;top:6px;bottom:6px;
  width:1px;background:var(--ndj-border)}
.ndj-fot__tyger li:last-child::after{display:none}
.ndj-fot__tyger a{font-family:var(--ndj-font-heading);font-size:19px;color:var(--ndj-dark)}
.ndj-fot__tyger a:hover{color:var(--ndj-gold);border-color:transparent}

.ndj-fot__botten{display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;padding-top:34px}

/* Badgen ar TripAdvisors, i original och ofargad. Deras villkor tillater inte
   att den fargas om, och den gronna ar darfor medvetet frammande i paletten.
   Diskret storlek och nere i foten ar ratt plats for nagon annans sigill. */
.ndj-fot__badge{display:inline-flex;align-items:center;gap:14px;border:0}
.ndj-fot__badge img{width:44px;height:auto;display:block;flex:0 0 44px}
/* Texten ska sta pa EN rad bredvid ikonen. Tva rader bredvid en 52px-ikon
   laser som en trasig bildtext, inte som ett sigill. */
.ndj-fot__badge span{font-size:14px;color:var(--ndj-gray);line-height:1.35;white-space:nowrap}
.ndj-fot__badge:hover span{color:var(--ndj-dark)}

.ndj-fot__legal{font-size:13px;color:var(--ndj-gray);margin:0}
.ndj-fot__legal a{margin-left:10px}

@media(max-width:1100px){
  .ndj-fot__rutnat{grid-template-columns:1fr 1fr 1fr;gap:48px 36px}
  .ndj-fot__hus{grid-column:1 / -1}
}
@media(max-width:700px){
  .ndj-fot{padding:64px 0 32px}
  .ndj-fot__rutnat{grid-template-columns:1fr 1fr;gap:40px 28px}
  .ndj-fot__tyger a{font-size:17px}
  .ndj-fot__botten{flex-direction:column;align-items:flex-start}
}


/* 13. SAMTALET
   ---------------------------------------------------------------------------
   Varje steg ar en lank, inte ett JavaScript-tillstand. Det syns i CSS:en pa
   att det inte finns nagot dolt: ett steg som inte ska visas an renderas inte
   alls av servern. Inga `display:none`, inga klasser som slas pa och av.

   Konsekvens: sidan fungerar identiskt med skript avstangt, och tillbakaknappen
   gor det man forvantar sig.                                                   */

.ndj-sam{max-width:var(--ndj-site-width);margin-inline:auto}
.ndj-sam__steg{padding:56px 0;border-top:1px solid var(--ndj-border)}
.ndj-sam__steg:first-child{border-top:0;padding-top:0}
.ndj-sam__steg h2{font-size:clamp(25px,3vw,34px);margin-bottom:10px}
.ndj-sam__ingress{font-size:16px;color:var(--ndj-gray);max-width:56ch;margin-bottom:30px}
.ndj-sam__steg h2 + .ndj-sam__val{margin-top:30px}

.ndj-sam__val{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--ndj-border);border:1px solid var(--ndj-border)}

/* Korten ar lankar, och de ska se ut som val, inte som knappar. Bakgrunden ar
   vit och avgransaren ar rutnatets egen bakgrund som lyser igenom i springan. */
.ndj-sam__kort{display:flex;flex-direction:column;gap:6px;padding:26px 24px;
  background:var(--ndj-white);text-decoration:none;border:0;
  transition:background 320ms var(--ndj-ease)}
.ndj-sam__kort:hover,.ndj-sam__kort:focus-visible{background:var(--ndj-light)}
.ndj-sam__kort.ar-vald{background:var(--ndj-dark)}

.ndj-sam__titel{font-family:var(--ndj-font-heading);font-size:20px;font-weight:700;
  color:var(--ndj-dark);line-height:1.2}
.ndj-sam__text{font-size:15px;line-height:1.55;color:var(--ndj-gray)}
.ndj-sam__kort.ar-vald .ndj-sam__titel{color:var(--ndj-white)}
.ndj-sam__kort.ar-vald .ndj-sam__text{color:rgba(255,255,255,.7)}

/* Riktningskorten har en bild, en rendering ur konfiguratorns lager. Den ar
   genomskinlig och star pa kortets egen botten, ljus eller mork. */
.ndj-sam__val--figur .ndj-sam__kort{padding-top:22px;align-items:center;text-align:center}
.ndj-sam__fig{width:100%;max-width:170px;height:auto;margin:0 auto 12px;display:block;
  transition:transform 420ms var(--ndj-ease)}
.ndj-sam__kort:hover .ndj-sam__fig{transform:translateY(-3px)}

/* Korten ar lankar, och Astras `.ast-single-post .entry-content a` (0,2,1)
   stryker annars under all text i dem. */
.entry-content a.ndj-sam__kort,
.ast-single-post .entry-content a.ndj-sam__kort{text-decoration:none;border-bottom:0}

/* Svaret. Det besokaren FAR, och det ar poangen med hela flodet. */
.ndj-sam__svar{padding:56px 0 0;border-top:1px solid var(--ndj-dark)}
.ndj-sam__svar h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:34px}
.ndj-sam__rader{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.ndj-sam__rad h3{font-size:19px;margin-bottom:9px}
.ndj-sam__rad p{font-size:16px;line-height:1.7;color:var(--ndj-gray);max-width:46ch}
.ndj-sam__vidare{margin-top:44px;display:flex;gap:30px;flex-wrap:wrap}
.ndj-sam__notis{margin-top:34px;font-size:13px;color:var(--ndj-gray);
  padding-top:18px;border-top:1px solid var(--ndj-border)}

@media(max-width:700px){
  .ndj-sam__steg{padding:38px 0}
  .ndj-sam__val{grid-template-columns:1fr}
  .ndj-sam__fig{max-width:140px}
}


/* 14. UTFALLBAR LISTA
   ---------------------------------------------------------------------------
   <details> och <summary>, alltsa native HTML. Noll JavaScript, fungerar utan
   skript, och webblasarens egen soknnig hittar innehallet aven nar det ar
   hopfallt.

   ✅ Baymard, 25 testrundor och over 4 400 deltagarsessioner: besokare missar
   upprepat karninnehall bakom horisontella FLIKAR, och pa mobil forsvinner
   flikarna vid scroll. 29 procent av sajterna anvander dem anda. Utfallbara
   avsnitt har inte det problemet, eftersom allt ligger i samma spalt.          */

.ndj-lista{border-top:1px solid var(--ndj-border)}
.ndj-lista details{border-bottom:1px solid var(--ndj-border)}
.ndj-lista summary{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 0;cursor:pointer;list-style:none;
  font-family:var(--ndj-font-heading);font-size:clamp(20px,2.4vw,26px);font-weight:700;
  color:var(--ndj-dark);transition:color 320ms var(--ndj-ease)}
.ndj-lista summary::-webkit-details-marker{display:none}
.ndj-lista summary:hover,.ndj-lista summary:focus-visible{color:var(--ndj-gold)}

/* Plustecknet, ritat med tva linjer i stallet for ett tecken, sa att det gar
   att rotera och sa att det aldrig paverkas av typsnittet. */
.ndj-lista summary::after{content:"";width:16px;height:16px;flex:0 0 16px;
  background:
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) center/16px 1.5px no-repeat,
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) center/1.5px 16px no-repeat;
  transition:transform 320ms var(--ndj-ease)}
.ndj-lista details[open] summary::after{transform:rotate(135deg)}

.ndj-lista details p{margin:0;padding:0 0 30px;max-width:66ch;font-size:16px;
  line-height:1.75;color:var(--ndj-gray)}

@media(prefers-reduced-motion:reduce){
  .ndj-lista summary::after{transition-duration:1ms}
}


/* 15. SAMTALET, DEN DIGITALA JOHNNY
   ---------------------------------------------------------------------------
   Hela samtalet utspelar sig har, overst i hero. Inte steg 1 av det, och inga
   lankar till andra sidor: sa fort den byter sida ar det inte ett samtal.

   Formen ar lanad fran bilindustrins segmentrader, och skalet ar inte mode
   utan att den ar EN RAD. Lyxspraket ar vagratt och aterhallsamt, och en rad
   som svavar kapar inte bilden under sig.

   ⚠️ Detta ar inte flikar. Baymards fynd galler innehall som GOMS bakom en
   flikrad. Har goms ingenting: en fraga i taget, och alla svaren pa den fragan
   syns samtidigt.

   EN RADIE FOR TVA FORMER. `border-radius:36px` ar halva hojden nar raden bara
   har en fraga och en knapprad, alltsa en piller-form, och laser som en mjuk
   rektangel nar den vaxt till framstegsmatare, chips, replik och tygkort. Vi
   slipper darfor byta radie mellan lagen, och slipper den lilla ryckning i
   hornen som ett sadant byte ger mitt i en overgang.                          */

.ndj-rad{position:relative;z-index:2;width:min(100% - 40px,1060px);
  margin:0 auto;padding:12px 14px;
  background:rgba(16,16,18,.82);
  border:1px solid rgba(255,255,255,.16);
  border-radius:36px;
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  text-align:left;
  transition:border-color 420ms var(--ndj-ease)}

/* backdrop-filter kostar ett eget kompositeringslager per frame. Har ar det
   vart det: raden ligger over en fotografisk bild och utan oskarpa blir texten
   olaslig pa ljusa partier. Vi begransar den till EN yta pa hela sajten.

   .66 mattes fram till gratt over en ljus bildyta, inte till morkt glas.
   Oskarpan drar dessutom upp ljuset under raden. .78 haller den mork nog att
   guldet och den vita texten far vara det ljusaste i raden. */
@supports (backdrop-filter: blur(10px)){
  .ndj-rad{background:rgba(14,14,16,.78);backdrop-filter:blur(18px) saturate(130%)}
}

.ndj-rad__scen{display:flex;flex-direction:column;gap:10px;
  opacity:1;transform:none;
  transition:opacity 180ms var(--ndj-ease),transform 180ms var(--ndj-ease)}

/* Scenbytet. Den gamla fragan gar UPP och ut, den nya kommer NEDIFRAN in, sa
   att rorelsen laser som att bladdra framat och inte som att nagot blinkade. */
.ndj-rad__scen.ar-ute{opacity:0;transform:translateY(-6px)}
.ndj-rad__scen.ar-in{opacity:0;transform:translateY(7px)}
.ndj-rad__fraga:focus{outline:none}

/* ------------------------------------------------------------ framstegen */
/* En prick per steg i den vag besokaren har valt. Vagens langd kommer ur
   flodet, sa en vag som far en fraga till behover inget gjort har.          */

.ndj-rad__matare{display:flex;align-items:center;gap:5px;padding:2px 6px 0}
.ndj-rad__matare i{width:22px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.18);
  transition:background 420ms var(--ndj-ease),width 420ms var(--ndj-ease)}
.ndj-rad__matare i.ar-klar{background:rgba(255,255,255,.44)}
.ndj-rad__matare i.ar-har{background:var(--ndj-gold);width:34px}

/* ---------------------------------------------------------------- minnet */
/* Besokarens egna svar, smatt. De ar KNAPPAR och backar till just den fragan,
   for annars ar enda vagen tillbaka ett steg i taget.                       */

.ndj-rad__minne{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 6px}

.ndj-chip,
.entry-content .ndj-chip,
.ast-single-post .entry-content .ndj-chip{
  border:1px solid rgba(255,255,255,.2);background:transparent;
  border-radius:999px;padding:3px 11px;
  font-family:var(--ndj-font-body);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  text-decoration:none;cursor:pointer;
  transition:color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.ndj-chip:hover,.ndj-chip:focus-visible{color:var(--ndj-white);
  border-color:rgba(255,255,255,.5)}

/* --------------------------------------------------------- replik + fråga */

/* Johnnys svar pa det som just sades. Guld, eftersom det ar den enda texten i
   raden som ar HANS och inte granssnittets. */
.ndj-rad__replik{margin:0;padding:0 6px;
  font-family:var(--ndj-font-body);font-size:13.5px;line-height:1.5;
  color:var(--ndj-gold)}

.ndj-rad__fraga{margin:0;padding:0 6px;font-family:var(--ndj-font-body);
  font-size:16px;letter-spacing:.01em;line-height:1.4;color:var(--ndj-white)}

/* ------------------------------------------------------------ alternativen */

.ndj-rad__val{display:flex;align-items:center;flex-wrap:wrap;gap:4px}

/* SPECIFICITET, och har gick jag fel TVA ganger innan jag matte.
   Det fanns namligen tva olika streck under alternativen, inte ett:

     1. `.entry-content a`  (0,2,0)  border-bottom:1px solid guld
        Den bojda guldbagen, eftersom segmenten har border-radius 999px.

     2. `.ast-single-post .entry-content a`  (0,2,1)  text-decoration:underline
        ASTRAS EGEN regel. Den ar (0,2,1) och slar (0,2,0) pa elementdelen.
        Jag pastod att understrykningen var borta tva ganger eftersom jag laste
        min egen regel i filen i stallet for vad webblasaren valde.
        `node _scripts/matt-rad.js` skriver ut bada, med kallfil och radnummer.

   Segmenten ar <button> nu och inte <a>, sa bagge traffar i teorin inte langre.
   Regeln star kvar anda: serverns steg 1 och en framtida lank i raden ska inte
   kunna ateruppliva felet, och kostnaden ar tre valjare. */
.ndj-rad__seg,
.entry-content .ndj-rad__seg,
.ast-single-post .entry-content .ndj-rad__seg{
  flex:0 0 auto;appearance:none;background:transparent;border:0;
  padding:11px 18px;border-radius:999px;cursor:pointer;
  font-family:var(--ndj-font-body);font-size:15px;line-height:1.2;
  color:rgba(255,255,255,.88);text-decoration:none;text-align:left;
  transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease)}

.ndj-rad__seg:hover,.ndj-rad__seg:focus-visible,
.entry-content .ndj-rad__seg:hover,
.entry-content .ndj-rad__seg:focus-visible,
.ast-single-post .entry-content .ndj-rad__seg:hover,
.ast-single-post .entry-content .ndj-rad__seg:focus-visible{
  background:rgba(255,255,255,.16);color:var(--ndj-white);text-decoration:none}

.ndj-rad__seg.ar-vald{background:var(--ndj-gold);color:var(--ndj-dark)}

/* Alternativ med bild, riktningskorten, ligger i 15b under fokusringen. De
   maste sta EFTER sparets och svepets regler for att vinna utan !important. */

/* ----------------------------------------------------------- tygpanelen */
/* Korten far ta plats. Det ar har besokaren VALJER nagot i stallet for att
   svara pa en fraga, och det ar den skillnaden som ska synas.              */

/* Kolumnerna har ett TAK. Med `1fr` strackte tva traffar ut sig over hela
   raden och tygproverna blev 480px hoga (matt 2026-09-25). Farre traffar ska
   ge farre kort, inte storre kort. */
.ndj-rad__tyger{display:grid;gap:10px;padding:2px 2px 0;
  grid-template-columns:repeat(auto-fit,minmax(200px,244px));justify-content:center}

.ndj-tyg{display:flex;flex-direction:column;gap:8px;
  padding:10px 10px 12px;border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1)}

/* Provet ar huvudbilden, inte en ikon. Det ar tyget som ska salja kortet,
   och det ar precis det researchen sager biter mot Patong-skepsisen:
   specificitet, inte adjektiv. Kvadratisk, sa raden inte hoppar i hojd nar
   traffarna vaxlar mellan liggande och stiende motiv. */
.ndj-tyg__bildknapp{appearance:none;border:0;padding:0;margin:0;cursor:zoom-in;
  display:block;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.04)}
.ndj-tyg__bild{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 420ms var(--ndj-ease)}
.ndj-tyg__bildknapp:hover .ndj-tyg__bild,
.ndj-tyg__bildknapp:focus-visible .ndj-tyg__bild{transform:scale(1.05)}
.ndj-tyg__bildknapp:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:2px}

.ndj-tyg__namn{margin:2px 2px 0;font-family:var(--ndj-font-rubrik);
  font-size:17px;font-weight:400;letter-spacing:0;color:var(--ndj-white)}

/* Fakta fore beskrivning, med flit. Researchen ar entydig: kopare i Patong
   misstanker att de blir lurade, och det enda som biter mot det ar att kunna
   namnge material, vikt och vav. Specificiteten imponerar, inte adjektiven. */
.ndj-tyg__fakta{margin:0;padding:0 2px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.04em;color:rgba(255,255,255,.58)}

.ndj-tyg__knappar{display:flex;align-items:center;gap:6px;margin-top:auto;padding:4px 2px 0}

.ndj-tyg__valj{appearance:none;border:0;cursor:pointer;
  background:var(--ndj-gold);color:var(--ndj-dark);
  padding:9px 16px;border-radius:999px;
  font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.06em;
  transition:filter 320ms var(--ndj-ease)}
.ndj-tyg__valj:hover,.ndj-tyg__valj:focus-visible{filter:brightness(1.1)}

.ndj-tyg__mer{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:9px 6px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.06em;color:rgba(255,255,255,.55);
  transition:color 320ms var(--ndj-ease)}
.ndj-tyg__mer:hover,.ndj-tyg__mer:focus-visible{color:var(--ndj-white)}

.ndj-rad__tom{margin:0;padding:6px;font-family:var(--ndj-font-body);
  font-size:14px;color:rgba(255,255,255,.7)}

/* "I have more like these". Tyst, i Johnnys rost, over hela rutnatets bredd.
   Den ska lasa som en mening han sager, inte som en paginering. */
.ndj-rad__fler,
.ast-single-post .entry-content .ndj-rad__fler{
  grid-column:1/-1;justify-self:center;margin-top:4px;
  appearance:none;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 20px;
  font-family:var(--ndj-font-body);font-size:13.5px;letter-spacing:.02em;
  color:var(--ndj-gold);text-decoration:none;
  transition:border-color 320ms var(--ndj-ease),color 320ms var(--ndj-ease)}
.ndj-rad__fler:hover,.ndj-rad__fler:focus-visible{
  border-color:var(--ndj-gold);color:var(--ndj-white)}
.ndj-rad__fler:focus-visible{outline:none;
  box-shadow:0 0 0 2px rgba(12,12,14,1),0 0 0 3px rgba(255,255,255,.62)}

/* --------------------------------------------------------- forstoringen */
/* Delad dialog for alla tygkort, se oppnaForstoring() i samtal.js. Ligger
   utanfor .ndj-rad i document.body, sa ett scenbyte i samtalet inte river
   ner den om nagon hann oppna en. */

.ndj-forstoring{position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,8,9,.78);opacity:0;
  transition:opacity 240ms var(--ndj-ease)}
.ndj-forstoring.ar-oppen{opacity:1}
/* `display:flex` ovan slar ut webblasarens egen [hidden]{display:none}. Utan
   raden nedan lag den stangda dialogen kvar OSYNLIG over hela sidan pa z-index
   300 och at varje klick, sa att inget tyg gick att oppna igen (Thomas,
   2026-09-25). */
.ndj-forstoring[hidden]{display:none}

.ndj-forstoring__ruta{position:relative;width:min(880px,100%);max-height:92vh;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--ndj-dark);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:20px;
  display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  transform:translateY(10px) scale(.98);
  transition:transform 280ms var(--ndj-ease)}
.ndj-forstoring.ar-oppen .ndj-forstoring__ruta{transform:none}
.ndj-forstoring__ruta:focus{outline:none}

.ndj-forstoring__stang{position:absolute;top:10px;right:10px;z-index:1;
  appearance:none;border:0;cursor:pointer;width:36px;height:36px;
  border-radius:999px;background:rgba(255,255,255,.1);color:var(--ndj-white);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background 320ms var(--ndj-ease)}
.ndj-forstoring__stang:hover,.ndj-forstoring__stang:focus-visible{
  background:var(--ndj-gold);color:var(--ndj-dark)}

.ndj-forstoring__bilder{display:flex;flex-direction:column;gap:10px}

/* Vaxlaren. En bild i sanders, inte tva staplade: tva stora kvadrater rymdes
   inte i 1440x900 utan scroll, och det ar dessutom battre att granska en bild
   i taget an att bladdra forbi en for att komma till den andra. */
.ndj-forstoring__vaxlare{display:flex;gap:6px}
.ndj-forstoring__flik{appearance:none;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:7px 14px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.05em;
  transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.ndj-forstoring__flik:hover,.ndj-forstoring__flik:focus-visible{
  color:var(--ndj-white);border-color:rgba(255,255,255,.4)}
.ndj-forstoring__flik.ar-aktiv{background:var(--ndj-gold);color:var(--ndj-dark);
  border-color:var(--ndj-gold)}
.ndj-forstoring__flik[hidden]{display:none}

/* Den gemensamma ytan. Zoomyta och jackayta ligger i samma ruta och byts med
   ar-dold, sa storleken star still nar nagon vaxlar mellan dem. */
.ndj-forstoring__yta{position:relative;width:100%;aspect-ratio:1;
  border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}

/* Zoomytan. Peka eller dra for att se vaven pa nara hall, se kopplaZoom() i
   samtal.js. Sjalva zoomningen ar en transform-origin som foljer pekaren,
   inget bibliotek. */
.ndj-forstoring__zoomyta{position:absolute;inset:0;touch-action:none;cursor:zoom-in}
.ndj-forstoring__zoomyta.ar-dold{display:none}
.ndj-forstoring__bild{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 220ms var(--ndj-ease)}
.ndj-forstoring__zoomyta.ar-zoomad .ndj-forstoring__bild{transform:scale(2.2)}
.ndj-forstoring__zoomyta.ar-zoomad{cursor:zoom-out}

.ndj-forstoring__jackayta{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;padding:16px}
.ndj-forstoring__jackayta.ar-dold{display:none}
.ndj-forstoring__jacka{display:block;max-width:100%;max-height:100%;object-fit:contain}

.ndj-forstoring__info{display:flex;flex-direction:column;gap:8px;min-width:0}
.ndj-forstoring__namn{margin:26px 0 0;font-family:var(--ndj-font-rubrik);
  font-size:22px;font-weight:400;color:var(--ndj-white)}
.ndj-forstoring__fakta{margin:0;font-family:var(--ndj-font-body);font-size:13px;
  letter-spacing:.04em;color:rgba(255,255,255,.6)}
.ndj-forstoring__rad{margin:2px 0 0;font-family:var(--ndj-font-body);
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.ndj-forstoring__valj{align-self:flex-start;margin-top:10px}

@media(max-width:760px){
  .ndj-forstoring{padding:0}
  .ndj-forstoring__ruta{width:100%;height:100%;max-height:none;
    border-radius:0;grid-template-columns:1fr;padding:16px}
  .ndj-forstoring__namn{margin-top:30px}
}

@media(prefers-reduced-motion:reduce){
  .ndj-forstoring,.ndj-forstoring__ruta,.ndj-forstoring__bild,.ndj-tyg__bild{
    transition-duration:1ms !important}
}

/* ------------------------------------------------------------- sparandet */
/* Tre falt, och inget av dem ar e-post. Se docs/IDE-VISIT-PLANNER.md: utan
   kanal finns ingen misstanke om spam, och da kan fragan vara gastfrihet.   */

.ndj-rad__spara{display:flex;flex-direction:column;gap:8px;padding:0 6px}

.ndj-rad__spara-text,.ndj-rad__spara-dryck{margin:0;
  font-family:var(--ndj-font-body);font-size:13px;color:rgba(255,255,255,.62)}
.ndj-rad__spara-dryck{margin-top:4px;color:var(--ndj-gold)}

.ndj-falt{display:flex;flex-direction:column;gap:4px}
.ndj-falt span{font-family:var(--ndj-font-body);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ndj-falt input{appearance:none;width:100%;
  background:rgba(255,255,255,.07);color:var(--ndj-white);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:10px 14px;font-family:var(--ndj-font-body);font-size:15px;
  transition:border-color 320ms var(--ndj-ease)}
.ndj-falt input:focus{outline:none;border-color:var(--ndj-gold)}

.ndj-rad__skicka{align-self:flex-start;margin-top:4px;padding:11px 22px;font-size:14px}
.ndj-rad__skicka[disabled]{opacity:.6;cursor:default}

/* ------------------------------------------------------------------ foten */

.ndj-rad__fot{display:flex;align-items:center;gap:14px;padding:2px 6px 0}

.ndj-rad__tillbaka,.ndj-rad__hoppa,
.ast-single-post .entry-content .ndj-rad__tillbaka,
.ast-single-post .entry-content .ndj-rad__hoppa{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:4px 0;
  font-family:var(--ndj-font-body);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45);text-decoration:none;
  transition:color 320ms var(--ndj-ease)}
.ndj-rad__tillbaka:hover,.ndj-rad__hoppa:hover,
.ndj-rad__tillbaka:focus-visible,.ndj-rad__hoppa:focus-visible{
  color:rgba(255,255,255,.9)}
.ndj-rad__hoppa{margin-left:auto}

.ndj-rad__utan-js{margin:8px 6px 2px;font-family:var(--ndj-font-body);font-size:14px}

/* PLACERING. Raden ligger OVERST i hero-blocket, ovanfor etiketten.

   Den har flyttats tva ganger, och bada gangerna var felet detsamma: jag
   tankte pa den som en list vid bildens underkant. Forst hangde den utanfor
   (bottom:-34px, matt till 37px nedanfor hero), sedan innanfor (bottom:44px).
   Langst ned laser raden som sidans avslut. Overst laser den som dess oppning,
   och det ar vad den ar.

   Den ar darfor i FLODET nu, inte absolutpositionerad. Hero ar ett rutnat med
   `place-items:end center`; ett absolut barn stod utanfor kompositionen och
   krokade fast i pixelvarden som bara stamde vid en viss hojd. */
.ndj-hero__rad{position:relative;z-index:3;
  margin:0 0 clamp(30px,4.5vh,50px)}

/* Raden behover mer bredd an textkolumnen. 840px tvingade steg 1:s sex segment
   i vagratt scroll direkt vid forsta anblicken, och en rad man maste dra i har
   inte sagt vad den innehaller.

   ⚠️ `width:100%` ar inte overflodig. Hero ar ett rutnat med
   `place-items:end center`, och `center` blir `justify-self:center`, vilket gor
   barnet KRYMPT TILL INNEHALLET. Utan `width:100%` blev blocket 937px trots
   `max-width:1140px`, och raden inuti, vars bredd ar procentbaserad, rakhades
   ut for smal sa att sista segmentet klipptes. Matt, inte antaget. */
.ndj-hero--medrad{padding-bottom:0}
.ndj-hero--medrad .ndj-hero__in{max-width:1140px;width:100%}

/* Rubriken och kallraden har `margin-inline:auto` sedan tidigare, etiketten
   hade det inte. Den ar ett krympt block och lag darfor kvar i vansterkant
   medan allt annat centrerades. Det syntes knappt i en 840px-kolumn och blev
   uppenbart i en 1140px-kolumn: felet fanns hela tiden, bredden avslojade det. */
.ndj-hero .ndj-eyebrow{margin-inline:auto}

@media(max-width:860px){
  .ndj-rad{border-radius:24px;padding:14px}
  .ndj-rad__val{gap:4px}
  .ndj-rad__seg{padding:11px 15px;font-size:14.5px}
  .ndj-rad__tyger{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Tva kort i bredd lamnar ca 130px per kort. Knapparna staplas darfor, annars
     bryts "About this cloth" pa tre rader bredvid Choose. */
  .ndj-tyg__knappar{flex-direction:column;align-items:stretch;gap:2px}
  .ndj-tyg__valj{text-align:center}
  .ndj-tyg__namn{font-size:16px}
  .ndj-rad__matare i{width:16px}
  .ndj-rad__matare i.ar-har{width:26px}
  .ndj-hero__rad{margin-bottom:26px}
}

/* Rorelsen ar liten men den upprepas vid varje svar, och det ar upprepningen
   som gor folk illamaende, inte amplituden. */
@media(prefers-reduced-motion:reduce){
  .ndj-rad__scen,.ndj-rad__matare i{transition-duration:1ms !important}
  .ndj-rad__scen.ar-ute,.ndj-rad__scen.ar-in{transform:none}
}

/* Honungsfallan. Utanfor bild i stallet for display:none, eftersom en del
   robotar hoppar over dolda falt men fyller i det de kan na. */
.ndj-falla{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 15b. SKALET, hamtat fran ankarpanelen pa Bylundsbil
   ---------------------------------------------------------------------------
   Formsprak och effekter lanade fran ett bygge som redan ar genomfort och
   uppmatt i webblasare, inte uppskattat. Vi tar SKALET, alltsa spar, kanttoning,
   kantljus, silversvep och fokusring. Ankarlogiken och Avada-lagningarna hor
   inte hemma har och foljer inte med.

   Tre fallgropar foljer med fran deras anteckningar, och alla tre ar sadana som
   kostar en timme var att hitta sjalv:

   1. SVEPETS RIKTNING. Basfargen ska vara den man vill se i VILA, glimten
      ljusare. Med ljus bas och dampad strimma blir det ett morkt svep som laser
      som en skugga. Darfor rgba(255,255,255,.88) i bada andar, alltsa segmentets
      vanliga farg, och ren vit i mitten.

   2. background-size:300% ger ett fonster pa en tredjedel, sa strimman ligger
      helt utanfor bilden bade vid 0 och vid 100 procent. Fargen ar darfor jamn,
      det ar bara ljuset som ror sig.

   3. animationend BUBBLAR. En lyssnare med {once:true} pa raden slacks av
      forsta basta frammande animation som tar slut. Motorn kontrollerar
      animationName och avregistrerar sjalv, se samtal.js.                     */

/* Glasets ovankant. En harfin ljus linje innanfor ramen, som pa riktigt glas. */
.ndj-rad{box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)}

/* ------------------------------------------------------------- kantljuset */
/* Ett ljus som vandrar at hoger langs radens kant nar en ny fraga kommer. Det
   sager "det har fortsatter" utan att nagot blinkar eller pilar pekar.

   Ringen ar radens 1px-ram: en gradient over hela rutan, maskad sa att bara
   kanten blir kvar (content-box XOR border-box). Utan masken skulle ljuset
   ligga over hela raden i stallet for langs den. */
.ndj-rad::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,
    rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%,rgba(255,255,255,0) 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}

.ndj-rad.ar-kantljus::after{animation:ndjKantljus 1.5s cubic-bezier(.65,0,.35,1) both}

@keyframes ndjKantljus{
  0%{opacity:0;background-position:100% 0}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;background-position:0 0}
}

/* -------------------------------------------------------- silversvepet */
/* Segmentets text far samma glimt vid hovring. Fargen byts inte, ljuset
   vandrar over den. Bara framat: nar pekaren lamnar nollstalls positionen
   utan overgang, och da ligger strimman redan utanfor texten. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ndj-rad__seg span{
    background-image:linear-gradient(105deg,
      rgba(255,255,255,.88) 0%,rgba(255,255,255,.88) 34%,
      #fff 46%,#fff 54%,
      rgba(255,255,255,.88) 66%,rgba(255,255,255,.88) 100%);
    background-size:250% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    transition:background-position 0s}

  @media (hover:hover) and (pointer:fine){
    .ndj-rad__seg:hover span,.ndj-rad__seg:focus-visible span{
      background-position:0 0;
      transition:background-position 1.3s cubic-bezier(.65,0,.35,1)}
  }

  /* Det valda segmentet har mork text pa guld. Ett vitt svep dar vore osynligt
     i ena andan och olasligt i den andra. */
  .ndj-rad__seg.ar-vald span{background-image:none;
    -webkit-text-fill-color:var(--ndj-dark);color:var(--ndj-dark)}
}

/* ------------------------------------------------------- sparet och kanten */
/* Alternativen ligger i ett EGET spar som rullar, inte i raden sjalv. Da star
   radens bakgrund, skugga och rundning stilla medan innehallet glider, och
   kanttoningen kan laggas pa innehallet utan att tona bort raden.

   De tre pixlarnas padding, som marginalen tar tillbaka, finns for att
   rullytan annars klipper fokusringen runt det yttersta segmentet. */
.ndj-rad__val{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:3px;margin:-3px;min-width:0}
.ndj-rad__val::-webkit-scrollbar{display:none}

/* Kanten tonar ut at det hall det finns mer att svepa till, aldrig i anden.
   Langderna satts av motorn ur verklig scrollWidth. */
@property --ndj-tonv{syntax:'<length>';inherits:false;initial-value:0px}
@property --ndj-tonh{syntax:'<length>';inherits:false;initial-value:0px}

.ndj-rad__val.ar-rullbar{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--ndj-tonv,0px),
    #000 calc(100% - var(--ndj-tonh,0px)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--ndj-tonv,0px),
    #000 calc(100% - var(--ndj-tonh,0px)),transparent 100%)}

@media (prefers-reduced-motion:no-preference){
  .ndj-rad__val.ar-rullbar{transition:--ndj-tonv .35s ease,--ndj-tonh .35s ease}
}

/* ------------------------------------------------------------ fokusringen */
/* Mork ring med en harfin ljus kant utanfor. En helt mork ring mot den morka
   raden nar inte 3:1, harkanten bar kontrasten utan att synas som en vit ram. */
.ndj-rad__seg:focus-visible,.ndj-chip:focus-visible,
.ndj-tyg__valj:focus-visible,.ndj-tyg__mer:focus-visible,
.ndj-rad__tillbaka:focus-visible,.ndj-rad__hoppa:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(12,12,14,1),0 0 0 3px rgba(255,255,255,.62)}

/* ------------------------------------------------------- riktningskorten */
/* Tre kavajer i ett rutnat, inte i det rullande sparet: de ska jamforas sida
   vid sida, och tre kort far alltid plats.

   Kortet ar en rundad rektangel med egen kant. Segmentets pill-form (999px)
   gav en stor gra oval runt ett hogt kort, darfor satts radien har om, med
   hogre specificitet an de tre segmentreglerna i 15b.

   Kavajen star pa ett svagt ljus i kortets ovre halft. Utan det forsvinner
   ett morkt tyg mot den morka raden. */
.ndj-rad .ndj-rad__scen .ndj-rad__val.ndj-rad__val--figur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;overflow:visible;width:100%;max-width:520px;margin:4px auto 0;padding:0;flex:0 1 auto}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 10px 14px;border-radius:16px;text-align:center;
  background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(255,255,255,.1),transparent 72%),
    rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);
  transition:border-color 320ms var(--ndj-ease),background-color 320ms var(--ndj-ease)}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur:hover,
.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur:focus-visible{
  background-color:rgba(255,255,255,.06);border-color:rgba(206,193,138,.55)}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur.ar-vald{
  background-color:rgba(206,193,138,.1);border-color:var(--ndj-gold)}

.ndj-rad__bild{display:block;width:100%;max-width:132px;height:auto;filter:brightness(1.12);
  transition:transform 420ms var(--ndj-ease)}
.ndj-rad__seg--figur:hover .ndj-rad__bild{transform:translateY(-3px)}

.ndj-rad .ndj-rad__val--figur .ndj-rad__seg--figur span{
  font-size:15px;letter-spacing:.04em;line-height:1.2}
.ndj-rad .ndj-rad__val--figur .ndj-rad__seg--figur.ar-vald span{
  -webkit-text-fill-color:var(--ndj-gold);color:var(--ndj-gold)}

@media(max-width:860px){
  .ndj-rad .ndj-rad__scen .ndj-rad__val.ndj-rad__val--figur{gap:8px}
  .ndj-rad .ndj-rad__val--figur .ndj-rad__seg.ndj-rad__seg--figur{
    padding:12px 6px 11px;border-radius:14px;gap:8px}
  .ndj-rad__bild{max-width:92px}
  .ndj-rad .ndj-rad__val--figur .ndj-rad__seg--figur span{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .ndj-rad__bild{transition:none}
  .ndj-rad__seg--figur:hover .ndj-rad__bild{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ndj-rad::after{display:none}
  .ndj-rad__seg span{transition:none}
}

@media (forced-colors:active){
  .ndj-rad__seg span{background-image:none;
    -webkit-text-fill-color:CanvasText;color:CanvasText}
  .ndj-rad::after{display:none}
}

/* 15c. TVA LAGEN, EN RAD
   ---------------------------------------------------------------------------
   Steg 1 har varken framstegsmatare, chips eller replik. Da ska fragan och
   alternativen ligga pa SAMMA rad, sa att raden ar ett piller: en rad som
   staller en fraga i forbifarten.

   Fran steg 2 finns det mer att visa an som ryms vagratt, och da staplar den.
   Skillnaden markeras av matarens narvaro, inte av ett stegnummer, sa att en
   nod som slar av mataren (U2) ocksa far pillerformen. Det ar ratt: aven den
   fragan ar ett steg utan bagage.

   `:has()` galler fran Chrome 105, Safari 15.4 och Firefox 121. En webblasare
   utan stod far den staplade formen, vilket ar fullt laslig och inte ett fel. */
/* CENTRERAD, och etiketten utan marginal. Mattes 2026-09-25 med
   `node _scripts/matt-etikett.js`: Astras `.entry-content p` (0,1,1) gav fragan
   21.6px margin-bottom, vilket lyfte den 11px over knapparnas mittlinje. Och
   `flex:1` pa sparet lamnade 198px tomt till hoger mot 15px till vanster.
   Raden centrerar nu sitt innehall; sparet krymper och rullar fortfarande. */
.ndj-rad__scen:not(:has(.ndj-rad__matare)){flex-direction:row;align-items:center;
  justify-content:center;gap:8px}
.ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fraga{flex:0 0 auto;margin:0;
  padding-left:12px;font-size:13.5px;letter-spacing:.07em;
  color:rgba(255,255,255,.82);white-space:nowrap}
.ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__val{flex:0 1 auto}
.ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fot{flex:0 0 auto;padding:0 6px 0 0}

@media(max-width:860px){
  .ndj-rad__scen:not(:has(.ndj-rad__matare)){flex-direction:column;align-items:stretch;gap:8px}
  .ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fraga{white-space:normal;padding-left:6px}
}

/* 15d. DET EXPANDERADE LAGET AR CENTRERAT
   ---------------------------------------------------------------------------
   Raden ar 1040px bred eftersom steg 1 behover det: sex plagg plus fragan.
   Fran steg 2 ar innehallet kortare, och vansterhangt blev hogra halvan en
   tom yta som laste som att nagot saknades.

   Vi andrar inte BREDDEN, for en rad som krymper och vaxer mellan varje fraga
   drar blicken till rorelsen i stallet for till texten, och den ligger overst
   i hero dar allt under den da skulle skuttra med. Vi centrerar innehallet
   i stallet. Da laser ytan som luft, vilket den ar, och kompositionen hamnar
   i samma mittlinje som rubriken under.

   Textblocken far en maxbredd i TECKEN och inte i pixlar. En replik pa 62ch
   ar lika lasbar oavsett radens bredd, en pa 620px ar det bara vid en zoom. */
.ndj-rad__scen:has(.ndj-rad__matare){align-items:center;text-align:center}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__replik,
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__fraga{max-width:62ch}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__val{justify-content:center;flex:0 0 auto;max-width:100%}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__minne{justify-content:center}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__fot{justify-content:center;gap:24px}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__hoppa{margin-left:0}

/* Tygkorten ska daremot fylla bredden. Det ar sidans enda stalle dar besokaren
   jamfor saker med varandra, och en jamforelse vill ha plats. */
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__tyger{width:100%;text-align:left}
.ndj-rad__scen:has(.ndj-rad__matare) .ndj-rad__spara{width:min(100%,460px);text-align:left}


/* 16. PRISER OCH TIDSPLANERN
   ---------------------------------------------------------------------------
   Samma formsprak som konstruktionsnivaerna (9a): harfina linjer, inga lador,
   guldet bara som accent. Ett pris ska lasas som en uppgift i ett katalogblad,
   inte som ett erbjudande. Data fran inc/site/class-priser.php.              */

.ndj-priser__tabell{border-top:1px solid var(--ndj-border)}
.ndj-priser__rad{display:grid;grid-template-columns:minmax(180px,1.3fr) repeat(auto-fit,minmax(0,1fr));
  align-items:baseline;gap:0 24px;padding:26px 0;border-bottom:1px solid var(--ndj-border)}
.ndj-priser__rad > span:first-child{font-family:var(--ndj-font-heading);font-size:20px;color:var(--ndj-dark)}
.ndj-priser__rad > span{font-variant-numeric:tabular-nums;font-size:17px}
.ndj-priser__rad small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-priser__rad--topp{padding:0 0 18px;align-items:end}
.ndj-priser__rad--topp strong{display:block;font-family:var(--ndj-font-body);font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ndj-gold)}
.ndj-priser__rad--topp small{display:block;margin-top:6px;text-transform:none;letter-spacing:0;font-size:13px}

.ndj-priser__enkla{list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 48px}
.ndj-priser__enkla li{display:flex;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--ndj-border);font-size:17px;font-variant-numeric:tabular-nums}
.ndj-priser__enkla small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-priser__not{margin-top:40px;max-width:62ch;font-size:15px;color:var(--ndj-gray)}

/* Mobil: varje plagg blir ett eget block, nivan star bredvid priset. */
@media(max-width:860px){
  .ndj-priser__rad--topp{display:none}
  .ndj-priser__rad{grid-template-columns:1fr;gap:10px}
  .ndj-priser__rad > span:first-child{margin-bottom:6px}
  .ndj-priser__rad > span[data-niva]{display:flex;justify-content:space-between;align-items:baseline}
  .ndj-priser__rad > span[data-niva]::before{content:attr(data-niva);font-size:14px;color:var(--ndj-gray)}
}

.ndj-tid{max-width:760px;margin:0 auto}
.ndj-tid__form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.ndj-tid .ndj-falt{display:flex;flex-direction:column;gap:8px}
.ndj-tid .ndj-falt span{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-tid .ndj-falt input{min-height:52px;padding:0 16px;border:1px solid var(--ndj-border);
  border-radius:0;background:var(--ndj-white);font:inherit;font-size:17px;color:var(--ndj-dark)}
.ndj-tid .ndj-falt input:focus{outline:none;border-color:var(--ndj-dark)}
.ndj-tid__kryss{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ndj-gray)}
.ndj-tid__kryss input{width:18px;height:18px;accent-color:var(--ndj-dark)}

.ndj-tid__svar:not(:empty){margin-top:48px}
.ndj-tid__kort{padding:44px 0 0;border-top:1px solid var(--ndj-dark)}
.ndj-tid__kort h3{font-size:clamp(26px,3vw,32px);margin:10px 0 14px}
.ndj-tid__niva{color:var(--ndj-gray);max-width:58ch}
.ndj-tid__schema{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--ndj-border)}
.ndj-tid__schema li{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:6px 24px;
  padding:18px 0;border-bottom:1px solid var(--ndj-border)}
.ndj-tid__dag{font-family:var(--ndj-font-heading);font-size:18px;color:var(--ndj-dark)}
.ndj-tid__marginal{color:var(--ndj-gray)}
.ndj-tid__marginal .ndj-tid__dag{color:var(--ndj-gray)}
.ndj-tid__not{margin-top:22px;padding-left:16px;border-left:2px solid var(--ndj-gold);max-width:58ch}
.ndj-tid__fel{color:var(--ndj-dark);font-weight:600}
.ndj-tid__utanjs{margin-top:24px}

@media(max-width:600px){
  .ndj-tid__form{grid-template-columns:1fr}
  .ndj-tid__schema li{grid-template-columns:1fr}
}

/* Temats `.entry-content ul, ol` har max-width 66ch och Astras egen vansterluft.
   Listorna har ar tabeller i forklaning och ska ga kant i kant. */
.entry-content .ndj-priser__enkla,
.entry-content .ndj-tid__schema{max-width:none;margin-left:0;padding-left:0}
.entry-content .ndj-tid__schema li{max-width:none}

/* Knappar i innehallet. `.entry-content a` ger alla lankar ett guldstreck och
   Astras `.ast-single-post .entry-content a` en understrykning. En knapp ar
   ingen textlank, sa bada tas bort, och linjeknappen far tillbaka sin ram. */
.entry-content a.ndj-btn,
.ast-single-post .entry-content a.ndj-btn{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:14px}
.entry-content a.ndj-btn--line,
.ast-single-post .entry-content a.ndj-btn--line{border-bottom-color:var(--ndj-dark)}
.entry-content a.ndj-btn--gold:hover,.entry-content a.ndj-btn--gold:focus-visible{color:var(--ndj-gold)}

/* Etiketten ar ett krympt block (se .ndj-hero .ndj-eyebrow ovan). I varje
   centrerad topp maste den darfor centreras sjalv, annars hamnar den till
   vanster om rubriken den hor till. */
.ndj-sida__topp .ndj-eyebrow,
.ndj-sec__topp .ndj-eyebrow{margin-inline:auto}


/* 17. JOURNALEN, BLOGG OCH KATEGORIARKIV
   ---------------------------------------------------------------------------
   Astras standard var bla lankar, ljusbla bakgrund och vita lador med rundade
   horn. Det lasta som ett annat foretag. Samma formsprak som innersidorna nu:
   vit yta, harfina linjer, guldet som etikett, rubriken i serif.            */

.blog.ast-separate-container,
.archive.ast-separate-container,
.blog.ast-separate-container #content,
.archive.ast-separate-container #content{background:var(--ndj-white)}

.ast-separate-container .ast-archive-description{background:transparent;
  padding:120px 0 72px;margin:0 0 24px;text-align:center;border-bottom:1px solid var(--ndj-border)}
.ast-archive-description .ndj-eyebrow{margin:0 auto 18px}
.ast-archive-description .ast-archive-title{font-size:clamp(34px,4.4vw,52px);
  letter-spacing:-.018em;max-width:20ch;margin:0 auto;text-wrap:balance}
.ast-archive-description p:not(.ndj-eyebrow){max-width:58ch;margin:24px auto 0;
  font-size:18px;line-height:1.7;color:var(--ndj-gray)}

.blog .ast-article-post,
.archive .ast-article-post{background:transparent}
.ast-separate-container.blog .ast-article-inner,
.ast-separate-container.archive .ast-article-inner,
.ast-separate-container .ast-grid-common-col .ast-article-inner{background:transparent;
  box-shadow:none;border-radius:0;padding:0}
.blog .post-content,
.archive .post-content{padding:0 0 40px;border-bottom:1px solid var(--ndj-border)}
.blog .post-thumb-img-content img,
.archive .post-thumb-img-content img{border-radius:0;aspect-ratio:4/3;object-fit:cover;width:100%}
.blog .ast-blog-featured-section,
.archive .ast-blog-featured-section{margin-bottom:24px}

.blog .cat-links a,
.archive .cat-links a,
.blog .ast-taxonomy-container a,
.archive .ast-taxonomy-container a{font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ndj-gold);text-decoration:none}
.blog .entry-title,
.archive .entry-title{font-size:22px;line-height:1.3;margin:12px 0 10px}
.blog .entry-title a,
.archive .entry-title a{color:var(--ndj-dark);text-decoration:none}
.blog .entry-title a:hover,
.archive .entry-title a:hover{color:var(--ndj-gray)}
.blog .entry-meta,
.archive .entry-meta,
.blog .entry-meta a,
.archive .entry-meta a{font-size:13px;color:var(--ndj-gray);text-decoration:none}
.blog .ast-excerpt-container,
.archive .ast-excerpt-container,
.blog .entry-content p,
.archive .entry-content p{font-size:16px;line-height:1.7;color:var(--ndj-gray)}

.blog .ast-pagination a,
.archive .ast-pagination a,
.blog .ast-pagination .current,
.archive .ast-pagination .current{color:var(--ndj-dark);border-radius:0}
.ast-pagination .page-numbers.current{border-bottom:1px solid var(--ndj-gold)}

@media(max-width:782px){
  .ast-separate-container .ast-archive-description{padding:72px 0 48px}
}

/* Astra fargar meta med `.entry-meta *` och sin globala lankfarg, och satter
   egen storlek och justering pa arkivbeskrivningen i mobillaget. Darfor
   body-klassen forst, sa att vi vinner utan !important. */
body.ast-separate-container .entry-meta,
body.ast-separate-container .entry-meta *{color:var(--ndj-gray)}
body.ast-separate-container .ast-archive-description p.ndj-eyebrow{font-size:12px;
  letter-spacing:.24em;color:var(--ndj-gray);margin:0 auto 18px}
body.ast-separate-container .ast-archive-description,
body.ast-separate-container .ast-archive-description *{text-align:center}


/* 18. THE TAILOR ACADEMY
   ---------------------------------------------------------------------------
   Ett uppslagsverk ska lasas lange. En spalt pa ca 68 tecken, luft mellan
   stycken, rubriker i serif, och kallorna sist i mindre grad. Samma harfina
   linjer och guldetiketter som resten av sajten.                            */

.ndj-akad__smulor{font-size:12px;letter-spacing:.06em;color:var(--ndj-gray);margin-bottom:28px}
.ndj-akad__smulor a,.entry-content .ndj-akad__smulor a{color:var(--ndj-gray);text-decoration:none;border-bottom:0}
.ndj-akad__smulor a:hover{color:var(--ndj-dark)}
.ndj-akad__meta{margin-top:22px;font-size:13px;letter-spacing:.04em;color:var(--ndj-gray)}
.ndj-akad__topp{padding-bottom:64px}

.ndj-akad__kropp{padding:8px 0 110px;font-size:18px;line-height:1.8}
.ndj-akad__kropp > * + *{margin-top:1.1em}
.ndj-akad__kropp h2{font-size:clamp(26px,3vw,32px);margin-top:2.2em;letter-spacing:-.01em}
.ndj-akad__kropp h3{font-size:22px;margin-top:1.8em}
.ndj-akad__kropp p,.ndj-akad__kropp li{max-width:68ch}
.ndj-akad__kropp ul,.ndj-akad__kropp ol{padding-left:1.2em}
.ndj-akad__kropp li + li{margin-top:.5em}
.ndj-akad__kropp blockquote{margin:2em 0;padding:0 0 0 24px;border-left:2px solid var(--ndj-gold);
  font-family:var(--ndj-font-heading);font-size:22px;line-height:1.5}
.ndj-akad__kropp table{width:100%;border-collapse:collapse;font-size:16px;margin:1.6em 0}
.ndj-akad__kropp th,.ndj-akad__kropp td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--ndj-border);vertical-align:top}
.ndj-akad__kropp th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-gray);font-weight:600}
.ndj-akad__kropp .ndj-akad__kallor{margin-top:3.2em;padding-top:22px;border-top:1px solid var(--ndj-border);font-size:14px;color:var(--ndj-gray)}
.ndj-akad__kropp .ndj-akad__kallor li{max-width:none}
.ndj-akad__kropp .ndj-akad__kallor a{word-break:break-word}
.ndj-akad__kropp .ndj-akad__ruta{margin:2em 0;padding:26px 30px;background:var(--ndj-light);border-left:2px solid var(--ndj-gold)}
.ndj-akad__kropp .ndj-akad__ruta > :first-child{margin-top:0}

/* Landningssidans register: nummer, namn och en rad, som en innehallsforteckning. */
.ndj-akad__index{list-style:none;margin:0;padding:0;border-top:1px solid var(--ndj-border)}
.entry-content .ndj-akad__index{max-width:none;margin-left:0}
.ndj-akad__index a,.entry-content .ndj-akad__index a{display:grid;grid-template-columns:64px minmax(200px,1fr) 2fr auto;gap:8px 28px;
  align-items:baseline;padding:30px 0;border-bottom:1px solid var(--ndj-border);text-decoration:none;color:var(--ndj-dark)}
.ndj-akad__nr{font-family:var(--ndj-font-heading);font-size:15px;color:var(--ndj-gold)}
.ndj-akad__namn{font-family:var(--ndj-font-heading);font-size:26px;line-height:1.25}
.ndj-akad__om{font-size:16px;line-height:1.6;color:var(--ndj-gray)}
.ndj-akad__antal{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-akad__index a:hover .ndj-akad__namn{color:var(--ndj-gray)}
@media(max-width:860px){
  .ndj-akad__index a,.entry-content .ndj-akad__index a{grid-template-columns:44px 1fr;padding:24px 0}
  .ndj-akad__om,.ndj-akad__antal{grid-column:2}
}

/* Kapitlets artiklar och grannarna under en artikel. */
.ndj-akad__artiklar,.ndj-akad__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--ndj-border)}
.entry-content .ndj-akad__artiklar,.entry-content .ndj-akad__lista{max-width:none;margin-left:0}
.ndj-akad__artiklar a,.entry-content .ndj-akad__artiklar a{display:block;padding:24px 0;border-bottom:1px solid var(--ndj-border);text-decoration:none}
.ndj-akad__artiklar strong{display:block;font-family:var(--ndj-font-heading);font-size:21px;font-weight:600;color:var(--ndj-dark)}
.ndj-akad__artiklar span{display:block;margin-top:8px;font-size:16px;line-height:1.6;color:var(--ndj-gray);max-width:70ch}
.ndj-akad__lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 40px;margin-top:20px}
.ndj-akad__lista li{border-bottom:1px solid var(--ndj-border)}
.ndj-akad__lista a,.entry-content .ndj-akad__lista a{display:block;padding:18px 0;font-family:var(--ndj-font-heading);
  font-size:18px;color:var(--ndj-dark);text-decoration:none;border-bottom:0}
.ndj-akad__tillbaka{margin-top:36px}

/* Ordlexikonet. */
.ndj-akad__ordlista section{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:34px 0;border-top:1px solid var(--ndj-border)}
.ndj-akad__ordlista h2{font-size:34px;color:var(--ndj-gold);margin:0}
.ndj-akad__ordlista dl{margin:0}
.ndj-akad__ordlista dt{font-family:var(--ndj-font-heading);font-size:19px;margin-top:18px}
.ndj-akad__ordlista dt:first-child{margin-top:0}
.ndj-akad__ordlista dt a,.entry-content .ndj-akad__ordlista dt a{color:var(--ndj-dark);text-decoration:none;border-bottom:0}
.ndj-akad__ordlista dd{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--ndj-gray);max-width:70ch}
@media(max-width:600px){.ndj-akad__ordlista section{grid-template-columns:1fr;gap:10px}}

/* Akademins artiklar som innersidor: vit yta, ingen lada, meta centrerad.
   Filtret astra_get_content_layout tar bort ladan dar Astra lyssnar pa det,
   CSS:en tacker resten. */
body.single-ndj_akademi,
body.single-ndj_akademi #content{background:var(--ndj-white)}
body.single-ndj_akademi .ast-article-single,
body.single-ndj_akademi .ast-separate-container .ast-article-single{background:transparent;padding:0;box-shadow:none}
body.single-ndj_akademi .entry-header,
body.single-ndj_akademi .entry-meta{display:none}
.ndj-akad__meta{margin-inline:auto}

/* Spalten ar smal och centrerad aven nar Astras behallare ar bred, och
   listorna i akademin ar register, inga punktlistor: ingen indragning. */
.ndj-akad__kropp{max-width:760px;margin-inline:auto}
.ndj-akad__kropp .ndj-akad__artiklar,
.ndj-akad__kropp .ndj-akad__ordlista dl{padding-left:0}
.ndj-akad__kropp .ndj-akad__artiklar li{max-width:none;margin-top:0}
.ndj-wrap.ndj-akad__kropp{max-width:760px;margin-inline:auto}

/* Alfabetraden ovanfor ordlistan: sma guldfargade bokstaver, luft mellan
   varje lank, ingen understrykning. Samma familj och matt som .ndj-eyebrow,
   men gemener i stallet for versaler. */
.ndj-akad__abc{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 34px;
  font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.04em;
  text-transform:lowercase}
.ndj-akad__abc a,.entry-content .ndj-akad__abc a{color:var(--ndj-gold);
  text-decoration:none;border-bottom:0}
.ndj-akad__abc a:hover{color:var(--ndj-dark)}
.ndj-akad__abc a{text-transform:uppercase}

/* MOBIL, RADEN FAR INTE BESTAMMA SIDANS BREDD.
   Grid- och flexbarn har min-width:auto, alltsa "minst sa brett som innehallet".
   Radens sex knappar i en rad (nowrap, for att rulla) blev darfor sidans
   minsta bredd: 588px pa en 393px-skarm, och hela sidan zoomades ut
   (Thomas, iPhone 16, 2026-09-25). Hela kedjan far krympa, sa rullar sparet. */
.ndj-hero__in,.ndj-hero__rad,.ndj-rad,.ndj-rad__scen,.ndj-rad__val{min-width:0}
.ndj-rad{max-width:100%}

/* Pa smal skarm bryts valen i stallet for att rulla. Sex val i ett rullspar
   visade tre och gomde "Something for her" och "Not sure yet" bakom ett svep
   som ingen visste om. Figurkorten (riktningen) har egen layout och undantas. */
@media(max-width:600px){
  .ndj-rad__val:not(.ndj-rad__val--figur){flex-wrap:wrap;justify-content:center;overflow:visible;
    -webkit-mask-image:none;mask-image:none;gap:2px 4px}
  .ndj-rad__scen:not(:has(.ndj-rad__matare)) .ndj-rad__fraga{text-align:center;padding-left:0}
}

/* 15e. LOCKELSEN, se lockelse() i samtal.js
   ---------------------------------------------------------------------------
   Ett val i taget far samma silverljus som kantljuset, runt sin egen kant,
   plus en zoom pa fyra procent och textglimten fran hovringen. Kanten ar en
   maskad pseudo, samma teknik som .ndj-rad::after, sa att bara ramen lyser. */
.ndj-rad__seg{position:relative}
.ndj-rad__seg::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.14) 36%,
    rgba(255,255,255,.85) 50%,rgba(255,255,255,.14) 64%,rgba(255,255,255,.14) 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.ndj-rad__seg.ar-lockar{animation:ndjLockZoom 1.6s cubic-bezier(.45,0,.35,1) both}
.ndj-rad__seg.ar-lockar::before{animation:ndjLockKant 1.6s cubic-bezier(.65,0,.35,1) both}
.ndj-rad__seg.ar-lockar span{background-position:0 0;
  transition:background-position 1.3s cubic-bezier(.65,0,.35,1)}
@keyframes ndjLockZoom{0%,100%{transform:scale(1)}45%{transform:scale(1.04)}}
@keyframes ndjLockKant{
  0%{opacity:0;background-position:100% 0}
  18%{opacity:1}
  80%{opacity:1}
  100%{opacity:0;background-position:0 0}
}
@media (prefers-reduced-motion:reduce){
  .ndj-rad__seg.ar-lockar,.ndj-rad__seg.ar-lockar::before{animation:none}
}

/* PLACERINGEN. Raden ligger mitt emellan logotypen och etiketten, inte tatt
   ovanfor texten. Avstandet under vaxer med skarmhojden: 22vh ar ca 215px pa
   en 980px hog skarm... 15.5vh (ca 150px) ger lika luft over och under raden, mitt emellan
   logotyp och etikett (uppmatt 1650x980, 2026-09-25). 22vh gav 90 over och 213 under. */
.ndj-hero__rad{margin-bottom:clamp(40px,15.5vh,200px)}
@media(max-width:860px){.ndj-hero__rad{margin-bottom:clamp(26px,6vh,56px)}}

/* 15f. SVAVAN, se svava() i samtal.js
   ---------------------------------------------------------------------------
   Raden fast pa skarmen, centrerad, strax under headern eller 12px fran
   kanten. z-index 80: over innehallet, under headern (90), panelen (100)
   och forstoringen (300). Aldrig hogre an skarmen: da rullar den inuti. */
.ndj-rad.ar-svavar{position:fixed;left:50%;top:var(--ndj-svav-topp,12px);z-index:80;
  transform:translateX(-50%);width:min(100% - 32px,1060px);margin:0;
  max-height:calc(100vh - var(--ndj-svav-topp,12px) - 16px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 18px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)}
.ndj-svavplats{height:0}

/* Krysset. Syns bara nar raden svavar, diskret tills man pekar pa det. */
.ndj-rad__stang{display:none}
.ndj-rad.ar-svavar .ndj-rad__stang{display:flex;align-items:center;justify-content:center;
  position:absolute;top:50%;right:10px;transform:translateY(-50%);width:32px;height:32px;
  appearance:none;border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.45);font-size:20px;line-height:1;transition:color 240ms,background 240ms}
.ndj-rad.ar-svavar:has(.ndj-rad__matare) .ndj-rad__stang{top:12px;transform:none}
.ndj-rad__stang:hover,.ndj-rad__stang:focus-visible{color:#fff;background:rgba(255,255,255,.1);outline:none}
.ndj-rad.ar-svavar .ndj-rad__scen:not(:has(.ndj-rad__matare)){padding-right:34px}

/* Hopfalld pa mobil: bara fragan, som en knapp. */
.ndj-rad.ar-hopfalld{cursor:pointer}
.ndj-rad.ar-hopfalld .ndj-rad__val,
.ndj-rad.ar-hopfalld .ndj-rad__fot{display:none}
.ndj-rad.ar-hopfalld .ndj-rad__fraga::after{content:" \203A";color:var(--ndj-gold)}
.ndj-rad.ar-hopfalld:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:3px}

/* Over vita sidor drog oskarpan in det vita och glaset blev gratt. Svavande
   rad far darfor nastan tackande mork botten, samma kansla som i heron. */
.ndj-rad.ar-svavar{background:rgba(16,16,18,.94)}
@supports (backdrop-filter: blur(10px)){.ndj-rad.ar-svavar{background:rgba(14,14,16,.9)}}
.ndj-rad.ar-svavar .ndj-rad__stang{color:rgba(255,255,255,.62)}

/* Artikelns slut: en harfin linje och luft, ingen gra lada. */
.ndj-akad__slut{max-width:1060px;margin:0 auto;padding:56px 0 96px;border-top:1px solid var(--ndj-border)}
.ndj-akad__slut .ndj-akad__lista{margin-top:14px}
body.single-ndj_akademi .post-navigation,
body.single-ndj_akademi .ast-single-related-posts-container{display:none}
.ndj-akad__slut .ndj-akad__lista,.entry-content .ndj-akad__slut .ndj-akad__lista{padding-left:0;margin-left:0;max-width:none;border-top:0}

/* Butikssidan: skylten sitter i bildens overkant, och 16:9-beskarningen
   klippte den ("ashion Jone"). Bilden forankras i overkant, fotterna far ga. */
.page-id-468 .wp-post-image{object-position:50% 0}

/* 19. INSPIRATIONSGALLERIET (gen 2-markup pa /inspiration/)
   ---------------------------------------------------------------------------
   Rutnatets CSS foljde aldrig med fran gen 2, sa 221 bilder lag i en kolumn i
   full bredd: sidan var 222 000px lang och bilderna uppforstorade (uppmatt
   2026-09-25). Samma rutnat som gen 2, i sajtens formsprak: tata bilder,
   ingen rundning, en langsam zoom vid hovring. */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:32px}
.entry-content .gallery-grid{max-width:none}
.gallery-item{margin:0;overflow:hidden;background:var(--ndj-light)}
.gallery-item img{display:block;width:100%;height:340px;object-fit:cover;
  transition:transform 900ms var(--ndj-ease)}
@media (hover:hover){.gallery-item:hover img{transform:scale(1.035)}}
.gallery-count{margin-top:24px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ndj-gray)}
@media(max-width:600px){
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .gallery-item img{height:210px}
}
@media (prefers-reduced-motion:reduce){.gallery-item img{transition:none}}

/* Stegen ("How it works") ar ett rutnat med tre spalter, men temats
   `.entry-content ol{max-width:66ch}` pressade ihop dem till en smal spalt
   till vanster (Thomas, 2026-09-25). Samma fel som listorna i avsnitt 16. */
.entry-content .ndj-steg{max-width:none;margin-left:0;padding-left:0}
/* Sektionens avslutande lank ska sta mitt under innehallet. `.entry-content p`
   har max-width 66ch och ligger vansterstallt, sa stycket blev smalt och lanken
   hamnade till vanster om mitten. */
.entry-content .ndj-sec__fot{max-width:none;margin-inline:auto}

/* CENTRERADE AVSLUTNINGAR. Sektioner som centreras med style="text-align:center"
   (CTA:n sist pa Heritage, Wedding, How to measure med flera) fick etiketten
   167px och knapparna 62px till vanster: etiketten ar ett krympt block och
   knappraden ett stycke med lopttextens max-width. Uppmatt med
   node _scripts/matt-komponentbredd.js, 2026-09-25. Galler alla sadana
   sektioner, sa nasta sida med samma upplagg blir ratt av sig sjalv. */
[style*="text-align:center"] > .ndj-eyebrow,
[style*="text-align: center"] > .ndj-eyebrow{margin-inline:auto}
.entry-content .ndj-knappar{max-width:none}
[style*="text-align:center"] > .ndj-knappar,
[style*="text-align: center"] > .ndj-knappar,
[style*="text-align:center"] > .ndj-lead{margin-inline:auto}

/* 6h. SAMMA HEADER PA ALLA SIDOR (Thomas, 2026-09-26)
   ---------------------------------------------------------------------------
   Innersidorna hade vit header med den morka logotypen, som pa grund av
   luften i SVG:n sag liten ut. Nu far de startsidans RULLADE lage fran borjan:
   fast, nastan svart, vita logotypen i 42px. Startsidan borjar fortfarande
   genomskinlig over heron och gar over i samma lage. Sidan skjuts ned med
   headerns hojd, sa att inget hamnar under den. */
body:not(.ndj-har-hero) .ndj-head{position:fixed;top:0;left:0;color:var(--ndj-white);
  background-color:rgba(14,14,15,.95);box-shadow:0 1px 0 rgba(255,255,255,.07)}
body:not(.ndj-har-hero) .ndj-head .ndj-head__in{padding-top:13px;padding-bottom:13px}
body:not(.ndj-har-hero) .ndj-logo--mork{display:none}
body:not(.ndj-har-hero) .ndj-logo--ljus{display:block;height:42px}
body:not(.ndj-har-hero){padding-top:var(--ndj-head-h,71px)}
body:not(.ndj-har-hero) .ndj-head{border-bottom:0}
body.admin-bar:not(.ndj-har-hero) .ndj-head{top:32px}
@media(max-width:782px){body.admin-bar:not(.ndj-har-hero) .ndj-head{top:46px}}

/* Linjeknappen i morka sektioner. Den hade mork text pa mork botten och var
   osynlig, och knuffade den synliga knappen at vanster (Women, 2026-09-26). */
.ndj-sec--dark .ndj-btn--line,
.entry-content .ndj-sec--dark a.ndj-btn--line{color:var(--ndj-white);border-color:rgba(255,255,255,.45)}
.ndj-sec--dark .ndj-btn--line:hover,.ndj-sec--dark .ndj-btn--line:focus-visible,
.entry-content .ndj-sec--dark a.ndj-btn--line:hover{background:var(--ndj-white);color:var(--ndj-dark);border-color:var(--ndj-white)}

/* EN KONFIGURATOR. Helsidesversionen [ndj_samtal] finns kvar for den som
   saknar JavaScript (radens noscript-lank pekar dit), men doljs for alla andra,
   som far samma rad som resten av sajten (Thomas, 2026-09-26). */
.ndj-js .ndj-bara-utan-js{display:none}

/* Sex val i fem spalter lamnade fyra tomma rutor dar rutnatets gra bakgrund
   (som ritar linjerna via gap) syntes som en gra platta. Tre spalter ger tva
   hela rader. */
@media(min-width:861px){.ndj-sam__val{grid-template-columns:repeat(3,1fr)}}
/* Raden i en vanlig sektion (inte over hero-bilden) far samma nastan tackande
   morka botten som den svavande. Glaset blev annars gratt mot vitt. */
.ndj-sec .ndj-rad{background:rgba(16,16,18,.94)}
@supports (backdrop-filter: blur(10px)){.ndj-sec .ndj-rad{background:rgba(14,14,16,.9)}}

/* Headerns lankar vid hovring och fokus. Astras globala a:hover gav bla
   (rgb 4,92,180) pa "Book a Fitting" (Thomas, 2026-09-26). Silvergra, samma
   ton som silversvepet, och strecket under foljer med via currentColor. */
.ndj-head a:hover,.ndj-head a:focus,.ndj-head a:focus-visible,
.ndj-head a:active{color:#c9ccd1}

/* 6i. PANELEN SOM SKYLTFONSTER (Thomas, 2026-09-26: "ratt trakig")
   ---------------------------------------------------------------------------
   Mork som headern, sa att menyn kanns som en del av samma yta. Grupperna far
   guldetiketter som i foten, och sist kommer butiken: foto, adress, oppet
   just nu, vagen dit och direktkontakt. */
.ndj-panel{background:#111112;color:var(--ndj-white);padding:22px 38px 56px}
.ndj-panel__topp{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:44px}
.ndj-panel__close{color:var(--ndj-white);margin-bottom:0}
.ndj-panel__logo{display:block;line-height:0;border:0}
.ndj-panel__logo img{height:38px;width:auto}

.ndj-grp{margin-bottom:34px}
.ndj-grp__rubrik{margin:0 0 8px;font-family:var(--ndj-font-body);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ndj-gold)}
.ndj-panel__nav ul{margin:0}
.ndj-panel__nav a{color:rgba(255,255,255,.9);padding:7px 0}
.ndj-grp--primar a{font-size:19px}
.ndj-grp--sekundar{padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.ndj-grp--sekundar a{font-size:14px;color:rgba(255,255,255,.55)}
.ndj-panel__nav a:hover,.ndj-panel__nav a:focus-visible{color:var(--ndj-gold)}

.ndj-panel__besok{margin-top:40px;padding:26px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08)}
.ndj-panel__bild{display:block;margin:-26px -26px 22px;line-height:0;border:0;overflow:hidden}
.ndj-panel__bild img{width:100%;height:190px;object-fit:cover;object-position:50% 20%;
  transition:transform 900ms var(--ndj-ease)}
.ndj-panel__bild:hover img{transform:scale(1.03)}
.ndj-panel__adress{font-style:normal;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 12px}
.ndj-panel__oppet{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:14px;color:rgba(255,255,255,.72)}
.ndj-panel__prick{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);flex:0 0 8px}
.ndj-panel__oppet.ar-oppet .ndj-panel__prick{background:#7fbf8a;box-shadow:0 0 0 4px rgba(127,191,138,.15)}
.ndj-panel__knappar{display:flex;gap:10px;flex-wrap:wrap}
.ndj-panel__knappar .ndj-btn{min-height:44px;padding:12px 22px;flex:1 1 auto;text-align:center}
.ndj-panel__tel{margin:16px 0 0;font-size:14px}
.ndj-panel__tel a,.ndj-panel__tel a:hover{color:rgba(255,255,255,.72);text-decoration:none;border:0;letter-spacing:.04em}
.ndj-panel__tel a:hover{color:var(--ndj-gold)}
.ndj-panel__ta{display:flex;align-items:center;gap:14px;margin:22px 0 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.45;color:rgba(255,255,255,.6)}
.ndj-panel__ta img{width:34px;height:auto;flex:0 0 34px}
.ndj-panel__ta strong{display:block;color:var(--ndj-white);font-weight:600}

/* 6j. PANELEN VIT IGEN (Thomas, 2026-09-26: "snyggare vit, mer feeling").
   Strukturen fran 6i star kvar: guldetiketter, butiken, oppet just nu. Inga
   knappar, bara understrukna textlankar som i resten av sajten. */
.ndj-panel{background:var(--ndj-white);color:var(--ndj-dark)}
.ndj-panel__close{color:var(--ndj-dark)}
.ndj-panel__logo img{height:44px}
.ndj-panel__nav a{color:var(--ndj-dark)}
.ndj-grp--sekundar{border-top-color:var(--ndj-border)}
.ndj-grp--sekundar a{color:var(--ndj-gray)}
.ndj-panel__besok{background:var(--ndj-light);border:0}
.ndj-panel__adress{color:var(--ndj-dark)}
.ndj-panel__oppet{color:var(--ndj-gray)}
.ndj-panel__prick{background:rgba(0,0,0,.25)}
.ndj-panel__oppet.ar-oppet .ndj-panel__prick{background:#4f9a5c;box-shadow:0 0 0 4px rgba(79,154,92,.14)}
.ndj-panel__lankar{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0}
.ndj-panel__lankar .ndj-tlink{font-size:15px}
.ndj-panel__ta{border-top-color:var(--ndj-border);color:var(--ndj-gray)}
.ndj-panel__ta strong{color:var(--ndj-dark)}

/* Sociala i panelen, under kontaktlankarna. */
.ndj-panel__soc{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--ndj-border)}
.ndj-panel__soc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.ndj-panel__soc li{margin:0}
.ndj-panel__soc a{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;border:0;
  font-size:13px;line-height:1.4;color:var(--ndj-gray)}
.ndj-panel__soc svg{flex:0 0 20px;color:var(--ndj-dark);transition:color 320ms var(--ndj-ease)}
.ndj-panel__soc strong{display:block;font-size:15px;font-weight:600;color:var(--ndj-dark);
  transition:color 320ms var(--ndj-ease)}
.ndj-panel__soc a:hover svg,.ndj-panel__soc a:focus-visible svg,
.ndj-panel__soc a:hover strong,.ndj-panel__soc a:focus-visible strong{color:var(--ndj-gold)}

/* Scrollbaren. Standardlisten i Windows sag ut som 1986. Tunn och nastan
   osynlig tills man ror den. */
.ndj-panel{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
.ndj-panel::-webkit-scrollbar{width:6px}
.ndj-panel::-webkit-scrollbar-track{background:transparent}
.ndj-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:6px}
.ndj-panel::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}
.ndj-panel__logo img{height:40px;filter:brightness(0);opacity:.88}

/* Ingen synlig list alls. Innan "Visit us" fick menyn plats pa skarmen och
   det fanns inget att rulla; nu ar panelen langre, och Windows standardlist
   sticker ut (Thomas, 2026-09-26). Rullning med hjul, platta och finger finns kvar. */
.ndj-panel{scrollbar-width:none}
.ndj-panel::-webkit-scrollbar{display:none;width:0}

/* Citat i tvaspalten (Meet Johnny). Hans egna ord, som i akademin: guldlinje
   och serif, sa att de skiljer sig fran var sammanbindande text. */
.ndj-tva__text blockquote{margin:22px 0 20px;padding:0 0 0 22px;border-left:2px solid var(--ndj-gold);
  font-family:var(--ndj-font-heading);font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--ndj-dark)}
.ndj-sec--dark h2{color:var(--ndj-white)}
/* Sex bilder ska bli tva hela rader, inte fyra plus tva. */
@media(min-width:861px){.gallery-grid--tre{grid-template-columns:repeat(3,1fr)}.gallery-grid--tre .gallery-item img{height:380px}}

/* Bokningsformularet (/appointments-for-make-suit-in-patong-tailor/). Formularet
   ligger i sidans innehall och hade ingen stil alls: Astras bla knapp och
   webblasarens egna falt. Nu ett kort i sajtens ton, tva falt per rad pa
   dator, ett per rad i mobil. Parningen gors pa falt-id sa innehallet i
   wp-admin inte behover roras. */
.contact-page-form{max-width:860px;margin:0 auto 56px;padding:clamp(28px,5vw,56px);
  background:var(--ndj-light);border-top:2px solid var(--ndj-gold)}
.contact-page-form>h2{margin:0 0 10px}
.contact-page-form>p{max-width:none;color:var(--ndj-gray);font-size:15px;margin:0 0 32px}
.contact-form{display:grid;grid-template-columns:1fr;column-gap:24px}
.contact-form label{display:block;margin:0 0 8px;font-family:var(--ndj-font-body);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-dark)}
.contact-form label strong{font-weight:500}
.contact-form input,.contact-form textarea{box-sizing:border-box;width:100%;margin:0 0 22px;
  padding:14px 16px;min-height:52px;font-family:var(--ndj-font-body);font-size:16px;line-height:1.4;
  color:var(--ndj-dark);background:var(--ndj-white);border:1px solid var(--ndj-border);border-radius:0;
  box-shadow:none;-webkit-appearance:none;appearance:none;
  transition:border-color 240ms var(--ndj-ease),box-shadow 240ms var(--ndj-ease)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#9a9da3;opacity:1}
.contact-form input:hover,.contact-form textarea:hover{border-color:#c9c9c9}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-color:var(--ndj-gold);
  box-shadow:0 0 0 3px rgba(206,193,138,.28)}
.contact-form input[type=date],.contact-form input[type=time]{background:var(--ndj-white)}
.contact-form input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.contact-form button[type=submit]{justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;margin-top:6px;padding:16px 40px;font-family:var(--ndj-font-heading);font-size:13px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ndj-btn-text);
  background:var(--ndj-gold);border:1px solid var(--ndj-gold);border-radius:0;box-shadow:none;cursor:pointer;
  transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.contact-form button[type=submit]:hover,.contact-form button[type=submit]:focus-visible{
  background:var(--ndj-dark);color:var(--ndj-gold);border-color:var(--ndj-dark)}
.contact-form .ndj-fel{border-color:#b3261e}
.contact-page-form .form-fallback{margin:22px 0 0;font-size:15px;color:var(--ndj-gray)}
@media(min-width:720px){
  #appointment-form{grid-template-columns:1fr 1fr}
  .contact-form label[for=ap-name]{grid-area:1/1}.contact-form #ap-name{grid-area:2/1}
  .contact-form label[for=ap-surname]{grid-area:1/2}.contact-form #ap-surname{grid-area:2/2}
  .contact-form label[for=ap-email]{grid-area:3/1}.contact-form #ap-email{grid-area:4/1}
  .contact-form label[for=ap-phone]{grid-area:3/2}.contact-form #ap-phone{grid-area:4/2}
  .contact-form label[for=ap-date]{grid-area:5/1}.contact-form #ap-date{grid-area:6/1}
  .contact-form label[for=ap-time]{grid-area:5/2}.contact-form #ap-time{grid-area:6/2}
  .contact-form label[for=ap-hotel]{grid-area:7/1/8/3}.contact-form #ap-hotel{grid-area:8/1/9/3}
  .contact-form label[for=ap-note]{grid-area:9/1/10/3}.contact-form #ap-note{grid-area:10/1/11/3}
  .contact-form button[type=submit]{grid-area:11/1}
}
@media(max-width:719px){.contact-form button[type=submit]{justify-self:stretch;padding:16px 20px;letter-spacing:.14em}}

/* Svavande kontaktknappar nere till hoger (inc/design/class-kontakt.php).
   Morka cirklar med guldikon, samma par som headern. WhatsApp storst och
   nederst. Under overlay och meny (100) sa den oppna menyn tacker dem. */
.ndj-kontakt{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  z-index:90;display:flex;flex-direction:column;align-items:center;gap:10px}
.ndj-kontakt__knapp{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--ndj-dark);color:var(--ndj-gold);border:1px solid rgba(206,193,138,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.18);text-decoration:none;
  transition:background 280ms var(--ndj-ease),color 280ms var(--ndj-ease),transform 280ms var(--ndj-ease)}
.ndj-kontakt__knapp--wa{width:56px;height:56px}
.ndj-kontakt__knapp:hover,.ndj-kontakt__knapp:focus-visible{background:var(--ndj-gold);color:var(--ndj-dark);transform:translateY(-2px)}
.ndj-kontakt__knapp:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:3px}
.entry-content .ndj-kontakt__knapp,.ndj-kontakt a.ndj-kontakt__knapp{border-bottom:1px solid rgba(206,193,138,.35)}
@media(max-width:719px){.ndj-kontakt{gap:8px}.ndj-kontakt__knapp{width:42px;height:42px}.ndj-kontakt__knapp--wa{width:52px;height:52px}}
@media print{.ndj-kontakt{display:none}}
@media(prefers-reduced-motion:reduce){.ndj-kontakt__knapp{transition:none}.ndj-kontakt__knapp:hover{transform:none}}

/* Samtalet: frivilligt exakt datum under "Roughly when", och tack-skarmens
   tva frivilliga val (WhatsApp, kalender). Konturknappar i guld, inte fyllda:
   de ar erbjudanden, inte nasta steg. */
.ndj-falt--datum input{max-width:220px;cursor:pointer}
.ndj-falt--datum input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
.ndj-rad__valfritt{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px;padding:0 6px}
.ndj-rad__alt-rad{display:flex;flex-wrap:wrap;gap:10px}
a.ndj-rad__alt,.entry-content a.ndj-rad__alt{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;
  border:1px solid var(--ndj-gold);border-radius:999px;color:var(--ndj-gold);background:transparent;
  font-family:var(--ndj-font-body);font-size:14px;font-weight:500;text-decoration:none;
  transition:background 280ms var(--ndj-ease),color 280ms var(--ndj-ease)}
a.ndj-rad__alt:hover,a.ndj-rad__alt:focus-visible{background:var(--ndj-gold);color:var(--ndj-dark)}

/* Tack-skarmen staplas och centreras. Den arvde radlayouten for korta steg
   (etiketter | fraga | fot pa en rad), och med valknapparna blev det tre
   spalter som krockade (Thomas, 2026-09-26). */
.ndj-rad__scen.ndj-rad--slut{flex-direction:column;align-items:center;text-align:center;gap:14px}
.ndj-rad__scen.ndj-rad--slut .ndj-rad__minne{justify-content:center}
.ndj-rad__scen.ndj-rad--slut .ndj-rad__fraga{white-space:normal;max-width:56ch;padding-left:0;margin:0}
.ndj-rad__scen.ndj-rad--slut .ndj-rad__valfritt{align-items:center;margin:0;padding:0}
.ndj-rad__scen.ndj-rad--slut .ndj-rad__alt-rad{justify-content:center}
.ndj-rad__scen.ndj-rad--slut .ndj-rad__fot{justify-content:center;padding:0}
.ndj-rad__mejl-lada{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.ndj-rad__mejl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%;max-width:460px}
.ndj-rad__mejl input[type=email]{flex:1 1 200px;min-height:44px;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--ndj-white);border:1px solid rgba(255,255,255,.2);
  font-family:var(--ndj-font-body);font-size:15px}
.ndj-rad__mejl input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.ndj-rad__mejl input[type=email]:focus{outline:none;border-color:var(--ndj-gold)}
button.ndj-rad__alt{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;cursor:pointer;
  border:1px solid var(--ndj-gold);border-radius:999px;color:var(--ndj-gold);background:transparent;
  font-family:var(--ndj-font-body);font-size:14px;font-weight:500;
  transition:background 280ms var(--ndj-ease),color 280ms var(--ndj-ease)}
button.ndj-rad__alt:hover,button.ndj-rad__alt:focus-visible{background:var(--ndj-gold);color:var(--ndj-dark)}
button.ndj-rad__alt[disabled]{opacity:.6;cursor:default}
.ndj-rad__mejl-besked{margin:0;min-height:1em;font-family:var(--ndj-font-body);font-size:13px;color:var(--ndj-gold)}
.ndj-rad__mejl-besked:empty{display:none}

/* Tyget under plaggnamnet i pristabellen (Prices i wp-admin). Gra och inte
   guld: guld pa vitt ar 1,81:1. */
.ndj-priser__rad .ndj-priser__tyg,.ndj-priser__enkla .ndj-priser__tyg{display:block;margin-top:6px;
  font-family:var(--ndj-font-body);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ndj-gray)}

/* Tygbockerna (inc/design/class-tygbok.php, assets/js/tygbok.js).
   Hyllan: omslaget star pa en varm, ljus yta som en bok pa en hylla, med den
   mjuka skuggan som redan finns i bilden. Under det de uppslagna sidorna som
   en diskret rad. Inget blinkar och inget ar ihopklamt: boken ar bilden,
   sidorna ar en inbjudan. */
.fabrics-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;max-width:1120px;margin:0 auto}
@media(max-width:960px){.fabrics-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}}
@media(max-width:600px){.fabrics-list{grid-template-columns:1fr;gap:48px}}
.fabric-card{display:flex;flex-direction:column;text-align:center}
.fabric-card h3{margin:22px 0 8px;font-size:clamp(20px,1.7vw,23px);line-height:1.3}
.fabric-card p{margin:0 auto;max-width:34ch;font-size:15px;line-height:1.6;color:var(--ndj-gray)}
.fabric-card h3 em{display:block;margin-top:4px;font-family:var(--ndj-font-body);font-style:normal;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-gray)}

.ndj-bok{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.ndj-bok__omslag,.entry-content a.ndj-bok__omslag{display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:1/1.08;padding:26px 0 22px;background:linear-gradient(180deg,#f7f5f0 0%,#efebe2 100%);
  border:0;text-decoration:none;overflow:hidden}
.ndj-bok__bild{display:block;width:auto;height:100%;max-width:78%;object-fit:contain;
  transition:transform 520ms var(--ndj-ease)}
.ndj-bok__omslag:hover .ndj-bok__bild,.ndj-bok__omslag:focus-visible .ndj-bok__bild{transform:translateY(-6px) rotate(-.6deg)}
.ndj-bok__omslag:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:4px}
.ndj-bok__sidor{display:flex;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.ndj-bok__sidor li{margin:0;padding:0}
.ndj-bok__sidor a,.entry-content .ndj-bok__sidor a{display:block;border:1px solid var(--ndj-border);text-decoration:none;
  transition:border-color 280ms var(--ndj-ease),transform 280ms var(--ndj-ease)}
.ndj-bok__sidor a:hover,.ndj-bok__sidor a:focus-visible{border-color:var(--ndj-gold);transform:translateY(-2px)}
.ndj-bok__tumme{display:block;height:46px;width:auto;max-width:92px;object-fit:cover}
.ndj-bok__oppna{margin:0}
.ndj-bok__oppna a,.entry-content .ndj-bok__oppna a{font-family:var(--ndj-font-body);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ndj-dark);text-decoration:none;
  border-bottom:1px solid var(--ndj-gold);padding-bottom:3px}
.ndj-bok__oppna a:hover{color:var(--ndj-gray)}

/* Bokvyn: mork helskarm, bilden i mitten, rakning och namn overst. */
.ndj-bokvy{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(12,12,13,.96);color:var(--ndj-white);display:none;flex-direction:column}
.ndj-bokvy[open]{display:flex}
.ndj-bokvy::backdrop{background:rgba(12,12,13,.96)}
html.ndj-bokvy-oppen{overflow:hidden}
.ndj-bokvy__topp{display:flex;align-items:center;gap:18px;padding:16px clamp(16px,3vw,32px)}
.ndj-bokvy__titel{margin:0;flex:1 1 auto;font-family:var(--ndj-font-heading);font-size:clamp(17px,1.6vw,21px);color:var(--ndj-white)}
.ndj-bokvy__rakna{margin:0;font-family:var(--ndj-font-body);font-size:13px;letter-spacing:.14em;color:var(--ndj-gold)}
.ndj-bokvy__stang{width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;
  color:var(--ndj-white);font-size:26px;line-height:1;cursor:pointer}
.ndj-bokvy__stang:hover,.ndj-bokvy__stang:focus-visible{border-color:var(--ndj-gold);color:var(--ndj-gold)}
.ndj-bokvy__scen{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:0 clamp(8px,6vw,84px)}
.ndj-bokvy__bild{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:0;transition:opacity 360ms var(--ndj-ease);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ndj-bokvy__bild.ar-klar{opacity:1}
.ndj-bokvy__pil{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(12,12,13,.55);color:var(--ndj-white);font-size:30px;line-height:1;cursor:pointer}
.ndj-bokvy__pil:hover,.ndj-bokvy__pil:focus-visible{border-color:var(--ndj-gold);color:var(--ndj-gold)}
.ndj-bokvy__pil[hidden]{display:none}
.ndj-bokvy__pil--forra{left:clamp(8px,2vw,24px)}
.ndj-bokvy__pil--nasta{right:clamp(8px,2vw,24px)}
.ndj-bokvy__text{margin:14px auto 0;padding:0 16px;max-width:70ch;text-align:center;font-family:var(--ndj-font-body);
  font-size:14px;line-height:1.5;color:rgba(255,255,255,.66)}
.ndj-bokvy__tummar{display:flex;justify-content:center;gap:10px;padding:14px 16px 20px}
.ndj-bokvy__tummar[hidden]{display:none}
.ndj-bokvy__tumme{padding:0;border:1px solid rgba(255,255,255,.2);background:none;cursor:pointer;opacity:.55;
  transition:opacity 240ms var(--ndj-ease),border-color 240ms var(--ndj-ease)}
.ndj-bokvy__tumme img{display:block;height:44px;width:auto}
.ndj-bokvy__tumme.ar-vald,.ndj-bokvy__tumme:hover{opacity:1;border-color:var(--ndj-gold)}
@media(max-width:600px){.ndj-bokvy__pil{width:44px;height:44px;font-size:26px}.ndj-bokvy__text{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ndj-bok__bild,.ndj-bokvy__bild{transition:none}}
/* Astras knappstil (bla bakgrund vid hover och fokus) far inte na bokvyn. */
.ndj-bokvy button.ndj-bokvy__stang,.ndj-bokvy button.ndj-bokvy__stang:hover,.ndj-bokvy button.ndj-bokvy__stang:focus,
.ndj-bokvy button.ndj-bokvy__pil,.ndj-bokvy button.ndj-bokvy__pil:hover,.ndj-bokvy button.ndj-bokvy__pil:focus{
  background:rgba(12,12,13,.55);box-shadow:none;padding:0;display:inline-flex;align-items:center;justify-content:center}
.ndj-bokvy button.ndj-bokvy__stang:focus-visible,.ndj-bokvy button.ndj-bokvy__pil:focus-visible,
.ndj-bokvy button.ndj-bokvy__stang:hover,.ndj-bokvy button.ndj-bokvy__pil:hover{border-color:var(--ndj-gold);color:var(--ndj-gold)}
.ndj-bokvy button:focus:not(:focus-visible){outline:none}
.ndj-bokvy button.ndj-bokvy__pil[hidden]{display:none}
.ndj-bokvy button.ndj-bokvy__tumme,.ndj-bokvy button.ndj-bokvy__tumme:hover,.ndj-bokvy button.ndj-bokvy__tumme:focus{background:none;padding:0}
/* Knapparna i bokvyn: exakta cirklar med tunn guldkant och ritade ikoner.
   Temats knappstil gjorde dem ovala och satte tecknen snett (Thomas, 2026-09-26). */
.ndj-bokvy button.ndj-bokvy__stang,.ndj-bokvy button.ndj-bokvy__pil{box-sizing:border-box;flex:0 0 auto;
  width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px;padding:0;margin:0;
  border-radius:50%;border:1px solid rgba(206,193,138,.45);color:var(--ndj-white);font-size:0;line-height:0;
  background:rgba(12,12,13,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background 260ms var(--ndj-ease),color 260ms var(--ndj-ease),border-color 260ms var(--ndj-ease)}
.ndj-bokvy button.ndj-bokvy__stang svg,.ndj-bokvy button.ndj-bokvy__pil svg{display:block;width:20px;height:20px}
.ndj-bokvy button.ndj-bokvy__stang:hover,.ndj-bokvy button.ndj-bokvy__pil:hover,
.ndj-bokvy button.ndj-bokvy__stang:focus-visible,.ndj-bokvy button.ndj-bokvy__pil:focus-visible{
  background:var(--ndj-gold);color:var(--ndj-dark);border-color:var(--ndj-gold)}
.ndj-bokvy button.ndj-bokvy__stang{width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px}
@media(max-width:600px){.ndj-bokvy button.ndj-bokvy__pil{width:42px;height:42px;min-width:42px;min-height:42px;max-width:42px;max-height:42px}}
/* Lang boktitel i mobil sköt stangknappen utanfor skarmen. Titeln far bryta,
   raknaren och knappen haller sin plats. */
.ndj-bokvy__topp{gap:12px}
.ndj-bokvy__titel{min-width:0;overflow-wrap:anywhere}
.ndj-bokvy__rakna{flex:0 0 auto;white-space:nowrap}
@media(max-width:600px){.ndj-bokvy__titel{font-size:15px;line-height:1.35}}
.ndj-bokvy:focus{outline:none}

/* Manga sidor: tre tummar, den tredje tonar ut mot vitt (Thomas idé,
   2026-09-26). Resten ar dolda, och lazy-bilder som ar dolda hamtas inte. */
.ndj-bok__sidor--fler li:nth-child(n+4){display:none}
.ndj-bok__sidor--fler{-webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 58%,transparent 100%)}
/* Bokvyns tummar rullar i sidled nar de ar manga. */
.ndj-bokvy__tummar{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
  max-width:min(100%,900px);margin:0 auto;padding-left:16px;padding-right:16px}
.ndj-bokvy__tummar::-webkit-scrollbar{display:none}
.ndj-bokvy__tummar>:first-child{margin-left:auto}
.ndj-bokvy__tummar>:last-child{margin-right:auto}
.ndj-bokvy__tumme{flex:0 0 auto}
.ndj-bokvy{overflow:hidden}
.ndj-bokvy__tummar{position:relative}
/* Staende sidor (Snow Berry) blev pyttesma i 46 px hojd. */
.ndj-bok__sidor--fler .ndj-bok__tumme{height:64px}
/* En rullbar rad i en flexkolumn far krympa (min-height blir 0), och tummarna
   trycktes till 18 px. Topp, text och tummar behaller sin hojd, scenen tar resten. */
.ndj-bokvy__topp,.ndj-bokvy__text,.ndj-bokvy__tummar{flex:0 0 auto}

/* Gen 2-klasserna i sidinnehall som saknade stil (2026-09-26). De ligger i
   8 sidors innehall, sa stilen ges har i stallet for att skriva om sidorna.
   Knapparna far samma form som .ndj-btn. */
.entry-content .btn-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.entry-content a.btn,.entry-content button.btn{display:inline-flex;cursor:pointer;border-radius:0;white-space:nowrap;align-items:center;justify-content:center;min-height:48px;padding:14px 30px;
  font-family:var(--ndj-font-heading);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;
  transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease),border-color 320ms var(--ndj-ease)}
.entry-content button.btn-gold,.entry-content a.btn-gold{background:var(--ndj-gold);color:var(--ndj-btn-text);border-color:var(--ndj-gold)}
.entry-content button.btn-gold:hover,.entry-content button.btn-gold:focus-visible,.entry-content a.btn-gold:hover,.entry-content a.btn-gold:focus-visible{background:var(--ndj-dark);color:var(--ndj-gold);border-color:var(--ndj-dark)}
.entry-content a.btn-outline{background:transparent;color:var(--ndj-dark);border-color:var(--ndj-dark)}
.entry-content a.btn-outline:hover,.entry-content a.btn-outline:focus-visible{background:var(--ndj-dark);color:var(--ndj-gold)}

.entry-content .two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.entry-content .two-col img{display:block;width:100%;height:auto}
@media(max-width:800px){.entry-content .two-col{grid-template-columns:1fr}}

.entry-content .dark-section{background:var(--ndj-dark);color:rgba(255,255,255,.78);padding:clamp(64px,8vw,104px) 24px;margin:48px 0 0}
.entry-content .dark-section h2{color:var(--ndj-white);margin-top:0}
.entry-content .dark-section p{color:rgba(255,255,255,.78);max-width:60ch;margin-left:auto;margin-right:auto}
.entry-content .text-center{text-align:center}
.entry-content .dark-section a.btn-gold:hover,.entry-content .dark-section a.btn-gold:focus-visible{background:var(--ndj-white);color:var(--ndj-dark);border-color:var(--ndj-white)}

/* Johnnys citat pa tygsidorna. Ersatter bilden med text over (parallax-quote),
   som var oläslig. Samma grepp som citaten pa Meet Johnny: serif, guldlinje. */
.entry-content .ndj-citat{max-width:760px;margin:clamp(56px,7vw,96px) auto;padding:0 24px;text-align:center}
.entry-content .ndj-citat blockquote{margin:0;padding:0;border:0;background:none}
.entry-content .ndj-citat blockquote::before{content:"";display:block;width:48px;height:1px;margin:0 auto 28px;background:var(--ndj-gold)}
.entry-content .ndj-citat blockquote p{margin:0;font-family:var(--ndj-font-heading);font-style:normal;
  font-size:clamp(24px,2.6vw,34px);line-height:1.35;color:var(--ndj-dark)}
.entry-content .ndj-citat cite{display:block;margin-top:20px;font-family:var(--ndj-font-body);font-style:normal;
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ndj-gray)}

/* Mattguiden (inc/site/class-matt.php, assets/js/mattguide.js).
   En lugn lista, inte ett formular: harfina linjer, serif for mattnamnen,
   siffran i en stor ren ruta till hoger. Filmen oppnas forst pa begaran. */
.ndj-mg{max-width:920px;margin:0 auto;padding:0 24px;scroll-margin-top:90px}
.ndj-mg__topp{text-align:center;margin-bottom:48px}
.ndj-mg__topp h2,.ndj-mg__kvitto h2{margin:8px 0 14px}
.ndj-mg__ingress{max-width:58ch;margin:0 auto;color:var(--ndj-gray);font-size:16px;line-height:1.65}
.ndj-mg__aterstallt{margin:18px 0 0;font-size:14px;color:var(--ndj-gray)}
.ndj-mg button.ndj-mg__lank{background:none;border:0;padding:0;color:var(--ndj-dark);font:inherit;text-decoration:underline;
  text-decoration-color:var(--ndj-gold);text-underline-offset:3px;cursor:pointer}
.ndj-mg__steg{border-top:1px solid var(--ndj-border);padding:40px 0 44px}
.ndj-mg__stegtopp{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}
.ndj-mg__nr{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--ndj-gold);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--ndj-font-heading);font-size:15px;color:var(--ndj-dark)}
.ndj-mg__rubrik{margin:2px 0 4px;font-size:clamp(21px,2vw,25px)}
.ndj-mg__text{margin:0;color:var(--ndj-gray);font-size:15px}
.ndj-mg__tom{text-align:center;color:var(--ndj-gray);font-size:15px;padding:8px 0 40px}

/* Brickor: vem, plagg, enhet, stil. */
.ndj-mg__seg{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px 52px}
.ndj-mg button.ndj-mg__chip{min-height:44px;padding:10px 20px;border:1px solid var(--ndj-border);border-radius:999px;background:var(--ndj-white);
  color:var(--ndj-dark);font-family:var(--ndj-font-body);font-size:15px;font-weight:500;line-height:1;cursor:pointer;box-shadow:none;
  transition:border-color 240ms var(--ndj-ease),background 240ms var(--ndj-ease),color 240ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__chip:hover{border-color:var(--ndj-dark);background:var(--ndj-white);color:var(--ndj-dark)}
.ndj-mg button.ndj-mg__chip[aria-pressed="true"]{background:var(--ndj-dark);border-color:var(--ndj-dark);color:var(--ndj-white)}
.ndj-mg button.ndj-mg__chip:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:2px}
.ndj-mg__seg--plagg button.ndj-mg__chip{min-width:120px;min-height:52px;font-family:var(--ndj-font-heading);font-size:17px;font-weight:700}
.ndj-mg__seg--enhet{margin:0}
.ndj-mg__seg--enhet button.ndj-mg__chip{min-height:36px;padding:6px 16px;font-size:13px}

.ndj-mg__verktyg{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 10px 52px}
.ndj-mg__framsteg{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-gray);font-variant-numeric:tabular-nums}
.ndj-mg__stapel{height:2px;background:var(--ndj-border);margin:0 0 8px 52px}
.ndj-mg__stapel span{display:block;height:100%;background:var(--ndj-gold);transition:width 420ms var(--ndj-ease)}

/* Mattraderna. */
.ndj-mg__lista{list-style:none;margin:0 0 0 52px;padding:0}
.ndj-mg__rad{display:grid;grid-template-columns:1fr 150px;gap:6px 28px;align-items:center;margin:0;padding:22px 0;
  border-bottom:1px solid var(--ndj-border)}
.ndj-mg__namnrad{display:flex;align-items:baseline;gap:12px}
.ndj-mg__index{font-family:var(--ndj-font-body);font-size:12px;letter-spacing:.1em;color:var(--ndj-gold);font-variant-numeric:tabular-nums;min-width:20px}
.ndj-mg__rad.ar-ifylld .ndj-mg__index{color:var(--ndj-dark)}
.ndj-mg__namn{font-family:var(--ndj-font-heading);font-size:19px;color:var(--ndj-dark);cursor:pointer}
.ndj-mg__rad.ar-ifylld .ndj-mg__namn::after{content:"";display:inline-block;width:6px;height:6px;margin-left:10px;border-radius:50%;
  background:var(--ndj-gold);vertical-align:middle}
.ndj-mg__hur{margin:4px 0 10px 32px;font-size:14px;line-height:1.55;color:var(--ndj-gray);max-width:52ch}
.ndj-mg button.ndj-mg__spela{display:inline-flex;align-items:center;gap:8px;margin-left:32px;padding:6px 14px 6px 10px;min-height:34px;
  border:1px solid var(--ndj-gold);border-radius:999px;background:transparent;color:var(--ndj-dark);font-family:var(--ndj-font-body);
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:none;
  transition:background 240ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__spela svg{color:var(--ndj-gold)}
.ndj-mg button.ndj-mg__spela:hover,.ndj-mg button.ndj-mg__spela:focus-visible{background:var(--ndj-gold);color:var(--ndj-dark)}
.ndj-mg button.ndj-mg__spela:hover svg{color:var(--ndj-dark)}
.ndj-mg__falt{position:relative;grid-column:2;grid-row:1}
.ndj-mg__falt input{box-sizing:border-box;width:100%;height:58px;padding:0 44px 0 16px;border:1px solid var(--ndj-border);border-radius:0;
  background:var(--ndj-white);font-family:var(--ndj-font-heading);font-size:24px;color:var(--ndj-dark);text-align:right;
  font-variant-numeric:tabular-nums;box-shadow:none;transition:border-color 240ms var(--ndj-ease)}
.ndj-mg__falt input::placeholder{color:#c9c9c9}
.ndj-mg__falt input:focus{outline:0;border-color:var(--ndj-gold);box-shadow:0 0 0 3px rgba(206,193,138,.25)}
.ndj-mg__enhet{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--ndj-gray);pointer-events:none}
.ndj-mg__varning{grid-column:1/-1;margin:0 0 0 32px;font-size:13px;color:#8a5a00}
.ndj-mg__varning:empty{display:none}
.ndj-mg__rad.ar-saknas .ndj-mg__falt input{border-color:#b3261e}

/* Stil. */
.ndj-mg__stil{margin:0 0 12px 52px;border:1px solid var(--ndj-border)}
.ndj-mg__stil summary{padding:16px 20px;cursor:pointer;font-family:var(--ndj-font-heading);font-size:18px;color:var(--ndj-dark);list-style:none;
  display:flex;align-items:center;gap:12px}
.ndj-mg__stil summary::-webkit-details-marker{display:none}
.ndj-mg__stil summary::after{content:"+";margin-left:auto;font-family:var(--ndj-font-body);font-size:22px;color:var(--ndj-gold)}
.ndj-mg__stil[open] summary::after{content:"\2212"}
.ndj-mg__valda{font-family:var(--ndj-font-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-mg__stilrad{padding:4px 20px 14px}
.ndj-mg__stilnamn{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-mg__stilrad .ndj-mg__seg{margin:0}
.ndj-mg__stilrad button.ndj-mg__chip{min-height:38px;padding:8px 16px;font-size:14px}

/* Om dig. */
.ndj-mg__kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin-left:52px}
.ndj-mg__kfalt{display:flex;flex-direction:column;gap:8px;margin:0}
.ndj-mg__kfalt--hel{grid-column:1/-1}
.ndj-mg__kfalt span{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-dark)}
.ndj-mg__kfalt input,.ndj-mg__kfalt textarea{box-sizing:border-box;width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--ndj-border);
  border-radius:0;background:var(--ndj-white);font-family:var(--ndj-font-body);font-size:16px;color:var(--ndj-dark);box-shadow:none}
.ndj-mg__kfalt textarea{min-height:120px;resize:vertical}
.ndj-mg__kfalt input:focus,.ndj-mg__kfalt textarea:focus{outline:0;border-color:var(--ndj-gold);box-shadow:0 0 0 3px rgba(206,193,138,.25)}
.ndj-mg__fot{margin:32px 0 0 52px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ndj-mg button.ndj-mg__skicka{min-height:56px;padding:16px 44px;border:1px solid var(--ndj-gold);border-radius:0;background:var(--ndj-gold);
  color:var(--ndj-btn-text);font-family:var(--ndj-font-heading);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;box-shadow:none;transition:background 320ms var(--ndj-ease),color 320ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__skicka:hover,.ndj-mg button.ndj-mg__skicka:focus-visible{background:var(--ndj-dark);border-color:var(--ndj-dark);color:var(--ndj-gold)}
.ndj-mg button.ndj-mg__skicka[disabled]{opacity:.6;cursor:default}
.ndj-mg__besked{margin:0;font-size:14px;color:#8a1f17}
.ndj-mg__besked:empty{display:none}

/* Kvittot. */
.ndj-mg__kvitto{text-align:center;padding:56px 24px;border-top:2px solid var(--ndj-gold);background:var(--ndj-light);outline:0}
.ndj-mg__kundnrtext{margin:24px 0 6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-mg__kundnr{margin:0 0 22px;font-family:var(--ndj-font-heading);font-size:clamp(28px,4vw,40px);letter-spacing:.06em;color:var(--ndj-dark)}
.entry-content a.ndj-mg__alt,a.ndj-mg__alt{display:inline-flex;align-items:center;min-height:48px;margin-top:22px;padding:12px 26px;
  border:1px solid var(--ndj-dark);color:var(--ndj-dark);text-decoration:none;font-size:14px;font-weight:500}
a.ndj-mg__alt:hover{background:var(--ndj-dark);color:var(--ndj-gold)}

/* Filmrutan. */
.ndj-mg-film{width:min(92vw,760px);max-width:none;padding:0;border:0;background:var(--ndj-dark);color:var(--ndj-white);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ndj-mg-film::backdrop{background:rgba(12,12,13,.82)}
.ndj-mg-film:focus{outline:none}
.ndj-mg-film__topp{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 22px}
.ndj-mg-film__titel{margin:0;flex:1;font-family:var(--ndj-font-heading);font-size:20px;color:var(--ndj-white)}
.ndj-mg-film button.ndj-mg-film__stang{width:44px;height:44px;min-width:44px;padding:0;border:1px solid rgba(206,193,138,.45);border-radius:50%;
  background:transparent;color:var(--ndj-white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none}
.ndj-mg-film button.ndj-mg-film__stang:hover{background:var(--ndj-gold);color:var(--ndj-dark)}
.ndj-mg-film__ram{position:relative;aspect-ratio:16/9;background:#000}
.ndj-mg-film__ram iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ndj-mg-film__hur{margin:0;padding:16px 22px 22px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}

@media(max-width:700px){
  .ndj-mg{padding:0 16px}
  .ndj-mg__seg,.ndj-mg__verktyg,.ndj-mg__stapel,.ndj-mg__lista,.ndj-mg__stil,.ndj-mg__kontakt,.ndj-mg__fot{margin-left:0}
  .ndj-mg__rad{grid-template-columns:1fr 112px;gap:6px 14px}
  .ndj-mg__hur,.ndj-mg__varning{margin-left:0}
  .ndj-mg button.ndj-mg__spela{margin-left:0}
  .ndj-mg__falt{align-self:start}
  .ndj-mg__falt input{height:52px;font-size:21px}
  .ndj-mg__kontakt{grid-template-columns:1fr}
  .ndj-mg__seg--plagg button.ndj-mg__chip{min-width:0;flex:1 1 40%}
}

/* Mattguiden, steg 1 i ny form (Thomas 2026-09-26: "100 ganger mer elegant").
   Flikar i serif med guldstreck, plaggen som kort med ett riktigt tyg ur
   sortimentet. Valt kort: guldram och en liten guldbock. */
.ndj-mg__topp .ndj-eyebrow{display:block;text-align:center;margin-left:auto;margin-right:auto}
.ndj-mg__flikar{display:flex;gap:36px;margin:0 0 28px 52px;border-bottom:1px solid var(--ndj-border)}
.ndj-mg button.ndj-mg__flik{position:relative;padding:0 0 14px;margin:0 0 -1px;border:0;border-bottom:1px solid transparent;border-radius:0;
  background:none;box-shadow:none;cursor:pointer;font-family:var(--ndj-font-heading);font-size:20px;font-weight:700;color:var(--ndj-gray);
  transition:color 240ms var(--ndj-ease),border-color 240ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__flik:hover{color:var(--ndj-dark);background:none}
.ndj-mg button.ndj-mg__flik[aria-pressed="true"]{color:var(--ndj-dark);border-bottom-color:var(--ndj-gold)}
.ndj-mg button.ndj-mg__flik:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:4px}

.ndj-mg__kort{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-left:52px}
.ndj-mg button.ndj-mg__plagg{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;margin:0;border:0;border-radius:0;
  background:none;box-shadow:none;cursor:pointer;text-align:left;color:var(--ndj-dark)}
.ndj-mg button.ndj-mg__plagg:hover{background:none;color:var(--ndj-dark)}
.ndj-mg__tyg{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#eee;
  outline:1px solid transparent;outline-offset:5px;transition:outline-color 280ms var(--ndj-ease)}
.ndj-mg__tyg img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 900ms var(--ndj-ease),filter 400ms var(--ndj-ease);filter:saturate(.92)}
.ndj-mg button.ndj-mg__plagg:hover .ndj-mg__tyg img{transform:scale(1.07)}
.ndj-mg__plagg.ar-vald .ndj-mg__tyg{outline-color:var(--ndj-gold)}
.ndj-mg__plagg.ar-vald .ndj-mg__tyg img{filter:saturate(1)}
.ndj-mg__bock{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);opacity:0;transform:scale(.8);
  transition:opacity 260ms var(--ndj-ease),transform 260ms var(--ndj-ease)}
.ndj-mg__bock::after{content:"";position:absolute;left:10px;top:6px;width:6px;height:11px;border:solid var(--ndj-dark);
  border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.ndj-mg__plagg.ar-vald .ndj-mg__bock{opacity:1;transform:scale(1);background:var(--ndj-gold);border-color:var(--ndj-gold)}
.ndj-mg__plaggnamn{display:block;margin-top:16px;font-family:var(--ndj-font-heading);font-size:20px;line-height:1.2}
.ndj-mg__antal{display:block;margin-top:4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-mg button.ndj-mg__plagg:focus-visible{outline:none}
.ndj-mg button.ndj-mg__plagg:focus-visible .ndj-mg__tyg{outline:2px solid var(--ndj-gold)}

@media(max-width:860px){.ndj-mg__kort{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ndj-mg__flikar,.ndj-mg__kort{margin-left:0}.ndj-mg__kort{gap:14px}.ndj-mg__plaggnamn{font-size:18px}}

/* Filmerna i sidans avsnitt ([ndj_mattfilmer]). */
.ndj-mf{margin:36px 0 0;padding:26px 0 0;border-top:1px solid var(--ndj-border)}
.ndj-sec--dark .ndj-mf{border-top-color:rgba(255,255,255,.14)}
.ndj-mf__rubrik{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ndj-gray)}
.ndj-mf__lista{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.ndj-mf__lista li{margin:0;padding:0}
.entry-content button.ndj-mf__film,button.ndj-mf__film{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 16px 8px 13px;
  border:1px solid var(--ndj-border);border-radius:999px;background:var(--ndj-white);box-shadow:none;cursor:pointer;
  font-family:var(--ndj-font-body);font-size:14px;font-weight:500;color:var(--ndj-dark);
  transition:border-color 240ms var(--ndj-ease),background 240ms var(--ndj-ease)}
button.ndj-mf__film svg{color:var(--ndj-gold)}
button.ndj-mf__film small{font-size:11px;letter-spacing:.08em;color:var(--ndj-gray)}
.entry-content button.ndj-mf__film:hover,button.ndj-mf__film:hover,button.ndj-mf__film:focus-visible{border-color:var(--ndj-gold);background:var(--ndj-white);color:var(--ndj-dark)}
.ndj-mf__start{margin-top:4px}
.ndj-mg-lank{margin:28px 0 0;text-align:center}
.entry-content .ndj-mf__lista,.ndj-mf__lista{margin-left:0;padding-left:0}

/* Stilvalen som bildkort med Johnnys teckningar (renritade 2026-09-26 ur
   livesajtens affischer: rubriker, vattenmarken och ramar borttagna). */
.ndj-mg__stilval{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.ndj-mg button.ndj-mg__stilkort{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:12px 10px 14px;
  border:1px solid var(--ndj-border);border-radius:0;background:#fbfaf7;box-shadow:none;cursor:pointer;color:var(--ndj-dark);
  font-family:var(--ndj-font-body);font-size:13px;font-weight:500;line-height:1.25;text-align:center;
  transition:border-color 240ms var(--ndj-ease),background 240ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__stilkort img{display:block;width:100%;max-width:96px;height:auto;aspect-ratio:1;opacity:.85;
  transition:opacity 240ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__stilkort:hover{border-color:var(--ndj-dark);background:var(--ndj-white);color:var(--ndj-dark)}
.ndj-mg button.ndj-mg__stilkort:hover img{opacity:1}
.ndj-mg button.ndj-mg__stilkort[aria-pressed="true"]{border-color:var(--ndj-gold);background:var(--ndj-white);
  box-shadow:inset 0 0 0 1px var(--ndj-gold)}
.ndj-mg button.ndj-mg__stilkort[aria-pressed="true"] img{opacity:1}
.ndj-mg button.ndj-mg__stilkort:focus-visible{outline:2px solid var(--ndj-gold);outline-offset:2px}
.ndj-mg__stilrad{padding:8px 20px 22px}
@media(max-width:700px){.ndj-mg__stilval{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ndj-mg button.ndj-mg__stilkort{padding:10px 6px 12px;font-size:12px}}
.ndj-sec--guide{padding-top:8px}
.ndj-mg[data-utan-rubrik] .ndj-mg__topp{margin-bottom:8px}
.ndj-mg[data-utan-rubrik] .ndj-mg__steg:first-of-type{border-top:0;padding-top:16px}
/* Plaggkorten: linjeteckning i stallet for tyg (Thomas 2026-09-26: tygerna forvirrade). */
.ndj-mg__tyg{aspect-ratio:1/1;background:#fbfaf7;border:1px solid var(--ndj-border)}
.ndj-mg__tyg img{object-fit:contain;padding:14%;box-sizing:border-box;transform:none;filter:none;opacity:.88;transition:opacity 240ms var(--ndj-ease),transform 600ms var(--ndj-ease)}
.ndj-mg button.ndj-mg__plagg:hover .ndj-mg__tyg img{transform:translateY(-3px);opacity:1}
.ndj-mg__plagg.ar-vald .ndj-mg__tyg{background:var(--ndj-white);border-color:var(--ndj-gold)}
.ndj-mg__plagg.ar-vald .ndj-mg__tyg img{opacity:1;filter:none}
/* Filmen falls ut pa plats i stallet for en ruta ovanpa sidan (Thomas 2026-09-26). */
.ndj-mg-inl{grid-column:1/-1;margin:8px 0 6px 32px;max-width:520px;animation:ndj-mg-in 360ms var(--ndj-ease)}
.ndj-mf .ndj-mg-inl{margin:0 0 22px}
.ndj-mg-inl__ram{position:relative;aspect-ratio:16/9;background:#000;box-shadow:0 12px 32px rgba(0,0,0,.12)}
.ndj-mg-inl__ram iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@keyframes ndj-mg-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ndj-mg button.ndj-mg__spela.ar-oppen,button.ndj-mf__film.ar-oppen{background:var(--ndj-gold);border-color:var(--ndj-gold);color:var(--ndj-dark)}
.ndj-mg button.ndj-mg__spela.ar-oppen svg,button.ndj-mf__film.ar-oppen svg{color:var(--ndj-dark)}
@media(max-width:700px){.ndj-mg-inl{margin-left:0;max-width:none}}
@media(prefers-reduced-motion:reduce){.ndj-mg-inl{animation:none}}

/* =========================================================================
   20. INGA KNAPPAR (Thomas 2026-10-01: "bort med knapp layout, in med lyxig
   stilig textlank"). Alla knappvarianter pa sajten blir textlankar med en
   linje under: .ndj-btn i var egen kod och gen 2-klasserna .btn i sidornas
   innehall, aven formularens skicka-knapp.

   Hover: linjen drar sig undan at hoger medan en guldlinje sveper in fran
   vanster. Tva bakgrundslinjer i stallet for ::after, sa att det fungerar
   pa <button> och pa lankar som bryter over tva rader.

   !important ar medvetet. Knappstilen finns i ett tiotal regler med olika
   specificitet (morka sektioner, entry-content, panelen). Det har blocket
   ska vinna over alla, och ar det enda stallet att andra knapputseendet.
   ========================================================================= */
.ndj-btn,
.entry-content a.btn,
.entry-content button.btn{
  display:inline-block!important;min-height:0!important;padding:10px 0 9px!important;
  background:
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) 0 100% / 0 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100% / 100% 1px no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  color:var(--ndj-dark)!important;
  font-family:var(--ndj-font-heading)!important;font-size:13px!important;font-weight:700!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;text-decoration:none!important;
  white-space:normal!important;cursor:pointer;
  transition:background-size 650ms var(--ndj-ease),color 320ms var(--ndj-ease)!important;
}
.ndj-btn:hover,.ndj-btn:focus-visible,
.entry-content a.btn:hover,.entry-content a.btn:focus-visible,
.entry-content button.btn:hover,.entry-content button.btn:focus-visible{
  background-size:100% 1px,0 1px!important;color:var(--ndj-dark)!important;
}

/* Huvudvalet (tidigare guldknappen) far guldlinjen fran borjan och sveper
   till mork, sa att det fortfarande syns vilket val som ar det forsta. */
.ndj-btn--gold,
.entry-content a.btn-gold,
.entry-content button.btn-gold{
  background:
    linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) 100% 100% / 100% 2px no-repeat!important;
}
.ndj-btn--gold:hover,.ndj-btn--gold:focus-visible,
.entry-content a.btn-gold:hover,.entry-content a.btn-gold:focus-visible,
.entry-content button.btn-gold:hover,.entry-content button.btn-gold:focus-visible{
  background-size:100% 1px,0 2px!important;
}

/* Pa morkt och pa hero: vit text, och guld vid hover. */
.ndj-sec--dark .ndj-btn,.ndj-hero .ndj-btn,.ndj-par .ndj-btn,.ndj-btn--ljus,
.entry-content .dark-section a.btn,.entry-content .dark-section button.btn,
.entry-content .ndj-sec--dark a.btn{color:var(--ndj-white)!important}
.ndj-sec--dark .ndj-btn:hover,.ndj-hero .ndj-btn:hover,.ndj-par .ndj-btn:hover,.ndj-btn--ljus:hover,
.ndj-sec--dark .ndj-btn:focus-visible,.ndj-hero .ndj-btn:focus-visible,.ndj-btn--ljus:focus-visible,
.entry-content .dark-section a.btn:hover,.entry-content .dark-section a.btn:focus-visible,
.entry-content .ndj-sec--dark a.btn:hover{color:var(--ndj-gold)!important}

/* Huvudvalet pa morkt: texten blir guld vid hover, sa linjen som sveper in
   maste vara vit, annars sveper guld over guld och inget syns. */
.ndj-sec--dark .ndj-btn--gold,.ndj-hero .ndj-btn--gold,.ndj-par .ndj-btn--gold,
.entry-content .dark-section a.btn-gold,.entry-content .dark-section button.btn-gold{
  background-image:linear-gradient(var(--ndj-white),var(--ndj-white)),linear-gradient(var(--ndj-gold),var(--ndj-gold))!important}

/* Raderna med flera val: textlankar behover mer luft an knappar. */
.ndj-knappar,.entry-content .btn-group{gap:14px 44px!important;align-items:center}
.ndj-panel__knappar{gap:10px 32px}
.ndj-panel__knappar .ndj-btn{flex:0 0 auto!important;text-align:left}

/* Samma svep pa de vanliga textlankarna, sa att allt beter sig lika. */
.ndj-tlink,.entry-content a.ndj-tlink{border-bottom:0!important;text-decoration:none!important;padding-bottom:5px;
  background:
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) 0 100% / 0 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100% / 100% 1px no-repeat;
  transition:background-size 650ms var(--ndj-ease),color 320ms var(--ndj-ease)}
.ndj-tlink:hover,.ndj-tlink:focus-visible{background-size:100% 1px,0 1px}

@media(prefers-reduced-motion:reduce){
  .ndj-btn,.entry-content a.btn,.entry-content button.btn,.ndj-tlink{transition:none!important}
}

/* 21. Sma guldsiffror pa ljus botten. Guldet #cec18a har kontrast 1,8 mot
   vitt (Lighthouse 2026-10-01), kravet for liten text ar 4,5. En morkare ton
   av samma guld, 5,1 mot vitt och 4,7 mot ljusgratt. Pa morkt galler guldet. */
:root{--ndj-guld-text:#7d6e30}
.ndj-niva__nr,.ndj-steg__nr{color:var(--ndj-guld-text);border-color:var(--ndj-guld-text)}
.ndj-sec--dark .ndj-niva__nr,.ndj-sec--dark .ndj-steg__nr{color:var(--ndj-gold);border-color:var(--ndj-gold)}

/* 22. Kontaktkortet pa /contact-us/ (inc/site/class-kontaktform.php). Samma
   kort som bokningsformularet, men i en spalt bredvid kontaktuppgifterna:
   etikett ovanfor falt, ett falt per rad. Spalterna linjeras i toppen, inte
   centrerat, sa uppgifterna inte hamnar mitt pa kortets hojd. */
.entry-content .two-col:has(#contact-form){align-items:start}
.two-col .contact-page-form{max-width:none;margin:0}
.contact-page-form>h3{margin:0 0 10px}
.contact-page-form>h3+p{max-width:none;color:var(--ndj-gray);font-size:15px;margin:0 0 32px!important}
.contact-form .cf-honung{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form input:-webkit-autofill,.contact-form textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--ndj-white) inset;-webkit-text-fill-color:var(--ndj-dark)}
.contact-form button[disabled]{opacity:.55;cursor:wait}
.cf-status{margin:0;padding:18px 20px;font-size:16px;line-height:1.55;background:var(--ndj-white);
  border-left:2px solid var(--ndj-gold);color:var(--ndj-dark)}
.cf-status--fel{border-left-color:#b3261e;margin-top:22px}

/* 23. Samtalet i mobilen (Thomas i Brave pa Android, 2026-10-02).
   a) Den svavande panelen var hogre an den synliga skarmen: 100vh raknar
      utan webblasarens verktygsfalt, sa Send hamnade under det och gick inte
      att na. dvh ar den synliga hojden. vh star kvar for aldre webblasare.
   b) Kontaktknapparna nere till hoger lag over panelen och tackte faltet.
      De doljs medan samtalet ar oppet och svavar, och kommer tillbaka nar
      det stangs eller falls ihop.
   c) Datumfaltets kalenderikon ritades svart pa svart. color-scheme dark ger
      ljus ikon och mork kalender, och autofyll far panelens morka ton. */
.ndj-rad.ar-svavar{max-height:calc(100dvh - var(--ndj-svav-topp,12px) - 16px);-webkit-overflow-scrolling:touch}
body:has(.ndj-rad.ar-svavar:not(.ar-hopfalld) .ndj-rad__matare) .ndj-kontakt{opacity:0;visibility:hidden;pointer-events:none}
.ndj-rad .ndj-falt input{color-scheme:dark}
.ndj-rad .ndj-falt--datum input{max-width:none}
.ndj-rad .ndj-falt--datum input::-webkit-calendar-picker-indicator{opacity:.85}
.ndj-rad .ndj-falt input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #2a2a2c inset;-webkit-text-fill-color:var(--ndj-white);caret-color:var(--ndj-white)}

/* 22. Textlanken pa bildbanden (.ndj-par), t.ex. "How ordering from home works"
   pa startsidan. Den arvde den morka fargen och forsvann mot bilden (Thomas
   2026-10-04). Ljus som rubriken, och vid hover: guldlinjen sveper in, texten
   blir guld och pilen glider at hoger. */
.ndj-par .ndj-tlink,.entry-content .ndj-par a.ndj-tlink{color:var(--ndj-white);
  background:
    linear-gradient(var(--ndj-gold),var(--ndj-gold)) 0 100% / 0 1px no-repeat,
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 100% 100% / 100% 1px no-repeat}
.ndj-par .ndj-tlink::after{content:"\2192";display:inline-block;margin-left:.6em;
  transform:translateX(0);opacity:.75;
  transition:transform 450ms var(--ndj-ease),opacity 320ms var(--ndj-ease)}
.ndj-par .ndj-tlink:hover,.ndj-par .ndj-tlink:focus-visible,.entry-content .ndj-par a.ndj-tlink:hover,.entry-content .ndj-par a.ndj-tlink:focus-visible{color:var(--ndj-gold);
  background-size:100% 1px,0 1px}
.ndj-par .ndj-tlink:hover::after,.ndj-par .ndj-tlink:focus-visible::after{transform:translateX(6px);opacity:1}
@media(prefers-reduced-motion:reduce){.ndj-par .ndj-tlink::after{transition:none}}