/* =========================================================
   Kitchamore – produktsidene og modelloversikten
   Bygger på home.css (Apple-stil). Lastes på body.page-pp.
   ========================================================= */

.pp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ap-soft); margin-bottom: 22px; }
.pp-crumbs a { color: var(--ap-soft); text-decoration: none; }
.pp-crumbs a:hover { color: var(--gold-text); }
.pp-crumbs span[aria-current] { color: var(--ap-ink); }

/* ---------- Toppen: galleri og kjøpsboks ---------- */
.pp-hero { padding: clamp(104px, 9vw, 128px) 0 clamp(40px, 4vw, 64px); }
.pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }

.pp-gallery { position: sticky; top: 92px; }
.pp-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--ap-radius); overflow: hidden; background: var(--ap-grey); touch-action: pan-y pinch-zoom; }
.pp-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.pp-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.pp-slide--product { display: grid; place-items: center; padding: 4% 4% 2%; }
.pp-slide--product .ap-color-img { width: 100%; height: auto; mix-blend-mode: multiply; }
/* Produktbildet med lag for fargeforslagene (som i Bygg ditt kjøkken). Grå bakgrunn, så multiply blir lik ved zoom. */
.pp-paint { position: relative; width: 100%; background: var(--ap-grey); transition: transform .8s var(--ease); transform-origin: var(--zx, 50%) var(--zy, 50%); cursor: zoom-in; }
.pp-slide--product:hover > .pp-paint { transform: scale(1.6); }
/* Ekte produktbilder (A-Mini, A-Plus, A-Max): samme zoom som følger musen */
.pp-zoom { display: block; width: 100%; height: auto; mix-blend-mode: multiply; transition: transform .8s var(--ease); transform-origin: var(--zx, 50%) var(--zy, 50%); cursor: zoom-in; }
.pp-slide--product:hover > .pp-zoom { transform: scale(1.6); }
.pp-paint > img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; transition: opacity .35s var(--ease); }
.pp-p, .pp-g { position: absolute; inset: 0; display: none; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pp-p { mix-blend-mode: multiply; transition: background-color .5s var(--ease); }
.pp-g { background-size: 100% 100%; background-repeat: no-repeat; }
.is-painted .pp-p--cab, .is-painted .pp-p--inn, .is-painted .pp-g { display: block; }
.is-painted.ut-paint .pp-p--ut { display: block; }
.is-painted.no-inn .pp-p--inn, .is-painted.no-inn .pp-g--inn { display: none; }
.pp-p--cab { background-color: var(--cab, #fff); -webkit-mask-image: var(--mask-cab); mask-image: var(--mask-cab); }
.pp-p--inn { background-color: var(--inn, #fff); -webkit-mask-image: var(--mask-inn); mask-image: var(--mask-inn); }
.pp-p--ut { background-color: var(--ut, #fff); -webkit-mask-image: var(--mask-ut); mask-image: var(--mask-ut); }
.pp-g--cab { background-image: var(--gl-cab); -webkit-mask-image: var(--mask-cab); mask-image: var(--mask-cab); }
.pp-g--inn { background-image: var(--gl-inn); -webkit-mask-image: var(--mask-inn); mask-image: var(--mask-inn); }
.cab-wood .pp-p--cab, .inn-wood .pp-p--inn { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 13px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 5px, transparent 5px 31px); }
.pp-p--tex { -webkit-mask-image: var(--mask-ut); mask-image: var(--mask-ut); mix-blend-mode: normal; }
.is-painted.ut-paint.ut-sand .pp-p--tex { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 90px 90px; mix-blend-mode: overlay; opacity: .5; }
.is-painted.ut-paint.ut-glimmer .pp-p--tex { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 9 0 0 0 -6.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); background-size: 56px 56px; mix-blend-mode: screen; opacity: .34; }
.pp-paint:has(img.is-swapping) .pp-p, .pp-paint:has(img.is-swapping) .pp-g { opacity: .2; }
.pp-slide--photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-slide--product .ap-color-stage { width: 100%; animation: none; }
.pp-slide--product .ap-colors { right: 2%; top: 50%; transform: translateY(-50%); }
.pp-slide--product .ap-color-img:not(:first-child) { mix-blend-mode: multiply; }

.pp-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.pp-thumbs::-webkit-scrollbar { display: none; }
.pp-thumb {
  flex: none; width: 92px; aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  border-radius: 14px; background: var(--ap-grey); opacity: .7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: opacity .3s, box-shadow .3s;
}
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-thumb--product img { object-fit: contain; mix-blend-mode: multiply; padding: 6px; }
.pp-thumb:hover { opacity: 1; }
.pp-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }

/* Kjøpsboksen */
.pp-buy { padding-top: 6px; }
.pp-buy-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pp-size { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ap-soft); }
.pp-brand { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.pp-title { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; letter-spacing: -.045em; }
.pp-tag { margin-top: 10px; font-family: var(--accent); font-style: italic; font-size: clamp(22px, 1.8vw, 28px); color: var(--logo-gold); }
.pp-lead { margin-top: 18px; max-width: 30em; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.55; letter-spacing: -.008em; color: #3a3a3c; text-wrap: pretty; }  /* det første kunden leser */

/* Dette er med: to lister ved siden av hverandre, med tynne linjer (ikke merkelapper) */
.pp-inc-wrap { margin-top: 24px; }
.pp-inc-head { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.pp-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.pp-inc li { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 15px; line-height: 1.3; color: var(--ap-ink); }
.pp-inc svg { flex: none; color: var(--gold-text); }
@media (max-width: 380px) { .pp-inc { grid-template-columns: minmax(0, 1fr); } }

.pp-price {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px;
  margin-top: 28px; padding: 20px 22px; border-radius: 22px;
  background: linear-gradient(135deg, #f7f3ec, #f6f1e9);
  box-shadow: inset 0 0 0 1px rgba(200, 164, 108, .3);
}
.pp-price > div { display: flex; flex-direction: column; gap: 2px; }
.pp-price > div:first-child { flex: 1 1 210px; min-width: 0; }
.pp-price strong { white-space: nowrap; }
.pp-price-label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-soft); }
.pp-price strong { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -.02em; }
[data-pp-total], [data-pp-dep] { white-space: nowrap; }
.pp-price-note { font-size: 13.5px; color: var(--gold-text); }
.pp-price-badge { flex: none; padding: 6px 12px; border-radius: 980px; background: var(--ap-ink); color: #fff; font-size: 12px; font-weight: 500; }

.pp-facts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.pp-facts li { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid #ececf0; font-size: 14.5px; color: var(--ap-soft); }
.pp-facts li:last-child { border-bottom: 0; }
.pp-facts svg { flex: none; color: var(--gold-text); }
.pp-facts strong { color: var(--ap-ink); font-weight: 500; margin-right: 4px; }

.pp-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.pp-cta { width: 100%; min-height: 56px; font-size: 17px; }
.pp-cta-2 {
  display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 980px;
  box-shadow: inset 0 0 0 1px #d2d2d7; color: var(--ap-ink); text-decoration: none; font-weight: 500;
  transition: box-shadow .3s, background .3s;
}
.pp-cta-2:hover { background: var(--ap-grey); box-shadow: inset 0 0 0 1px var(--ap-ink); }
.pp-pay { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--ap-soft); }
.pp-pay .pay-logos { gap: 6px; }
.pp-pay .pay-logos svg { width: 40px; height: 26px; }

/* Trygghetsrad under toppen */

/* ---------- Seksjoner ---------- */
.pp-section { padding: var(--ap-space) 0; }


/* Hvorfor */
.pp-why { background: #000; color: #f5f5f7; }
.pp-why .ap-h2 em { color: var(--logo-gold); }
.pp-why .ap-eyebrow { color: var(--gold); }
.pp-why .ap-sub { color: #a1a1a6; }
.pp-why-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 100px); align-items: center; }  /* tittel, tekst og punkter til venstre, bildet til høyre */
.pp-why .pp-why-media--scene { aspect-ratio: 16 / 10; }
.pp-why-media--scene img { object-position: 75% 55%; }  /* miljøbildene er liggende: kjøkkenet står til høyre for midten */
.pp-why-media { margin: 0; border-radius: var(--ap-radius); overflow: hidden; aspect-ratio: 4 / 5; }
.pp-why-media img { width: 100%; height: 100%; object-fit: cover; }
.pp-why-media--product { aspect-ratio: 4 / 3; background: #f6f1e9; display: grid; place-items: center; padding: 6%; }
.pp-why-media--product img { width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.pp-why-list { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; }
.pp-why-list li { display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; padding: 22px 0; border-top: 1px solid rgba(245, 245, 247, .14); }
.pp-why-num { grid-row: span 2; font-family: var(--accent); font-style: italic; font-size: 30px; line-height: 1; color: var(--logo-gold); }
.pp-why-list strong { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.02em; }
.pp-why-list span:not(.pp-why-num) { font-size: 15px; color: #a1a1a6; margin-top: 4px; }

/* Taket */
.pp-roof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.pp-roof-steps { list-style: none; margin: 32px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pp-roof-steps li { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 20px; background: var(--ap-grey); }
.pp-roof-steps li span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(200, 164, 108, .45); font-family: var(--sans, inherit); font-style: normal; font-size: 15px; font-weight: 600; line-height: 1; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.pp-roof-steps strong { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.pp-roof-steps small { font-size: 13.5px; color: var(--ap-soft); }
.pp-roof-stage { margin: 0; padding: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px) clamp(14px, 1.6vw, 22px); border-radius: var(--ap-radius); background: var(--ap-grey); }
.pp-roof-stage .ap-roof-media { margin-top: 0; }
.pp-roof-stage figcaption { margin-top: 8px; text-align: center; font-size: 13px; color: var(--ap-soft); }

/* Sammenlign */
.pp-compare { background: var(--ap-grey); }
.pp-cmp { min-width: 720px; background: #fff; border-radius: var(--ap-radius); overflow: hidden; }
.pp-cmp thead td { width: 180px; }
.pp-cmp th a { color: inherit; text-decoration: none; }
.pp-cmp thead th { padding-top: 26px; }
.pp-cmp .is-current { background: rgba(200, 164, 108, .09); }
.pp-cmp-you, .pp-cmp-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; }
.pp-cmp-you { color: var(--gold-text); }
.pp-cmp-link { color: var(--ap-ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-cmp tbody th { padding-left: 24px; }
.ap-cmp-img { mix-blend-mode: multiply; }

/* Fast kjøpslinje */
.pp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(0, 0, 0, .08);
  transform: translateY(110%); transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s;
}
.pp-bar.is-visible { transform: none; }
/* Over en mørk seksjon (filmen, «Hvorfor»): mørk linje og gullknapp */
.pp-bar.is-dark { background: rgba(10, 10, 11, .82); border-top-color: rgba(255, 255, 255, .1); color: #f5f5f7; }
.pp-bar.is-dark .pp-bar-name span { color: #a1a1a6; }
.pp-bar.is-dark img { mix-blend-mode: normal; border-radius: 8px; background: #f6f1e9; }
.pp-bar.is-dark .ap-btn { background: var(--gold-light); color: #1d1d1f; }
.pp-bar-inner { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.pp-bar img { width: 64px; height: auto; mix-blend-mode: multiply; }
.pp-bar-name { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.pp-bar-name strong { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.pp-bar-name span { font-size: 13px; color: var(--ap-soft); }
.page-pp .sticky-cta { display: none; }

/* ---------- Oversikten ---------- */
.pp-ov-hero { padding: clamp(104px, 9vw, 128px) 0 var(--ap-space); }
.pp-ov-seg { margin-top: 32px; }
.pp-ov-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-ov-card {
  display: flex; flex-direction: column; padding: 18px 24px 28px; border-radius: var(--ap-radius); background: var(--ap-grey);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s;
}
.pp-ov-card[hidden] { display: none; }
.pp-ov-card:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(200, 164, 108, .3); }
.pp-ov-media { display: block; margin: 0 -8px 14px; }
.pp-ov-media img { width: 100%; height: auto; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.pp-ov-card:hover .pp-ov-media img { transform: scale(1.04); }
.pp-ov-name { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -.03em; line-height: 1.1; }
.pp-ov-name a { color: inherit; text-decoration: none; }
.pp-ov-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-ov-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 980px; background: #fff; font-size: 12.5px; font-weight: 500; }
.pp-ov-chips svg { color: var(--gold-text); }
.pp-ov-card .ap-card-actions { margin-top: auto; padding-top: 24px; }
.pp-ov-hero .ap-head { margin-bottom: clamp(36px, 4vw, 56px); }

/* ---------- Mobil og nettbrett ---------- */
@media (max-width: 1000px) {
  .pp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-gallery, .pp-buy { min-width: 0; }
  .pp-gallery { position: static; }
  .pp-why-grid, .pp-roof-grid { grid-template-columns: 1fr; }
  .pp-why-media { order: -1; }  /* smalt: bildet øverst */
  .pp-ov-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pp-ov-grid { grid-template-columns: 1fr; }
  .pp-roof-steps { grid-template-columns: 1fr; }
  .pp-bar img { display: none; }
  .pp-bar-name strong { font-size: 16px; }
  .pp-price { flex-direction: column; align-items: flex-start; }
}


/* ---------- Detaljene: nærbilder i kort ---------- */
.pp-details { padding-top: var(--ap-space); }
.pp-details-sub { max-width: 34em; }
.pp-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-detail { margin: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ap-radius); background: var(--ap-grey); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pp-detail:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -34px rgba(0, 0, 0, .35); }
.pp-detail-img { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #fff; }  /* gjennomsiktige kanter i bildene blir hvite, som i originalen */
.pp-detail-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pp-detail:hover .pp-detail-img img { transform: scale(1.06); }
.pp-detail figcaption { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 24px; }
.pp-detail figcaption strong { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.02em; }
.pp-detail figcaption span { font-size: 14.5px; line-height: 1.5; color: var(--ap-soft); }
/* Plassering etter rekkefølgen (pages_models.details): bredt kort, kort som fyller høyden, kort over hele bredden */
.pp-detail--wide { grid-column: span 2; }
.pp-detail--wide .pp-detail-img { aspect-ratio: 16 / 7.6; }
.pp-detail--fill .pp-detail-img { position: relative; aspect-ratio: auto; flex: 1; min-height: 220px; }
.pp-detail--fill .pp-detail-img img { position: absolute; inset: 0; }  /* fyller høyden i raden uten å bestemme den */
.pp-detail.is-tall .pp-detail-img img { object-position: 50% 42%; }
.pp-detail--full { grid-column: span 3; flex-direction: row; }
.pp-detail--full .pp-detail-img { flex: 1.6; aspect-ratio: 21 / 8; }
.pp-detail--full figcaption { flex: 1; justify-content: center; padding: 32px 40px; }
.pp-detail--full figcaption strong { font-size: clamp(24px, 2.2vw, 34px); }
/* Nærbilde som ikke er tatt ennå */
.pp-detail-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center;
  background: repeating-linear-gradient(135deg, #f6f1e9 0 14px, #efe8dc 14px 28px); box-shadow: inset 0 -1px 0 #d2d2d7; }
.pp-detail-ph-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: #fff; color: var(--gold-text); }
.pp-detail-ph b { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.pp-detail-ph small { max-width: 26em; font-size: 13px; line-height: 1.5; color: var(--ap-soft); }
.pp-detail--full .pp-detail-ph { min-height: 260px; }
.js .pp-detail.reveal:nth-child(2), .js .pp-detail.reveal:nth-child(4) { transition-delay: .08s; }
.js .pp-detail.reveal:nth-child(5) { transition-delay: .16s; }
/* PC og nettbrett: kortene i en rad deler høyden. Bildet og teksten ligger i to felles rader (subgrid), så bildene blir
   like høye og teksten starter på samme linje, også når et bredt og et vanlig kort står ved siden av hverandre. */
@media (min-width: 641px) {
  .pp-detail:not(.pp-detail--full) { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .pp-detail--full { grid-row: span 2; }
  .pp-detail:not(.pp-detail--full) .pp-detail-img:not(.pp-detail-ph) { position: relative; aspect-ratio: auto; min-height: 0; }
  .pp-detail:not(.pp-detail--full) .pp-detail-img:not(.pp-detail-ph)::before { content: ""; display: block; aspect-ratio: 3 / 2; }
  .pp-detail.pp-detail--wide:not(.pp-detail--full) .pp-detail-img:not(.pp-detail-ph)::before { aspect-ratio: 16 / 7; }
  .pp-detail.pp-detail--fill:not(.pp-detail--full) .pp-detail-img:not(.pp-detail-ph)::before { content: none; }
  .pp-detail.pp-detail--fill:not(.pp-detail--full) .pp-detail-img:not(.pp-detail-ph) { min-height: 220px; }
  .pp-detail:not(.pp-detail--full) .pp-detail-img:not(.pp-detail-ph) img { position: absolute; inset: 0; }
  .pp-detail:not(.pp-detail--full) .pp-detail-ph { aspect-ratio: auto; min-height: 260px; }
}
@media (max-width: 1000px) {
  .pp-detail-grid { grid-template-columns: 1fr 1fr; }
  .pp-detail--wide, .pp-detail--full { grid-column: span 2; }
}
@media (max-width: 640px) {
  .pp-detail-grid { grid-template-columns: 1fr; }
  .pp-detail--wide, .pp-detail--full { grid-column: auto; }
  .pp-detail--full { flex-direction: column; }
  .pp-detail--wide .pp-detail-img, .pp-detail--full .pp-detail-img, .pp-detail--fill .pp-detail-img { aspect-ratio: 3 / 2; flex: none; min-height: 0; }
  .pp-detail--fill .pp-detail-img img { position: static; }
}

/* ---------- Fargevelger på produktsiden ---------- */
.pp-color { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 14px 18px; border-radius: 18px; background: var(--ap-grey); }
/* Fargeforslagene: tre prikker (utside, innside, skap) og navn, «Bygg din egen» til høyre */
.pp-color--presets { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 14px 12px; }
.pp-color-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.pp-color-own { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 980px; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pp-color-own span { transition: transform .3s var(--ease); }
.pp-color-own:hover span { transform: translateX(3px); }
.pp-color--presets .pp-color-head { align-items: center; }
/* Fire i bredden (åtte utseender i to rader) */
.pp-presets--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-preset-dots i { background-color: var(--c); }
.pp-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pp-preset { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 9px 2px 7px; border: 0; border-radius: 12px;
  background: transparent; font: inherit; color: var(--ap-soft); cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.pp-preset:hover { background: #fff; }
.pp-preset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pp-preset[aria-checked="true"] { background: #fff; color: var(--ap-ink); box-shadow: inset 0 0 0 2px var(--ap-ink); }
.pp-preset-dots { display: flex; }
.pp-preset-dots i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ap-grey), inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pp-preset:hover .pp-preset-dots i, .pp-preset[aria-checked="true"] .pp-preset-dots i { box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pp-preset-dots i + i { margin-left: -6px; }
.pp-preset-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
@media (max-width: 420px) { .pp-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-color-label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.pp-color-label strong { margin-left: 4px; text-transform: none; letter-spacing: normal; font-size: 14.5px; font-weight: 500; color: var(--ap-ink); }
.pp-colors { display: flex; align-items: center; gap: 14px; }
.pp-colors--stage { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 12px; padding: 12px 9px; border-radius: 980px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); z-index: 2; }
.pp-colors--stage .ap-swatch { width: 26px; height: 26px; }
img[data-recolor] { transition: opacity .35s var(--ease); }
img[data-recolor].is-swapping { opacity: .25; }
@media (max-width: 640px) { .pp-colors--stage { right: 10px; } }

/* Pris med depositum */
.pp-price-sub { font-size: 13.5px; color: var(--ap-soft); }
/* Frakten kommer i tillegg (priskalkylen): + frakt og totalen */
.pp-price-frakt { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; font-size: 14px; color: var(--ap-soft); }
.pp-price-frakt b { color: var(--ap-ink); font-weight: 500; white-space: nowrap; }
[data-pp-frakt] { white-space: nowrap; }
.pp-price strong { font-size: 30px; }
.pp-price-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pp-price-dep { font-size: 13px; color: var(--gold-text); font-weight: 500; white-space: nowrap; }
@media (max-width: 640px) { .pp-price-side { align-items: flex-start; } }

/* Piler i galleriet */
.pp-nav {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .86); color: var(--ap-ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .06);
  opacity: 0; transition: opacity .3s, background .3s, transform .3s var(--ease);
}
.pp-nav--prev { left: 16px; }
.pp-nav--next { right: 16px; }
.pp-stage:hover .pp-nav, .pp-nav:focus-visible { opacity: 1; }
.pp-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.pp-count {
  position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 980px; background: rgba(29, 29, 31, .55); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
}
@media (hover: none) { .pp-nav { opacity: 1; } }

/* ---------- Kjøpsboksen: velg åpning ---------- */
.pp-mech { margin-top: 22px; }
.pp-mech-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.pp-mech-label > * { text-transform: none; letter-spacing: normal; font-size: 14.5px; }
.pp-mech-label strong { margin-left: 4px; font-weight: 500; color: var(--ap-ink); }
.pp-benk-plus { color: var(--gold-text); font-weight: 500; white-space: nowrap; }
/* Benkeplate (benk_picker): runde fargeprøver, rustfritt stål og fire sintrede steiner */
.pp-benk { margin-top: 22px; }
/* Rustfritt stål eller sintret stein (som valget av åpning), og steinfargen under når stein er valgt */
.pp-benk-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-benk-type {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  padding: 11px 14px 11px 11px; border: 0; border-radius: 16px; background: #fff; text-align: left;
  font: inherit; color: var(--ap-ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ap-line); transition: box-shadow .25s, transform .25s var(--ease);
}
.pp-benk-type-sw { grid-row: 1 / 3; display: block; width: 34px; height: 34px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line); }
.pp-benk-type strong { font-size: 15px; font-weight: 500; line-height: 1.2; }
.pp-benk-type > span:last-child { font-size: 12.5px; line-height: 1.3; color: var(--ap-soft); }
.pp-benk-type[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ap-ink); }
.pp-benk-type[aria-checked="true"] > span:last-child { color: var(--gold-text); font-weight: 500; }
.pp-benk-type:not([aria-checked="true"]):hover { box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
.pp-benk-type:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pp-benk-stones, .pp-benk-group { margin-top: 12px; }
/* Materialprøvene (ekte bilder) fyller rutene */
.pp-benk-sw img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pp-benk-type-sw .pp-benk-sw { width: 100%; height: 100%; }
.pp-benk-stones-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.pp-benk-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-benk-opt { display: grid; place-items: center; width: 42px; height: 42px; padding: 4px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.pp-benk-opt:hover { transform: translateY(-1px); }
.pp-benk-opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ap-ink); }
.pp-benk-opt:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }
.pp-benk-sw { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pp-benk-sw--stal { background: linear-gradient(135deg, #f1f2f4 0%, #b9bdc2 52%, #e2e4e7 100%); }
.pp-benk-sw--calacatta { background: linear-gradient(118deg, #f4f2ec 0 38%, #cfcbc3 41%, #f4f2ec 45% 100%); }
.pp-benk-sw--cave { background: linear-gradient(135deg, #e3d8c5 0%, #d2c4ad 100%); }
.pp-benk-sw--bosnia { background: linear-gradient(135deg, #9a9c9b 0%, #7d7f7e 100%); }
.pp-benk-sw--spansk { background: linear-gradient(118deg, #2f2e2d 0 40%, #d8d5cf 43%, #2f2e2d 47% 100%); }
.pp-mech-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-mech-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  padding: 11px 14px 11px 11px; border: 0; border-radius: 16px; background: #fff; text-align: left;
  font: inherit; color: var(--ap-ink); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ap-line); transition: box-shadow .25s, transform .25s var(--ease);
}
.pp-mech-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ap-grey); color: var(--gold-text); }
.pp-mech-opt strong { font-size: 15px; font-weight: 500; line-height: 1.2; }
.pp-mech-opt > span:last-child { font-size: 12.5px; line-height: 1.3; color: var(--ap-soft); }
.pp-mech-opt[aria-checked="true"], .pp-mech-opt[aria-current] { box-shadow: inset 0 0 0 2px var(--ap-ink); }
.pp-mech-opt[aria-checked="true"] .pp-mech-ic, .pp-mech-opt[aria-current] .pp-mech-ic { background: var(--ap-ink); color: var(--gold-light); }
.pp-mech-opt:not([aria-checked="true"]):not([aria-current]):hover { box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
.pp-mech-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pp-mech-opt.is-fixed { cursor: default; }

/* ---------- Kjøpsboksen: tilvalg ---------- */
.pp-addons { margin-top: 18px; }
/* «Følger med – velg variant» over tilvalgene */
.pp-addon-opts--incl { margin-bottom: 18px; }
.pp-addons-hint { margin-left: 6px; text-transform: none; letter-spacing: normal; font-size: 13.5px; color: var(--ap-soft); font-weight: 400; }
.pp-addon-note { margin-left: 6px; padding: 2px 8px; border-radius: 980px; background: rgba(200, 164, 108, .14); font-size: 11.5px; font-weight: 500; color: var(--gold-text); }
.pp-addon-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-addon {
  position: relative; display: flex; flex-direction: column; padding: 8px 8px 12px; border: 0; border-radius: 18px;
  background: #fff; text-align: left; font: inherit; color: var(--ap-ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ap-line); transition: box-shadow .25s, transform .25s var(--ease);
}
.pp-addon:hover { box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-1px); }
.pp-addon[aria-pressed="true"], .pp-addon[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--ap-ink); transform: none; }
.pp-addon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pp-addon-media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--ap-grey); color: var(--gold-text); }
.pp-addon-media img { display: block; width: 100%; height: 100%; padding: 6% 6% 3%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.pp-addon:hover .pp-addon-media img { transform: scale(1.05); }
.pp-addon-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px 0; }
.pp-addon-body strong { font-size: 15px; font-weight: 500; line-height: 1.2; }
.pp-addon-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #c7c7cc; color: transparent; transition: background .2s, box-shadow .2s, color .2s; }
.pp-addon[aria-pressed="true"] .pp-addon-check { background: var(--ap-ink); box-shadow: none; color: #fff; }
.pp-addon-price { font-size: 12.5px; line-height: 1.3; color: var(--ap-soft); white-space: nowrap; }
/* Enkle tilvalg: rader under hverandre i full bredde, som TV og ekstra kjøleskap (bilde til venstre, navnet ved siden av) */
.pp-addon-opts { grid-template-columns: minmax(0, 1fr); }
.pp-addon:not(.pp-addon--sizes) { flex-direction: row; align-items: center; gap: 14px; padding: 8px 44px 8px 8px; }
.pp-addon:not(.pp-addon--sizes) .pp-addon-media { flex: none; width: 112px; border-radius: 12px; }
.pp-addon:not(.pp-addon--sizes) .pp-addon-body { min-width: 0; padding: 0; }
.pp-addon:not(.pp-addon--sizes) .pp-addon-check { top: 50%; right: 12px; transform: translateY(-50%); }
/* Smal kolonne (mobil, og nettbrett der kjøpsboksen er smal): én i bredden, lave rader */
.pp-addons { container-type: inline-size; }
@container (max-width: 420px) {
  .pp-addon-opts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pp-addon:not(.pp-addon--sizes) { padding: 6px 44px 6px 6px; }
  .pp-addon:not(.pp-addon--sizes) .pp-addon-media { width: 72px; }
}
/* TV: ett bredt kort med tre størrelser */
.pp-addon--sizes { grid-column: 1 / -1; display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "media body" "media sizes";
  column-gap: 14px; row-gap: 8px; align-items: center; padding: 8px 12px 8px 8px; cursor: default; }
.pp-addon--sizes:hover { box-shadow: inset 0 0 0 1px var(--ap-line); transform: none; }
.pp-addon--sizes.is-on, .pp-addon--sizes.is-on:hover { box-shadow: inset 0 0 0 2px var(--ap-ink); }
.pp-addon--sizes .pp-addon-media { grid-area: media; }
.pp-addon--sizes .pp-addon-body { grid-area: body; padding: 4px 30px 0 0; }
.pp-addon--sizes .pp-addon-price { white-space: normal; }
.pp-addon--sizes.is-on .pp-addon-check { background: var(--ap-ink); box-shadow: none; color: #fff; }
.pp-addon-sizes { grid-area: sizes; display: flex; gap: 6px; }
.pp-addon-size { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 7px 4px; border: 0; border-radius: 10px;
  background: var(--ap-grey); font: inherit; color: var(--ap-ink); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pp-addon-size b { font-size: 14px; font-weight: 500; }
.pp-addon-size small { font-size: 11px; color: var(--ap-soft); white-space: nowrap; }
.pp-addon-size:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.pp-addon-size:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pp-addon-size[aria-pressed="true"] { background: var(--ap-ink); color: #fff; box-shadow: none; }
.pp-addon-size[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
@media (max-width: 420px) {
  .pp-addon--sizes { grid-template-columns: 84px minmax(0, 1fr); }
  .pp-addon-size small { font-size: 10.5px; }
}
.pp-price-with { display: block; margin-top: 4px; font-size: 13px; color: var(--gold-text); }
.pp-mech-spec { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--ap-soft); }
.pp-mech-spec svg { flex: none; color: var(--gold-text); }

/* ---------- Mål og detaljer ---------- */
.pp-specs-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pp-dim { margin: 0; padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px) clamp(20px, 2.4vw, 32px); border-radius: var(--ap-radius); background: var(--ap-grey); }
.pp-dim-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pp-dim-front { fill: #1d1d1f; }
.pp-dim-top { fill: #4a4a4e; }
.pp-dim-side { fill: #2c2c2e; }
.pp-dim-line { fill: none; stroke: var(--gold-text); stroke-width: 1.4; stroke-linecap: round; }
.pp-dim-svg text { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--ap-ink); }
.pp-dim figcaption { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ap-soft); }
.pp-spec { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.45; }
.pp-spec thead th { padding: 0 14px 14px; text-align: left; text-transform: none; letter-spacing: -.02em; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ap-soft); border-bottom: 1px solid var(--ap-ink); transition: color .25s; }
.pp-spec thead td { border-bottom: 1px solid var(--ap-ink); }
.pp-spec tbody th { width: 34%; padding: 16px 14px 16px 0; text-align: left; font-weight: 400; color: var(--ap-soft); border-bottom: 1px solid var(--ap-line); vertical-align: top; }
.pp-spec td { padding: 16px 14px; color: var(--ap-ink); border-bottom: 1px solid var(--ap-line); vertical-align: top; transition: background .25s, color .25s; }
.pp-spec td[data-col]:not(.is-on) { color: var(--ap-soft); }
.pp-spec thead th.is-on { color: var(--gold-text); }
.pp-spec td.is-on { background: var(--ap-grey); }
.pp-spec tbody tr:last-child > * { border-bottom: 0; }
.pp-specs-note { margin-top: 18px; font-size: 13.5px; color: var(--ap-soft); }
@media (max-width: 1000px) { .pp-specs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pp-spec { font-size: 14.5px; } .pp-spec tbody th { width: 38%; } }

/* ---------- Om modellen: den lange beskrivelsen ---------- */
.pp-story-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.pp-story-head { position: sticky; top: 112px; }
.pp-story-quote { margin: 32px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--logo-gold); }
.pp-story-quote p { font-family: var(--accent); font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.3; letter-spacing: -.01em; color: var(--logo-gold); }
.pp-story-fit { margin: 36px 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--ap-line); }
.pp-story-fit > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ap-line); }
.pp-story-fit dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-soft); padding-top: 3px; }
.pp-story-fit dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ap-ink); }
.pp-story-body { max-width: 38em; }
.pp-story-body p { margin: 0 0 22px; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.75; color: #3a3a3c; }
.pp-story-body p:first-child { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.6; color: var(--ap-ink); }
.pp-story-body p:first-child::first-letter { float: left; margin: 6px 12px 0 0; font-family: var(--serif); font-size: 4.1em; line-height: .78; color: var(--logo-gold); }
.pp-story-body p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) {
  .pp-story-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-story-head { position: static; }
}

/* ---------- Spesifikasjonene (spec_sheet.py): målene som tegninger, nøkkeltall og produktarket i grupper ---------- */
.ps-sub { max-width: 30em; }
.ps-dims { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.ps-dims--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-dim { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--ap-radius); background: var(--ap-grey); }
.ps-svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.ps-box .ps-front { fill: #1d1d1f; }
.ps-box .ps-top { fill: #4a4a4e; }
.ps-box .ps-side { fill: #2c2c2e; }
.ps-env polygon, .ps-env rect { fill: rgba(200, 164, 108, .07); stroke: var(--gold); stroke-width: 1.2; }
.ps-line { fill: none; stroke: var(--gold-text); stroke-width: 1.4; stroke-linecap: round; }
.ps-svg text { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--ap-ink); }
.ps-dim figcaption { display: grid; gap: 3px; }
.ps-dim figcaption span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.ps-dim figcaption strong { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; letter-spacing: -.02em; color: var(--ap-ink); }
.ps-dim figcaption small { font-size: 13.5px; line-height: 1.45; color: var(--ap-soft); }
.ps-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ps-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line); font-size: 14.5px; color: var(--ap-ink); }
.ps-facts svg { color: var(--gold-text); }
.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin: clamp(24px, 3.5vw, 40px) 0 16px; }
/* Kolonnene er fordelt i spec_sheet.py så de blir like høye; det siste kortet i hver fyller ut resten, så bunnen står på linje */
.ps-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ps-col > .ps-group:last-child { flex: 1 1 auto; }
.ps-grid:not(.is-even) .ps-col--velg { align-self: start; position: sticky; top: calc(var(--hdr-top) + 20px); transition: top .3s var(--ease); }
.ps-group { display: flex; flex-direction: column; margin: 0; padding: 22px 22px 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line); }
.ps-group-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -.01em; color: var(--ap-ink); }
.ps-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ap-grey); color: var(--gold-text); }
.ps-list { margin: 0; }
.ps-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding: 13px 0; border-top: 1px solid var(--ap-line); }
.ps-row:first-child { border-top: 0; }
.ps-row dt { font-size: 14px; line-height: 1.45; color: var(--ap-soft); }
.ps-row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; line-height: 1.45; color: var(--ap-ink); }
.ps-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
/* Smale kort (tre kolonner på en liten skjerm): bare ikonet, navnet står i title og for skjermlesere */
@media (min-width: 1201px) and (max-width: 1360px), (min-width: 901px) and (max-width: 980px) {
  .ps-tag { padding: 3px 5px; }
  .ps-tag-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ps-tag.is-remote, .ps-tag.is-bt { background: var(--ap-grey); color: #424245; }
.ps-tag.is-opt { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-text); }
.ps-tag.is-choose { background: #f3ead9; color: var(--gold-text); }
.ps-group--velg { background: var(--ap-grey); box-shadow: none; }
.ps-group--velg .ps-ic { background: #fff; }
.ps-group--velg .ps-row { border-top-color: rgba(0, 0, 0, .07); }
.ps-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: auto 0 14px; padding-top: 4px; font-size: 15px; font-weight: 500; color: var(--gold-text); text-decoration: none; }
.ps-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-note { margin-top: 4px; font-size: 13.5px; color: var(--ap-soft); }
@media (max-width: 1200px) {
  /* To kolonner med det som følger med, og «Du velger selv» i full bredde under */
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-grid .ps-col--velg { grid-column: 1 / -1; position: static; }
}
@media (max-width: 900px) { .ps-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ps-dims--two { grid-template-columns: minmax(0, 1fr); }
  .ps-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 0; }
  .ps-group { padding: 18px 18px 8px; }
}

/* ---------- Dørene: seks lag (door_layers.py). Velg et lag, så blekes resten av bildet ---------- */
@property --dl-t { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --dl-b { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media head" "media copy"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 88px); align-items: start; }
.dl-head { grid-area: head; align-self: end; }
.dl-head .ap-sub { margin-bottom: 22px; }
.dl-copy { grid-area: copy; }
.dl-media { grid-area: media; align-self: center; position: relative; z-index: 2; margin: 0; display: grid; place-items: center; padding: clamp(18px, 2.4vw, 32px) 0; border-radius: var(--ap-radius); background: radial-gradient(110% 80% at 50% 30%, #fbfbfd 0%, var(--ap-grey) 72%); }
.dl-photo { position: relative; width: 100%; max-width: 470px; aspect-ratio: 2 / 3; --dl-t: 0%; --dl-b: 100%; transition: --dl-t .55s var(--ease), --dl-b .55s var(--ease); }
.dl-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dl-base { transition: opacity .45s var(--ease), filter .45s var(--ease); }
.dl-hi { position: absolute; inset: 0; pointer-events: none; opacity: 0; clip-path: inset(var(--dl-t) 0 calc(100% - var(--dl-b)) 0); transition: opacity .35s var(--ease); }
.dl.has-pick .dl-base { opacity: .2; filter: grayscale(.4); }
.dl.has-pick .dl-hi { opacity: 1; }
.dl-pin { position: absolute; left: 92%; top: var(--y); display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line), 0 4px 12px rgba(0, 0, 0, .1); color: var(--ap-ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: transform .35s var(--ease), background .25s, color .25s, opacity .35s; }
.dl-pin:hover { transform: scale(1.08); }
.dl-pin.is-on { background: var(--gold); color: #1d1d1f; transform: scale(1.14); box-shadow: 0 0 0 6px rgba(200, 164, 108, .25), 0 4px 12px rgba(0, 0, 0, .12); }
.dl.has-pick .dl-pin:not(.is-on) { opacity: .45; }
.dl-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dl-item { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s; }
.dl-item:hover { background: var(--ap-grey); }
.dl-item:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }
.dl-item[aria-pressed="true"] { background: var(--ap-grey); box-shadow: inset 0 0 0 1px var(--ap-line); }
.dl-item-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ap-line); font-size: 13px; font-weight: 600; color: var(--ap-ink); transition: background .25s, color .25s; }
.dl-item[aria-pressed="true"] .dl-item-num { background: var(--gold); color: #1d1d1f; box-shadow: none; }
.dl-item-text { display: grid; gap: 2px; padding-top: 3px; }
.dl-item-text strong { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ap-ink); }
.dl-item-text span { font-size: 14px; line-height: 1.5; color: var(--ap-soft); }
.dl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.dl-facts li { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--ap-grey); }
.dl-facts strong { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: var(--gold-text); }
.dl-facts span { font-size: 12.5px; line-height: 1.35; color: var(--ap-soft); }
@media (max-width: 1000px) {
  /* Overskriften først, og bildet blir liggende øverst mens du går gjennom lagene */
  .dl-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "copy"; grid-template-rows: none; }
  .dl-media { position: sticky; top: calc(var(--hdr-top) + 8px); margin-bottom: 14px; padding: 12px 0; transition: top .3s var(--ease); box-shadow: 0 0 0 8px #fff; }
  .dl-photo { width: auto; height: min(48vh, 440px); max-width: 100%; }
  .dl-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; }
  .dl-item { padding: 10px 12px; }
  .dl-item-text span { font-size: 13.5px; }
}
@media (max-width: 560px) { .dl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dl-photo, .dl-base, .dl-hi, .dl-pin { transition: none; } }

/* ---------- Se inn i modellen (feature_map.py): bildet forfra med navn og linjer til utstyret ---------- */
.fm { padding: var(--ap-space) 0; background: #fff; overflow: hidden; }
.fm-head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 52px); text-align: center; }
.fm-sub { margin-left: auto; margin-right: auto; }
.fm-hint-mob { display: none; }
.fm-stage { position: relative; aspect-ratio: var(--sar, 2400 / 1024); }
.fm-photo { position: absolute; top: 0; left: var(--pl, 18%); width: var(--pw, 64%); height: 100%; }
.fm-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }  /* originalbildet med gjennomsiktig bakgrunn, uten skygge */
.fm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fm-line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i) * 70ms + .35s), opacity .3s ease, stroke-width .3s ease; }
.fm-stage.is-visible .fm-line { stroke-dashoffset: 0; }
.fm.has-pick .fm-line:not(.is-on) { opacity: .14; }
.fm-line.is-on { opacity: 1; stroke-width: 3.2; }
.fm-pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: var(--gold); color: #1d1d1f; cursor: pointer; opacity: 0; scale: .3;
  transition: opacity .4s ease calc(var(--i) * 70ms + 1.2s), scale .45s var(--ease) calc(var(--i) * 70ms + 1.2s), background .25s;
  animation: fm-pulse 2.6s ease-out infinite; animation-delay: calc(var(--i) * -.22s); }
.fm-pin span { display: none; }
.fm-stage.is-visible .fm-pin { opacity: 1; scale: 1; }
.fm-stage.is-visible .fm-pin:hover, .fm-stage.is-visible .fm-pin.is-on { scale: 1.35; transition-delay: 0s; }
.fm.has-pick .fm-pin:not(.is-on) { opacity: .4; transition-delay: 0s; }
@keyframes fm-pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 164, 108, .6); } 70% { box-shadow: 0 0 0 12px rgba(200, 164, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 164, 108, 0); } }
.fm-caption { display: none; }
.fm-labels { margin: 0; padding: 0; list-style: none; }
.fm-label { position: absolute; top: var(--ly); width: var(--lw, 16%); transform: translateY(-50%); opacity: 0; transition: opacity .6s ease .9s; }
.fm-stage.is-visible .fm-label { opacity: 1; }
.fm-label--v { right: var(--lrv, var(--lr, 83.4%)); text-align: right; }
.fm-label--h { left: var(--lr, 83.4%); text-align: left; }
.fm-label button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; transition: opacity .3s ease; }
.fm-label--v button { justify-content: flex-end; }
.fm-num { display: none; }
.fm-text strong { display: block; font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 500; line-height: 1.25; color: var(--ap-ink); }
.fm-text > span { display: block; margin-top: 2px; font-size: clamp(11.5px, .85vw, 13px); line-height: 1.35; color: var(--ap-soft); }
.fm-label.is-on strong { color: var(--gold-text); }
.fm.has-pick .fm-label:not(.is-on) button { opacity: .3; }
.fm-label button:focus-visible, .fm-pin:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1000px) {
  /* Mobil og nettbrett: nummer på bildet og en liste under, ingen linjer */
  .fm-hint-pc { display: none; }
  .fm-hint-mob { display: inline; }
  .fm-stage { aspect-ratio: auto; }
  .fm-stage { overflow: hidden; }
  .fm-photo { position: relative; left: auto; width: var(--mw, 100%); height: auto; margin-left: var(--ml, 0); aspect-ratio: var(--par, 1536 / 1024); }
  .fm-lines { display: none; }
  .fm-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 0; background: #fff; font: 600 11.5px/1 var(--sans); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); animation: none; transition-delay: calc(var(--i) * 50ms + .4s); }
  .fm-pin span { display: inline; }
  /* Det valgte punktet står med navn nederst på bildet, så du ser det uten å bla ned til listen */
  .fm-caption { display: block; position: absolute; left: 50%; top: 9%; z-index: 3; max-width: var(--mcap, 80%); margin: 0; padding: 8px 14px; border-radius: 999px;
    background: rgba(18, 18, 20, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    color: #f5f5f7; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translate(-50%, 6px); transition: opacity .3s ease, transform .3s var(--ease); pointer-events: none; }
  .fm-caption strong { color: var(--gold); font-weight: 500; }
  .fm.has-pick .fm-caption { opacity: 1; transform: translate(-50%, 0); }
  .fm-pin.is-on { background: var(--gold); }
  .fm-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .fm-label { position: static; width: auto; transform: none; text-align: left; transition-delay: .3s; }
  .fm-label--v button { justify-content: flex-start; }
  .fm-label button { align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--ap-line); transition: background .25s, box-shadow .25s, opacity .3s; }
  .fm-label.is-on button { background: #faf5ec; box-shadow: inset 0 0 0 1px rgba(200, 164, 108, .55); }
  .fm-num { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ap-grey); color: var(--ap-ink); font-size: 11.5px; font-weight: 600; }
  .fm-label.is-on .fm-num { background: var(--gold); color: #1d1d1f; }
  .fm-text strong { font-size: 14px; }
  .fm-text > span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-line { transition: opacity .3s; stroke-dashoffset: 0; }
  .fm-pin { animation: none; transition: none; opacity: 1; scale: 1; }
  .fm-label { transition: none; opacity: 1; }
}

/* Mål på ekte bilder (spec_sheet.photo_dims): gylne mållinjer og tall oppå bildet */
.ps-photo { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1522 / 1033; }
.ps-photo img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ps-ann { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ps-ann line { stroke: var(--gold-text); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ps-lab { position: absolute; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--ap-line); font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--ap-ink); white-space: nowrap; }
.ps-lab--l { transform: translate(-100%, -50%); }

/* ---------- Stålet (steel.py): rustfritt stål 304 mot stål 201 og aluminium ---------- */
.st-sub { max-width: 660px; margin-left: auto; margin-right: auto; text-wrap: balance; }
/* PC: tre like brede kort, «vs» i en egen kolonne mellom 304 og de to andre */
.st-grid { --vsw: clamp(64px, 8vw, 128px); --g: clamp(14px, 2vw, 28px); container-type: inline-size; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--vsw) minmax(0, 1fr) var(--g) minmax(0, 1fr); align-items: start; margin-top: clamp(32px, 4.5vw, 64px); }
.st-others { display: contents; }
.st-others > :first-child { grid-column: 3; }
.st-others > :last-child { grid-column: 5; }
.st-card { display: flex; flex-direction: column; margin: 0; }
.st-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; height: 30px; margin: 0 0 14px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; letter-spacing: -.01em; color: var(--ap-ink); text-align: center; }
.st-tag { padding: 4px 10px; border-radius: 999px; background: var(--ap-grey); font-size: 11.5px; font-weight: 500; letter-spacing: .03em; color: var(--ap-soft); }
.st-card--ours .st-tag { background: rgba(200, 164, 108, .16); color: var(--gold-text); }
.st-img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--ap-radius); background: var(--ap-grey); box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .45); }
.st-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.st-card:hover .st-img img { transform: scale(1.045); }
.st-card--ours .st-img { box-shadow: 0 0 0 2px var(--gold), 0 26px 52px -26px rgba(0, 0, 0, .4); }
.st-card figcaption { display: grid; justify-items: center; gap: 6px; padding: 20px 6px 0; text-align: center; }
.st-card figcaption strong { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--ap-ink); }
.st-card figcaption span { max-width: 34ch; font-size: 14.5px; line-height: 1.55; color: var(--ap-soft); }
.st-card figcaption small { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--gold-text); }
/* «vs» står midt på bildene: navnet over bildet (44px) + halve bildet (kortet er en tredjedel av bredden, bildet 4:5) */
.st-vs { margin: 0; padding-top: calc(44px + (100cqw - var(--vsw) - var(--g)) / 3 * .625 - .5em); font-family: var(--accent); font-style: italic; font-size: clamp(44px, 5vw, 78px); line-height: 1; color: var(--ap-ink); text-align: center; opacity: .9; }
.st-quote { max-width: 780px; margin: clamp(52px, 6.5vw, 96px) auto 0; font-family: var(--serif); font-size: clamp(24px, 2.7vw, 40px); font-weight: 400; letter-spacing: -.03em; line-height: 1.2; color: var(--ap-ink); text-align: center; text-wrap: balance; }
.st-quote em { font-family: var(--accent); font-style: italic; color: var(--logo-gold); }
.st-tip { margin: 16px auto 0; font-size: 14px; color: var(--ap-soft); text-align: center; }
@media (max-width: 760px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-others > :first-child, .st-others > :last-child { grid-column: auto; }
  .st-label { height: auto; }
  .st-card--ours { width: min(100%, 420px); margin: 0 auto; }
  .st-card--ours .st-img { aspect-ratio: 4 / 3; }
  .st-vs { padding: 18px 0 14px; font-size: 52px; text-align: center; }
  .st-others { gap: 12px; }
  .st-others .st-label { min-height: 52px; flex-direction: column; gap: 6px; font-size: 15px; }
  .st-card figcaption { padding-top: 14px; }
  .st-others figcaption strong { font-size: 17px; }
  .st-others figcaption span { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .st-img img { transition: none; } }

/* «Laget for deg» med miljøbilde: bildet i full bredde, teksten over til venstre */
.pp-why--scene { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: clamp(640px, 92vh, 920px); }
.pp-why-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; }
.pp-why--scene::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .72) 30%, rgba(0, 0, 0, .28) 58%, rgba(0, 0, 0, 0) 78%),
              linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 30%); }
.pp-why-scene-wrap { width: 100%; }
.pp-why--scene .pp-why-copy { max-width: 520px; }
.pp-why--scene .pp-why-list li { border-top-color: rgba(245, 245, 247, .2); }
.pp-why--scene .ap-sub, .pp-why--scene .pp-why-list span:not(.pp-why-num) { color: #d2d2d7; }
@media (max-width: 1000px) {
  /* Smalt: bildet øverst, som går over i sort bak teksten */
  .pp-why--scene { display: block; min-height: 0; padding-top: 58vw; }
  .pp-why-bg { height: auto; aspect-ratio: 16 / 10; bottom: auto; object-position: 70% 50%; }
  .pp-why--scene::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28vw, #000 62vw); }
  .pp-why--scene .pp-why-copy { max-width: none; }
}