/*
 * Northcoms produktflate.
 *
 * Egne tokens, scopet til .ps-pp, saa de ikke slaass med Flatsome. Temaet eier
 * fortsatt header, meny og bunn; dette eier alt mellom dem.
 *
 * DESIGNET FOELGER DATAENE. Maalt paa 3 992 publiserte produkter: 98 % har
 * serie, 57 % har datablad, 30 % har bilde, 27 % har broedtekst. Layouten er
 * derfor typografisk foerst - identiteten baerer sida - og bildet er et
 * tillegg. Uten bilde faller toppen sammen til én kolonne i full bredde.
 * Ingen graa plassholderfirkant: et tomt felt er verre enn ingen felt.
 */

.ps-pp {
  /* Farger. Blaatonene foelger Northcoms egen, noeytralene er kjoelige. */
  --pp-blaa-900: #0b2740;
  --pp-blaa-700: #12507f;
  --pp-blaa-500: #1d7ac0;
  --pp-blaa-050: #eef5fb;

  --pp-grunn:    #ffffff;
  --pp-flate:    #f7f9fb;
  --pp-kant:     #dde5ec;
  --pp-kant-my:  #eef2f6;

  --pp-tekst-1:  #0f1e2b;
  --pp-tekst-2:  #52657a;
  --pp-tekst-3:  #7d8fa1;

  /* Typografi. En skala, ikke tilfeldige tall. */
  --pp-f-xs:   12px;
  --pp-f-sm:   14px;
  --pp-f-base: 16px;
  --pp-f-lg:   19px;
  --pp-f-xl:   24px;
  --pp-f-2xl:  32px;
  --pp-f-3xl:  42px;

  --pp-r-sm: 6px;
  --pp-r:    10px;
  --pp-r-lg: 16px;

  --pp-luft:  clamp(1rem, 3vw, 2.5rem);
  --pp-maks:  1180px;

  max-width: var(--pp-maks);
  margin: 0 auto;
  padding: 0 var(--pp-luft) clamp(2rem, 6vw, 4.5rem);
  color: var(--pp-tekst-1);
  font-size: var(--pp-f-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Brodsmuler ──────────────────────────────────────────────────────────── */
.ps-pp__sti {
  padding: clamp(1rem, 3vw, 2rem) 0 0;
  font-size: var(--pp-f-sm);
  color: var(--pp-tekst-3);
}
.ps-pp__sti a { color: var(--pp-tekst-2); text-decoration: none; }
.ps-pp__sti a:hover { color: var(--pp-blaa-700); text-decoration: underline; }
.ps-pp__sti-skille { margin: 0 .45rem; color: var(--pp-tekst-3); }

/* ── Toppen ──────────────────────────────────────────────────────────────── */
.ps-pp__topp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--pp-kant-my);
}

/* Uten bilde: én kolonne, og teksten faar en lesbar maksbredde i stedet for
   aa strekke seg over hele flata. Sju av ti produkter havner her. */
.ps-pp__topp--uten-bilde { grid-template-columns: minmax(0, 1fr); }
.ps-pp__topp--uten-bilde .ps-pp__identitet { max-width: 68ch; }

.ps-pp__identitet { min-width: 0; }

.ps-pp__oeyebryn {
  margin: 0 0 .65rem;
  font-size: var(--pp-f-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pp-blaa-700);
}

.ps-pp__navn {
  margin: 0 0 1rem;
  font-size: clamp(var(--pp-f-xl), 4.5vw, var(--pp-f-3xl));
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--pp-blaa-900);
}

/* Varenummeret er identiteten for en B2B-kunde - det er det de bestiller paa.
   Derfor eget felt med etikett, ikke en grå bisetning nederst. */
.ps-pp__varenr {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 1.4rem;
  padding: .4rem .75rem;
  background: var(--pp-flate);
  border: 1px solid var(--pp-kant);
  border-radius: var(--pp-r-sm);
}
.ps-pp__varenr-merke {
  font-size: var(--pp-f-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pp-tekst-3);
}
.ps-pp__varenr-verdi {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--pp-f-sm);
  font-weight: 600;
  color: var(--pp-tekst-1);
  word-break: break-word;
}

.ps-pp__ingress {
  margin: 0 0 1.6rem;
  font-size: var(--pp-f-lg);
  line-height: 1.55;
  color: var(--pp-tekst-2);
}
.ps-pp__ingress p:last-child { margin-bottom: 0; }

/* ── Bildet ──────────────────────────────────────────────────────────────── */
.ps-pp__bilde { margin: 0; min-width: 0; }
.ps-pp__bilde-hoved {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pp-kant-my);
  border-radius: var(--pp-r-lg);
  background: var(--pp-grunn);
}
.ps-pp__galleri {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}
.ps-pp__galleri li { width: 72px; }
.ps-pp__galleri img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pp-kant-my);
  border-radius: var(--pp-r-sm);
}

/* ── Fanene ──────────────────────────────────────────────────────────────── */
.ps-pp__faner { padding-top: clamp(1.5rem, 4vw, 2.75rem); }
.ps-pp__faner .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 1.5rem;
  padding: 0 0 .1rem;
  list-style: none;
  border-bottom: 1px solid var(--pp-kant);
}
.ps-pp__faner .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; }
.ps-pp__faner .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .65rem 1.1rem;
  font-size: var(--pp-f-sm);
  font-weight: 600;
  color: var(--pp-tekst-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ps-pp__faner .woocommerce-tabs ul.tabs li a:hover { color: var(--pp-blaa-700); }
.ps-pp__faner .woocommerce-tabs ul.tabs li.active a {
  color: var(--pp-blaa-900);
  border-bottom-color: var(--pp-blaa-500);
}
.ps-pp__faner .woocommerce-Tabs-panel { font-size: var(--pp-f-base); }
.ps-pp__faner .woocommerce-Tabs-panel h2 {
  font-size: var(--pp-f-xl);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pp-blaa-900);
}
.ps-pp__faner table { width: 100%; border-collapse: collapse; }
.ps-pp__faner table th,
.ps-pp__faner table td {
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--pp-kant-my);
  vertical-align: top;
}
.ps-pp__faner table th { font-weight: 600; color: var(--pp-tekst-2); width: 40%; }

/* ── Smal skjerm ─────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ps-pp__topp { grid-template-columns: minmax(0, 1fr); }
  /* Bildet under teksten: identiteten skal leses foerst. */
  .ps-pp__bilde { order: 2; }
  .ps-pp__identitet { order: 1; }
}
@media (max-width: 480px) {
  .ps-pp__varenr { width: 100%; }
  .ps-pp__galleri li { width: 58px; }
}

/* ── Relaterte produkter ─────────────────────────────────────────────────────
   Tekstfoerst, som resten av sida. Temaets egen seksjon tegnet butikkort med
   bilde, og 70 % av katalogen har ikke bilde - da ble raden en rekke graa
   plassholderfirkanter. Her baerer navn, varenummer og serie kortet, og bildet
   er et tillegg naar det finnes. */
.ps-pp__relaterte {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--pp-kant-my);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.ps-pp__seksjonstittel {
  margin: 0 0 1.25rem;
  font-size: var(--pp-f-xl);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pp-blaa-900);
}
.ps-pp__relaterte-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-pp__rel-kort { margin: 0; }
.ps-pp__rel-lenke {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  padding: .95rem 1rem;
  background: var(--pp-grunn);
  border: 1px solid var(--pp-kant);
  border-radius: var(--pp-r);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ps-pp__rel-lenke:hover {
  border-color: var(--pp-blaa-500);
  box-shadow: 0 2px 10px rgba(18, 80, 127, .09);
  transform: translateY(-1px);
}
.ps-pp__rel-bilde { display: block; margin-bottom: .5rem; }
.ps-pp__rel-bilde img {
  display: block; width: 100%; height: auto;
  border-radius: var(--pp-r-sm);
}
.ps-pp__rel-serie {
  font-size: var(--pp-f-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-blaa-700);
}
.ps-pp__rel-navn {
  font-size: var(--pp-f-base);
  font-weight: 650;
  line-height: 1.35;
  color: var(--pp-tekst-1);
}
.ps-pp__rel-sku {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--pp-f-xs);
  color: var(--pp-tekst-3);
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════════
   PRODUKTOVERSIKTEN - butikkforsida og kategorisidene
   ════════════════════════════════════════════════════════════════════════════ */

.ps-pa__topp {
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(1rem, 3vw, 1.75rem);
}
.ps-pa__tittel {
  margin: 0 0 .5rem;
  font-size: clamp(var(--pp-f-xl), 4vw, var(--pp-f-2xl));
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--pp-blaa-900);
}
.ps-pa__ingress {
  max-width: 68ch;
  margin: 0 0 .75rem;
  font-size: var(--pp-f-lg);
  line-height: 1.55;
  color: var(--pp-tekst-2);
}
.ps-pa__antall {
  margin: 0;
  font-size: var(--pp-f-sm);
  color: var(--pp-tekst-3);
}

/* Rutenettet. `auto-fill` og en minstebredde, saa antallet kolonner foelger
   plassen i stedet for et fast tall som brekker paa mellomstore skjermer. */
.ps-pa__rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ps-pa__kort {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--pp-grunn);
  border: 1px solid var(--pp-kant);
  border-radius: var(--pp-r);
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ps-pa__kort:hover {
  border-color: var(--pp-blaa-500);
  box-shadow: 0 3px 14px rgba(18, 80, 127, .1);
  transform: translateY(-2px);
}

.ps-pa__kort-lenke {
  display: flex;
  flex-direction: column;
  gap: .32rem;
  flex: 1;
  padding: 1.05rem 1.1rem .9rem;
  text-decoration: none;
}

/* Bildet staar OEVERST naar det finnes, men kortet er bygget for aa klare seg
   uten - ingen fast hoeyde, ingen plassholder. */
.ps-pa__kort-bilde {
  display: block;
  margin: -1.05rem -1.1rem .8rem;
  padding: .9rem 1.1rem 0;
  background: var(--pp-flate);
  border-bottom: 1px solid var(--pp-kant-my);
}
.ps-pa__kort-bilde img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 170px;
  object-fit: contain;
  object-position: center bottom;
}

.ps-pa__kort-serie {
  font-size: var(--pp-f-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-blaa-700);
}
.ps-pa__kort-navn {
  font-size: var(--pp-f-base);
  font-weight: 650;
  line-height: 1.35;
  color: var(--pp-tekst-1);
}
.ps-pa__kort-sku {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--pp-f-xs);
  color: var(--pp-tekst-3);
  word-break: break-word;
}

.ps-pa__kort-handling {
  padding: 0 1.1rem 1rem;
}
.ps-pa__kort-handling:empty { display: none; }

.ps-pa__tomt {
  padding: 2.5rem 0;
  font-size: var(--pp-f-lg);
  color: var(--pp-tekst-2);
}

@media (max-width: 480px) {
  .ps-pa__rutenett { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
  .ps-pa__kort-lenke { padding: .85rem .9rem .75rem; }
  .ps-pa__kort-bilde { margin: -.85rem -.9rem .65rem; padding: .7rem .9rem 0; }
}