/* ===== Boblebokstaver (D-B2, Dina 01.11.2026) — erstatter D-B1 =====
   FORSLAG til tillegg i public/css/design.css. Bygger på order.css/styles.css/design.css; ingen ny visuell retning.
   Én farge per linje, én plate. Nye komponenter: bb-tile, bb-glyph, bb-row, bb-plate, bb-meter, bb-over, bb-name.
   Gjenbruk: .order, .summary, .swatches/.swatch, .qty, .notice(--warn/--info/--err/--ok), .buy-actions, .order-bar--pair,
   .skel, .cart-line(__nowd), .summary__lines, .summary__note. Ingen tekst under 14 px. */

/* Silhuett: hvit PNG fra STL brukt som maske, farget med --c. Ytre element bærer omrisset (filter før maske), så hvit/gul syns på lys flate. */
.bb-glyph { display: block; filter: drop-shadow(0 0 0.6px rgba(36, 28, 21, 0.8)); }
.bb-glyph > i { display: block; width: 100%; height: 100%; background: var(--c, var(--o-ink)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* Ord-/navnefelt: fyller listen, ordet sendes/lagres ikke. */
.bb-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.bb-name .field { flex: 1 1 200px; margin: 0; }
.bb-name .btn { min-height: 48px; }
.bb-skipped { margin: 8px 0 0; font-size: 14px; color: var(--o-ink-2); }

/* Bokstavvelger: trykk = +1. Flisene er nøytrale (blekk); fargen vises i listen og på platen. */
.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .bb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } }
.bb-grid + .order-section__title { margin-top: 20px; }
.bb-tile { position: relative; display: grid; place-items: center; width: 100%; min-height: 48px; aspect-ratio: 1; padding: 8px; border: 1px solid var(--o-line-strong); border-radius: 10px; background: var(--o-surface); cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 120ms ease-out; -webkit-tap-highlight-color: transparent; }
.bb-tile .bb-glyph { width: 100%; height: 100%; }
@media (hover: hover) { .bb-tile:hover:not([aria-disabled="true"]) { border-color: var(--o-ink); } }
.bb-tile:active:not([aria-disabled="true"]) { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .bb-tile { transition: none; } .bb-tile:active { transform: none; } }
.bb-tile:focus-visible { outline: 2px solid var(--o-focus); outline-offset: 2px; }
.bb-tile.is-on { border-color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink); }
.bb-tile__n { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--o-ink); color: var(--o-bg); font: 600 14px/22px var(--o-font-mono); font-variant-numeric: tabular-nums; text-align: center; }
/* Får ikke plass (forvarsel, fortsatt trykkbar): stiplet kant + nedtonet tegn. Aldri bare farge. */
.bb-tile.is-tight { border-style: dashed; background: transparent; }
.bb-tile.is-tight .bb-glyph { opacity: 0.35; }
/* Maks 20 nådd: ekte sperre, men fokuserbar (aria-disabled), så hintet leses opp. */
.bb-tile[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; background: transparent; }
.bb-tile[aria-disabled="true"] .bb-glyph { opacity: 0.3; }
.bb-hint { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--o-ink-2); }
.bb-hint:empty { display: none; }

/* Listen: én rad per tegn, antall med .qty. */
.bb-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--o-line); }
.bb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.bb-row .bb-glyph { width: 40px; height: 40px; }
.bb-row__name { font-weight: 600; color: var(--o-ink); }
.bb-row__name small { display: block; font-weight: 500; font-size: 14px; color: var(--o-warn); }
.bb-row .linkbtn, .bb-clear { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 14px var(--o-font-body); color: var(--o-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bb-row.is-over .bb-glyph { opacity: 0.5; }
@media (max-width: 380px) { .bb-row { grid-template-columns: 40px minmax(0, 1fr) auto; } .bb-row .linkbtn { grid-column: 2 / -1; justify-self: start; min-height: 32px; } }
.bb-empty { margin: 0; padding: 16px; border: 1px dashed var(--o-line-strong); border-radius: var(--o-radius); font-size: 14px; color: var(--o-ink-2); }

/* Plate 256 x 256 mm ovenfra, forsiden av printeren nederst; posisjon = nedre venstre hjørne av bbox (bubble-pack.js). */
.bb-plate { margin: 0 0 12px; }
.bb-plate__bed { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--o-line-strong); border-radius: 8px; background-color: var(--o-surface); background-image: linear-gradient(var(--o-line) 1px, transparent 1px), linear-gradient(90deg, var(--o-line) 1px, transparent 1px); background-size: 12.5% 12.5%; background-position: -1px -1px; overflow: hidden; }
.bb-plate__zone { position: absolute; left: 0; bottom: 0; width: 7.42%; height: 11.33%; background: repeating-linear-gradient(45deg, var(--o-surface-2) 0 3px, var(--o-line) 3px 6px); }
.bb-plate__item { position: absolute; }
.bb-plate__item > .bb-glyph { width: 100%; height: 100%; }
.bb-plate__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 14px; color: var(--o-ink-3); }
.bb-plate figcaption { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--o-ink-3); }
/* Det som ikke får plass: egen stripe under platen, stiplet, så kunden ser HVILKE tegn det gjelder. */
.bb-over { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; padding: 8px 10px; border: 1px dashed var(--o-warn); border-radius: 8px; background: var(--o-warn-soft); font-size: 14px; color: var(--o-ink); }
.bb-over .bb-glyph { width: 22px; height: 26px; }

/* Plassmåleren: tekst + det aktuelle tegnet («som denne»). Tall i mono. */
.bb-meter { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--o-ink); }
.bb-meter b { font: 600 15px var(--o-font-mono); font-variant-numeric: tabular-nums; }
.bb-meter .bb-glyph { flex: none; width: 22px; height: 26px; }
.bb-meter--none { color: var(--o-ink-2); }

/* Priseforklaring under totalen (regel + ev. «29 kr per bokstav fordi …»). */
.bb-pricewhy { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--o-ink-2); }
.bb-pricewhy b { color: var(--o-ink); font-weight: 600; }

/* Kurv: miniplate med opptil 6 silhuetter i stedet for «3D». Priseforklaring per linje. */
.cart-line__img.bb-mini { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1px; padding: 4px; }
.bb-mini .bb-glyph { width: 12px; height: 17px; }
.cart-line__why { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--o-ink-3); }
@media (max-width: 560px) { .cart-line__why { grid-column: 2; } }

/* Mobil: knappene ligger i .order-bar--pair. Teksten om at det ikke får plass vises også rett over linjen (bb-bar-why). */
@media (max-width: 860px) { .bb-buy-d { display: none; } }
.order-bar__label.is-warn { color: var(--o-warn); font-weight: 600; }
.bb-meter:empty { display: none; }

/* ===== Tillegg i produksjon (K3) ===== */
.bb-h3 { margin-top: 20px; }
.bb-retry { margin-top: 8px; }
.bb-undo { font-weight: 600; }
.bb-about ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.bb-card-art { display: flex; align-items: center; justify-content: center; gap: 4%; background: var(--o-surface-2); aspect-ratio: 4 / 3; }
.bb-card-art .bb-glyph { aspect-ratio: 0.9; }
.design-card__text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--o-ink-2); }
.bb-glyph--sm { width: 22px; height: 26px; }
.cart-line__merke, .cart-line__nowd { grid-column: 2 / -1; font-size: 14px; color: var(--o-ink-2); }

/* Kortets illustrasjon (serverrendret, CSP: farge og maske via klasser, ikke inline style) */
.bb-card-art .bb-ca { width: 22%; }
.bb-ca > i { --m: none; }
.bb-ca--P { --c: #C8102E; } .bb-ca--X { --c: #1F4FA8; } .bb-ca--D { --c: #E8641C; }
.bb-ca--P > i { --m: url(/nettbutikk/boblebokstaver-bokstaver/P.png); }
.bb-ca--X > i { --m: url(/nettbutikk/boblebokstaver-bokstaver/X.png); }
.bb-ca--D > i { --m: url(/nettbutikk/boblebokstaver-bokstaver/D.png); }
/* Kurvlinjen: merke og prisforklaring i ÉN celle som spenner hele raden (ikke i de smale gridcellene) */
.cart-line__bb { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 560px) { .cart-line__bb { grid-column: 1 / -1; } }
.cart-line__bb > span, .cart-line__bb > p { font-size: 14px; line-height: 1.5; color: var(--o-ink-3); margin: 0; overflow-wrap: anywhere; }
.cart-line__bb > .cart-line__nowd { color: var(--o-ink); font-weight: 600; }

/* SEO-tekst under velgeren og CLS: reserver plass til fargene før de hentes */
#bb-colors { min-height: 76px; }
.bb-seo, .nb-seo { padding-top: 24px; max-width: 760px; }
.bb-seo h2, .nb-seo h2 { margin-top: 24px; } .bb-seo h3, .nb-seo h3 { margin: 16px 0 4px; font-size: 1rem; } .bb-seo p, .nb-seo p { margin: 0 0 8px; line-height: 1.6; }
.nb__intro { max-width: 65ch; margin: 0 0 16px; line-height: 1.6; color: var(--o-ink-2); }

/* Fargevelgeren står i kjøpsboksen (aside) rett over pris, som for skilt og andre produkter. */
.bb-pick { margin: 16px 0 0; }
.bb-pick .order-section__title { font-size: 16px; }
.bb-gallery { margin-bottom: 24px; }

/* Hovedbildet er kvadratisk men maks ca. 560 px bredt og sentrert (ikke ~710 px høyt med tom bakgrunn): miniatyrene havner høyere opp. */
.bb-gallery .dp__main-img { display: flex; justify-content: center; background: var(--bg-alt-2, #EEE6DA); }
.bb-gallery .dp__main-img img { width: min(100%, 560px); height: auto; aspect-ratio: 1; }

/* Kjøpsboksen (aside, desktop): kompakt og i naturlig høyde, INGEN intern rulling. Øverst fargevelgeren, så en liten plate (helt synlig), pris og knapper side om side, hint og angrerett-opplysning under. */
.bb-sum { padding: 0; }
.bb-sum__top { padding: 16px 20px 4px; }
.bb-sum__buy { padding: 4px 20px 16px; }
.bb-sum .bb-plate { margin: 8px 0 4px; }
.bb-sum .bb-plate__bed { max-width: 130px; margin: 0 auto; }
.bb-sum .bb-plate figcaption { font-size: 12px; line-height: 1.4; margin-top: 4px; }
.bb-sum .summary__rows { margin-top: 4px; }
.bb-sum .summary__row { padding: 1px 0; font-size: 14px; }
.bb-sum .bb-pick { margin: 0; }
.bb-sum .bb-pick .order-section__title { font-size: 15px; margin-bottom: 4px; }
.bb-sum .bb-pick .order-section__help { font-size: 12.5px; margin: 4px 0 0; }
.bb-sum .swatches { gap: 4px; }
.bb-sum .swatch { min-width: 48px; min-height: 40px; padding: 2px; }
.bb-sum .swatch__chip { width: 22px; height: 22px; }
.bb-sum .swatch__name { font-size: 12px; }
.bb-sum__buy .summary__total { padding: 8px 0 2px; }
.bb-sum__buy .bb-pricewhy { margin: 2px 0 6px; font-size: 13px; }
@media (min-width: 861px) { .bb-sum__buy .buy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bb-sum__buy .buy-actions .btn { min-height: 44px; padding: 0 8px; } }
.bb-sum__buy .summary__note { font-size: 12.5px; line-height: 1.4; margin: 8px 0 0; }
.bb-sum__buy .buy-added { margin-top: 8px; font-size: 13px; }
@media (min-width: 1100px) { .order:has(.bb-sum) { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (min-width: 1240px) { .order:has(.bb-sum) { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; } }
@media (min-width: 861px) { .order__aside:has(.bb-sum) { align-self: start; } }

/* «Bokstavene dine»: kompakte chips som brytes over flere linjer (glyf, navn, antall med −/+ og ✕). */
.bb-rows { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; margin: 0; padding: 0; list-style: none; }
.bb-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 4px 6px 4px 8px; border: 1px solid var(--o-line-strong); border-radius: 999px; background: var(--o-surface); }
.bb-row .bb-glyph { width: 24px; height: 24px; }
.bb-row__name { font-weight: 600; }
.bb-row__name small { display: inline; margin-left: 6px; }
.bb-row .qty button { min-width: 32px; min-height: 32px; }
.bb-row .qty input { width: 3.2ch; min-height: 32px; text-align: center; }
.bb-row .linkbtn { min-height: 32px; min-width: 32px; padding: 0 6px; text-decoration: none; font-size: 16px; }
.bb-row.is-over { border-style: dashed; }

/* Kompakt: tellerradene (Bokstaver/Farge) er redundante visuelt (fargen står i fargevelgeren, antallet i chipsene) og er bare for skjermlesere. */
.bb-sum .summary__rows { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bb-sum .bb-plate__bed { max-width: 120px; }
.bb-sum__top { padding-top: 12px; } .bb-sum__buy { padding-bottom: 12px; }
@media (min-width: 861px) and (max-height: 760px) { /* plateteksten er kun for skjermlesere når vinduet er lavt */
  .bb-sum .bb-plate figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 861px) and (max-height: 700px) { /* svært lavt vindu: platen er kun for skjermlesere (stripen «Får ikke plass» og teksten i hovedkolonnen står) */
  .bb-sum .bb-plate__bed { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .bb-sum .bb-plate { margin: 0; }
}
@media (min-width: 861px) and (max-height: 520px) { .order__aside:has(.bb-sum) { position: static; } } /* aller lavest: siden scroller naturlig, ingen sticky */

/* Desktop: bekreftelsen «Lagt i kurven» er en flytende melding (ikke i kjøpsboksen), så boksen holder samme høyde etter «Legg i kurv». Skjules av bubble.js etter ca. 12 s. */
@media (min-width: 861px) {
  .bb-sum #bb-added { position: fixed; left: 24px; bottom: 24px; z-index: 40; width: min(360px, calc(100vw - 48px)); margin: 0; box-shadow: 0 8px 24px rgba(36, 28, 21, 0.22); }
}