/* ========= CHROME ========= */
    .topstrip { background: var(--ink); color: var(--snow); padding: 10px var(--gutter); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: center; }
    .topstrip__pills { display: flex; gap: 28px; }
    .topstrip__pills span { display: inline-flex; align-items: center; gap: 8px; opacity: 0.8; }
    .topstrip__pills .dot { background: var(--cobalt-soft); width: 8px; height: 8px; border-radius: 50%; }
    .topstrip__lang { display: flex; gap: 20px; }
    .topstrip__lang a { opacity: 0.6; }
    .topstrip__lang a[aria-current="true"], .topstrip__lang a:hover { opacity: 1; }

    .nav { background: var(--snow); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
    .nav__row { max-width: var(--content-w); margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; }
    .logo__img { height: 44px; width: auto; display: block; }
    .nav__primary { display: flex; gap: 32px; justify-content: center; font-size: 14.5px; font-weight: 500; }
    .nav__primary a { padding: 8px 0; border-bottom: 1.5px solid transparent; }
    .nav__primary a:hover, .nav__primary a[aria-current="page"] { border-color: var(--cobalt); }
    .nav__util { display: flex; gap: 24px; align-items: center; font-size: 14px; }
    .nav__util a { display: inline-flex; align-items: center; gap: 8px; }
    .nav__util .cart { background: var(--ink); color: var(--snow); padding: 10px 18px; border-radius: var(--r-1); font-weight: 500; }
    .nav__util .cart b { font-family: var(--font-mono); font-size: 12px; opacity: 0.8; margin-left: 6px; font-weight: 400; }
    @media (max-width: 1100px) { .nav__row { grid-template-columns: auto auto; } .nav__primary { display: none; } }

    /* ========= BREADCRUMB ========= */
    .crumb { max-width: var(--content-w); margin: 0 auto; padding: 20px var(--gutter) 0; font-size: 12px; color: var(--ink-mute); display: flex; gap: 8px; flex-wrap: wrap; }
    .crumb a:hover { color: var(--ink); }
    .crumb span[aria-current] { color: var(--ink); }

    /* ========= PDP MAIN ========= */
    .pdp { max-width: var(--content-w); margin: 0 auto; padding: 28px var(--gutter) var(--s-16); display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
    @media (max-width: 1000px) { .pdp { grid-template-columns: 1fr; gap: 32px; } }

    /* GALLERY */
    .gal { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; position: sticky; top: 96px; }
    .gal__thumbs { display: flex; flex-direction: column; gap: 8px; }
    .gal__thumb { aspect-ratio: 1; background: var(--stone); border: 1.5px solid var(--line); cursor: pointer; padding: 0; overflow: hidden; }
    .gal__thumb[aria-pressed="true"] { border-color: var(--ink); }
    .gal__thumb .bg { width: 100%; height: 100%; }
    /* Pernille 2/9: kilderne er 1:1 (600x600); 4:5-boksen beskar moensteret. */
    .gal__main { aspect-ratio: 1/1; background: var(--stone); border: 1.5px solid var(--ink); position: relative; overflow: hidden; }
    .gal__main .bg { width: 100%; height: 100%; }
    /* Marc 2/9: Forudbestil-badgen (+ lang note fra _product_barcode) voksede
       ud af billedboksen. right:16px giver rækken en kant at bryde mod. */
    .gal__badges { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
    .gal__badge { background: var(--ink); color: var(--snow); padding: 5px 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: normal; line-height: 1.45; max-width: 100%; }
    .gal__badge--moss { background: var(--moss); }
    /* Forudbestil-tilstanden. --rust #B85A1C mod --snow giver 4,65:1 — over AA's
       4,5 for de 11px, så badgen må gerne bære den lille versaltekst. */
    .gal__badge--rust { background: var(--rust); }
    .gal__zoom { position: absolute; bottom: 16px; right: 16px; width: 40px; height: 40px; background: var(--snow); border: 1.5px solid var(--ink); display: grid; place-items: center; cursor: pointer; }
    .gal__zoom:hover { background: var(--ink); color: var(--snow); }
    @media (max-width: 700px) { .gal { grid-template-columns: 1fr; } .gal__thumbs { flex-direction: row; overflow-x: auto; } .gal__thumb { flex: 0 0 88px; } }

    /* Left column wrapper (used only when gallery + extras stacked) */
    .left-col { display: flex; flex-direction: column; gap: 16px; }

    /* INFO COLUMN */
    .info { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }
    @media (max-width: 1000px) { .info { position: static; } .gal { position: static; } }
    .info__kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
    .info h1 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h2); margin: 0; line-height: 1.04; letter-spacing: -0.025em; }
    .info h1 em { font-style: italic; color: var(--cobalt); }
    .info__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .info__meta .sku { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); background: var(--snow-deep); padding: 4px 10px; }
    .info__meta .tag { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 10px; border: 1px solid var(--line); color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
    .info__meta .tag--cobalt { background: var(--cobalt-tint); border-color: var(--cobalt); color: var(--cobalt-deep); }

    /* Variant selector */
    .variants { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
    .variants__label { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
    .variants__label b { color: var(--ink); font-weight: 500; }
    .variants__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .variant { display: flex; flex-direction: column; align-items: start; gap: 6px; padding: 10px 12px; background: var(--paper); border: 1.5px solid var(--line); cursor: pointer; text-align: left; }
    .variant:hover { border-color: var(--ink); }
    .variant[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); }
    .variant__head { display: flex; align-items: center; gap: 8px; width: 100%; }
    .variant__sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ink); flex-shrink: 0; }
    .variant__name { font-size: 13px; font-weight: 500; }
    .variant__stock { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.04em; }
    .variant[aria-pressed="true"] .variant__stock { color: var(--cobalt-deep); }
    .variant[data-stock="out"] { opacity: 0.5; cursor: not-allowed; }
    .variant[data-stock="out"] .variant__stock { color: var(--rust); }

    /* 2-unit selector (mirrors category) */
    .units-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
    .unit-label { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 4px; }
    .unit-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: var(--paper); border: 1.5px solid var(--line); cursor: pointer; text-align: center; }
    .unit-btn:hover { border-color: var(--ink); }
    .unit-btn[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); }
    .unit-btn img { width: 44px; height: 44px; object-fit: contain; opacity: 0.9; mix-blend-mode: multiply; }
    .unit-btn[aria-pressed="true"] img { opacity: 1; }
    .unit-btn .label { font-size: 13px; font-weight: 500; }
    .unit-btn .per-m { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; }
    .unit-btn .price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
    .unit-btn[aria-pressed="true"] .per-m { color: var(--cobalt-deep); }
    .unit-btn[aria-pressed="true"] .price { color: var(--cobalt); }
    .unit-btn .savings { display: inline-block; margin-top: 6px; padding: 2px 8px; background: var(--moss); color: var(--snow); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

    /* QTY + ADD */
    .qty-row { display: flex; gap: 8px; align-items: stretch; }
    .qty { display: flex; align-items: center; background: var(--paper); border: 1.5px solid var(--ink); height: 60px; }
    .qty button { width: 48px; background: 0; border: 0; cursor: pointer; font-size: 18px; height: 100%; }
    .qty button:hover { background: var(--snow-deep); }
    .qty input { width: 80px; height: 100%; border: 0; text-align: center; font-size: 18px; font-family: var(--font-mono); font-weight: 500; background: transparent; outline: 0; color: var(--ink); }
    .qty__unit { padding: 0 14px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border-left: 1px solid var(--line); display: flex; align-items: center; }
    .qty + .btn-add { flex: 1; }

    .btn-add { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 20px; background: var(--cobalt); color: var(--snow); border: 1.5px solid var(--cobalt); font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; line-height: 1.1; flex: 1; min-width: 0; }
    .btn-add:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
    .btn-add__label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
    .btn-add__label .lead { font-size: 14px; font-weight: 500; }
    .btn-add__label .sub { font-family: var(--font-mono); font-size: 11px; opacity: 0.8; font-weight: 400; }
    .btn-add b { font-family: var(--font-mono); font-weight: 500; margin-left: auto; padding-left: 14px; border-left: 1px solid rgba(248,248,244,0.3); font-size: 15px; }

    .btn-sec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 16px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
    .btn-sec:hover { background: var(--ink); color: var(--snow); border-color: var(--ink); }

    /* Certification badges with real cert visuals */
    .certs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); }
    .cert-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--snow); border: 1px solid var(--line); border-radius: var(--r-pill); }
    .cert-badge:hover { border-color: var(--ink); }
    .cert-badge__icon { width: 30px; height: 30px; flex-shrink: 0; }
    .cert-badge__text { display: flex; flex-direction: column; line-height: 1.15; }
    .cert-badge__text b { font-size: 11.5px; font-weight: 600; }
    .cert-badge__text span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; }
    .cert-pdf { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; margin-left: auto; }
    .cert-pdf:hover { color: var(--ink); }

    /* Use-case + delivery promise block (B2B priority surface) */
    /* auto-fit, ikke 1fr 1fr: V-02c fjerner mængdecellen på 1.039 varer uden
       købsstige, og en fast todeling ville efterlade en tom halvdel ved siden af
       leveringsløftet. Med auto-fit fylder den tilbageværende celle rækken selv.
       Samme regel løser den anden vej: på en 390 px telefon var to spalter à
       185 px med ikon og to tekstlinjer klemt — nu stables de. */
    .promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
    .promise__cell { display: flex; gap: 10px; align-items: start; padding: 12px; background: var(--cobalt-wash); border: 1px solid var(--cobalt-tint); }
    .promise__cell svg { color: var(--cobalt); flex-shrink: 0; margin-top: 1px; }
    .promise__cell b { display: block; font-size: 12.5px; font-weight: 600; }
    .promise__cell span { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }

    /* Logged-in tier note */
    .tier-note { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border: 1px dashed var(--cobalt); font-size: 12px; color: var(--ink-mute); background: var(--cobalt-wash); }
    .tier-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }
    .tier-note b { color: var(--ink); font-weight: 500; }

    /* ========= SPECS + DESC ========= */
    .specs { max-width: var(--content-w); margin: 0 auto; padding: var(--s-12) var(--gutter) var(--s-12); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border-top: 1px solid var(--line); }
    .specs h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h2); margin: 0 0 24px; letter-spacing: -0.025em; line-height: 1.04; }
    .specs h2 em { font-style: italic; color: var(--cobalt); }
    .specs__desc p { color: var(--ink-soft); font-size: var(--t-body-l); line-height: 1.55; margin: 0 0 14px; }
    .specs__desc p b { color: var(--ink); font-weight: 500; }
    .specs__table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .specs__table tr { border-top: 1px solid var(--line); }
    .specs__table tr:last-child { border-bottom: 1px solid var(--line); }
    .specs__table th { text-align: left; font-weight: 400; color: var(--ink-mute); padding: 14px 0; width: 38%; font-size: 13px; }
    .specs__table td { padding: 14px 0; }
    .specs__table td.mono { font-family: var(--font-mono); font-size: 12.5px; }
    @media (max-width: 900px) { .specs { grid-template-columns: 1fr; gap: 32px; } }

    /* CARE */
    .care { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }
    .care__grid { background: var(--snow); border: 1.5px solid var(--ink); padding: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .care__item .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--cobalt-tint); border: 1.5px solid var(--cobalt); display: grid; place-items: center; margin-bottom: 12px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--cobalt-deep); }
    .care__item b { display: block; font-size: 14px; font-weight: 500; }
    .care__item span { font-size: 12.5px; color: var(--ink-mute); }
    @media (max-width: 700px) { .care__grid { grid-template-columns: 1fr 1fr; } }

    /* MATCHED BUNDLE PANEL */
    .match { max-width: var(--content-w); margin: var(--s-16) auto 0; padding: 0 var(--gutter); }
    .match__inner { background: var(--cobalt-tint); border: 1.5px solid var(--cobalt); padding: 32px 36px; }
    .match__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
    .match__head h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h2); margin: 0; letter-spacing: -0.025em; line-height: 1; color: var(--ink); }
    .match__head h2 em { font-style: italic; color: var(--cobalt-deep); }
    .match__head p { color: var(--cobalt-deep); font-size: 13px; margin: 4px 0 0; }
    .match__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .match-card { background: var(--snow); border: 1px solid var(--cobalt); padding: 14px; display: flex; gap: 12px; align-items: center; }
    .match-card__media { width: 56px; height: 56px; flex-shrink: 0; }
    .match-card__info { flex: 1; min-width: 0; }
    .match-card__info b { font-size: 13px; font-weight: 500; display: block; line-height: 1.2; }
    .match-card__info .sku { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.04em; }
    .match-card__info .price { font-family: var(--font-mono); font-size: 11.5px; color: var(--cobalt-deep); margin-top: 2px; }
    .match-card__add { width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt); color: var(--snow); border: 0; cursor: pointer; font-size: 16px; flex-shrink: 0; }
    .match-card__add:hover { background: var(--cobalt-deep); }
    @media (max-width: 900px) { .match__grid { grid-template-columns: 1fr 1fr; } }

    /* VAULT UPSELL */
    .vault-strip { max-width: var(--content-w); margin: var(--s-16) auto 0; padding: 0 var(--gutter); }
    .vault-strip__inner { background: var(--vault-bg); color: var(--vault-ink); padding: 32px 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
    .vault-strip__foil { background: var(--vault-foil); color: #1A1408; padding: 5px 12px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    .vault-strip h3 { font-family: var(--font-sans); font-weight: 400; font-size: 28px; line-height: 1.04; margin: 0; letter-spacing: -0.022em; }
    .vault-strip h3 em { font-style: italic; background: var(--vault-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
    /* Pernille 2/9: broedteksten var for svag paa den moerke bund. */
    .vault-strip p { color: rgba(244, 240, 232, 0.82); font-size: 13px; margin: 4px 0 0; }
    .vault-strip .btn-foil { background: var(--vault-foil); color: #1A1408; padding: 14px 24px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
    @media (max-width: 700px) { .vault-strip__inner { grid-template-columns: 1fr; padding: 24px; } }

    /* RELATED */
    .related { max-width: var(--content-w); margin: var(--s-20) auto 0; padding: 0 var(--gutter); }
    .related__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
    .related__head h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h2); margin: 0; letter-spacing: -0.025em; line-height: 1; }
    .related__head h2 em { font-style: italic; color: var(--cobalt); }
    .related__head a { font-size: 13px; font-weight: 500; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; }
    .related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .rel-card { background: var(--snow); border: 1.5px solid var(--ink); }
    .rel-card .media { aspect-ratio: 1; border-bottom: 1.5px solid var(--ink); }
    .rel-card .body { padding: 12px 14px; }
    .rel-card h4 { font-family: var(--font-sans); font-weight: 500; font-size: 14px; margin: 0; line-height: 1.2; }
    .rel-card .meta { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
    .rel-card .price { color: var(--ink); font-weight: 500; }
    @media (max-width: 900px) { .related__grid { grid-template-columns: 1fr 1fr; } }

    /* ========= FLYOUT (same as category) ========= */
    .flyout { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; }
    .flyout[data-open="true"] { pointer-events: auto; visibility: visible; }
    /* Selve panelreglen er flyttet til theme.css (V-07) — ét ark ejer bredden. */
    .flyout__backdrop { position: absolute; inset: 0; background: rgba(13,16,25,0.45); opacity: 0; transition: opacity var(--d-med) var(--ease); cursor: pointer; }
    .flyout[data-open="true"] .flyout__backdrop { opacity: 1; }
    .flyout__head { padding: 24px 28px 20px; border-bottom: 1.5px solid var(--ink); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
    .flyout__head h2 { font-family: var(--font-sans); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.025em; margin: 0; }
    .flyout__head h2 em { font-style: italic; color: var(--cobalt); }
    .flyout__close { width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid var(--ink); cursor: pointer; font-size: 16px; background: 0; }
    .flyout__close:hover { background: var(--ink); color: var(--snow); }
    .ship-bar { padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--cobalt-wash); }
    .ship-bar__row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; }
    .ship-bar__row b { font-weight: 600; color: var(--cobalt-deep); }
    .ship-bar__track { height: 4px; background: var(--snow); border: 1px solid var(--cobalt); border-radius: var(--r-pill); overflow: hidden; }
    .ship-bar__fill { height: 100%; background: var(--cobalt); border-radius: var(--r-pill); }
    .delivery-info { padding: 14px 28px; display: flex; gap: 12px; align-items: start; border-bottom: 1px solid var(--line); }
    .delivery-info svg { color: var(--cobalt); flex-shrink: 0; margin-top: 2px; }
    .delivery-info b { font-weight: 600; display: block; font-size: 13px; }
    .delivery-info span { font-size: 12px; color: var(--ink-soft); display: block; line-height: 1.45; }
    .flyout__lines { padding: 16px 28px; }
    .fline { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .fline:last-child { border-bottom: 0; }
    .fline__media { width: 56px; height: 56px; background: var(--stone); border: 1px solid var(--line); }
    .fline__name { font-size: 14px; font-weight: 500; margin: 0; line-height: 1.2; }
    .fline__meta { display: flex; gap: 8px; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); align-items: center; }
    .fline__meta img { width: 16px; height: 16px; opacity: 0.7; }
    .fline__price { text-align: right; font-family: var(--font-sans); font-weight: 500; font-size: 16px; }
    .flyout__totals { padding: 20px 28px 0; display: flex; flex-direction: column; gap: 8px; }
    .flyout__totals .row { display: flex; justify-content: space-between; font-size: 13.5px; }
    .flyout__totals .row.big { border-top: 1.5px solid var(--ink); padding-top: 14px; margin-top: 6px; font-weight: 500; font-size: 18px; }
    .flyout__cta { padding: 16px 28px 28px; display: flex; flex-direction: column; gap: 8px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; background: var(--ink); color: var(--snow); border: 1.5px solid var(--ink); cursor: pointer; }
    .btn--brand { background: var(--cobalt); border-color: var(--cobalt); }
    .btn--ghost { background: 0; color: var(--ink); }
    .btn--ghost:hover { background: var(--ink); color: var(--snow); }
    .btn--block { width: 100%; }

    /* FOOTER */
    footer.site { background: var(--ink); color: var(--snow); padding: var(--s-16) var(--gutter) 40px; margin-top: var(--s-20); }
    footer.site .ftr { max-width: var(--content-inner); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 56px; }
    footer.site .brand img { width: 220px; filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 16px; }
    footer.site .brand p { color: rgba(248,248,244,0.6); font-size: 13.5px; margin: 0; max-width: 32ch; }
    footer.site h4 { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(248,248,244,0.4); margin: 0 0 18px; }
    footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
    footer.site a { color: rgba(248,248,244,0.75); }
    footer.site a:hover { color: var(--cobalt-soft); }
    footer.site .base { max-width: var(--content-inner); margin: 64px auto 0; padding-top: 24px; border-top: 1px solid rgba(248,248,244,0.12); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: rgba(248,248,244,0.5); }
    @media (max-width: 900px) { footer.site .ftr { grid-template-columns: 1fr 1fr; } }

/* Unit buttons over the native variations form */
.units-pdp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.units-pdp .unit-btn { display: grid; gap: 2px; padding: 14px; text-align: left; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-1); cursor: pointer; }
.units-pdp .unit-btn[aria-pressed="true"] { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.units-pdp .unit-btn:disabled { opacity: 0.45; cursor: default; }
.units-pdp .unit-btn .label { font-weight: 600; }
.units-pdp .unit-btn .price { font-family: var(--font-mono); }
.units-pdp .unit-btn .per-m { font-size: 11px; color: var(--ink-mute); }
.units-pdp .unit-btn .oos { font-size: 11px; color: var(--rust); }
.has-unit-buttons .variations { display: none; }

/* F7-9/v3: banelommeregner — kun metervarer, aktiveres af pdp.js når begge
   enhedspriser findes. */
.bane { margin-top: 10px; border: 1.5px dashed var(--ink-faint); border-radius: var(--r-1); padding: 12px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.bane label { font-weight: 500; }
.bane input { width: 58px; height: 36px; text-align: center; font: inherit; font-size: 13px; border: 1.5px solid var(--ink); border-radius: var(--r-1); background: var(--paper); }
.bane input:disabled { opacity: 0.45; }
.bane__mode { font-size: 11.5px; color: var(--cobalt); text-decoration: underline; background: 0; border: 0; cursor: pointer; padding: 0; }
.bane__wrow { flex-basis: 100%; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.bane__out { flex-basis: 100%; font-family: var(--font-mono); font-size: 12.5px; color: var(--cobalt-deep); min-height: 1.2em; }

/* F7-9/v3: B2B-accordions — de fire førkøbs-spørgsmål samlet på siden. */
.b2b-acc { margin-top: 20px; border-top: 1.5px solid var(--ink); }
.b2b-acc details { border-bottom: 1px solid var(--line); }
.b2b-acc summary { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; font-size: 13.5px; font-weight: 500; cursor: pointer; list-style: none; }
.b2b-acc summary::-webkit-details-marker { display: none; }
.b2b-acc summary::after { content: "+"; font-size: 16px; color: var(--ink-mute); }
.b2b-acc details[open] summary::after { content: "−"; }
.b2b-acc .acc__body { padding: 0 2px 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.b2b-acc .acc__body b { color: var(--ink); }
.b2b-acc .acc__body a { color: var(--cobalt); text-decoration: underline; }

/* F7-9/v3: gæsteboksens to knapper + mikrolinje. */
.pdp-login__row { display: flex; gap: 10px; }
.pdp-login__row .btn { flex: 1; }
.pdp-login__micro { font-size: 11.5px; color: var(--ink-mute); }
/* F7-5: dropdown-sporet (>3 købbare varianter — elastik/tilbehør) beholder den
   native select synlig. WC's tabelmarkup får temaets sprog i stedet for
   browser-default: kompakt label over feltet, fuldbredde-select på mobil. */
form.variations_form:not(.has-unit-buttons) .variations,
form.variations_form:not(.has-unit-buttons) .variations tbody,
form.variations_form:not(.has-unit-buttons) .variations tr,
form.variations_form:not(.has-unit-buttons) .variations th,
form.variations_form:not(.has-unit-buttons) .variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
form.variations_form:not(.has-unit-buttons) .variations th.label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
/* Marc 24/8: "It's especially the farveboks that maybe needs a bit more padding".
   Feltet stod på 44px/0 12px, mens husets øvrige felter kører 48px/0 14px (se
   .bane input, .pdp-login og toolbaren i plp.css) — farveboksen var altså det
   ENESTE felt i temaet med sit eget mål, og den så trang ud fordi den var det.
   28px højre-padding + chevronen: den native pil overlappede lange farvenavne
   ("Gammelrosa meleret"). appearance:none tegner vores egen, som toolbaren
   allerede gør (plp.css:74) — samme SVG, samme placering.
   theme.css:753-757 tvinger font-size:16px !important på pointer:coarse (iOS
   zoom-spærren) og røres ikke; 14px her er desktop-værdien. */
form.variations_form:not(.has-unit-buttons) .variations select { width: 100%; max-width: 360px; height: 48px; padding: 0 40px 0 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-1); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230D1019' stroke-width='1.5'><path d='m3 5 3 3 3-3'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
form.variations_form:not(.has-unit-buttons) .variations select:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
/* Luften ligger på cellen, ikke på selectens margin: blanket-resetten ovenfor
   nulstiller padding på BÅDE th og td, så td.value (0,4,2) er stedet hvor
   rækken kan få bund uden at flytte etiketten. */
form.variations_form:not(.has-unit-buttons) .variations td.value { padding-bottom: 16px; }
form.variations_form:not(.has-unit-buttons) .variations .reset_variations { font-size: 12px; color: var(--ink-mute); }
/* Ingen fast height: den gjorde højden definit, så align-self:stretch var slået
   fra og knappen kunne ikke vokse med en 2-3-linjers etiket. min-height nedenfor
   (linje 307/327) sætter gulvet i stedet. Se R9. */
/* .has-unit-buttons -> .units-pdp: gaten var utilsigtet. Klassen sættes kun når
   enhedskortene tegnes (≤3 købbare varianter, pdp.js), så de to ANDRE spor stod
   uden købsknap-design: dropdown-sporet (d-ringe har 4 farver — det er den knap
   Marc fotograferede 24/8) og alle 3.680 varer uden variationer. Alt inde i
   .units-pdp er v2's købsboks, så det er den rigtige afgrænsning. Rent
   udvidende: reglen kunne ikke ramme noget der ikke allerede havde den. */
.units-pdp button.single_add_to_cart_button { width: 100%; background: var(--cobalt); color: var(--snow); border: 0; border-radius: var(--r-1); font-size: 15px; font-weight: 500; cursor: pointer; }
.units-pdp button.single_add_to_cart_button:hover { background: var(--cobalt-deep); }

/* ===== Kolli-notitsen (Marc 24/8: "the box above as well") =================
   Teksten kommer fra mu-pluginnet tasker-min-quantity.php, som er LIVE på
   produktion under porto — den må ikke røres i frysen (Clarity-crawlen 25-26/8
   sammenligner porto mod v2-preview mod samme database, så en ændring der
   rammer begge sider er lige så fatal som en kodeændring på selve temaet).
   Derfor giver v2 den sit eget udseende her i stedet: samme opskrift som
   .promise__cell (pdp.css:132) — cobalt-wash, 1px cobalt-tint, firkantede
   hjørner, 12,5px/600. Så ligner boksen resten af siden uden at nogen linje
   produktionskode flytter sig.
   Tilbage i mu-pluginnet: emojien, "kolli á 20" (dansk tager à) og de
   hardkodede danske strenge på en/fi. De hører til i produktionspatchen sammen
   med at reglen skal holde op med at ramme de 6 metervarer i `tasker`.
   Bundmargin: mu-pluginnet sætter style="margin-bottom:15px" inline, og en
   inline-stil vinder over en stilart — de 15px står, og de er tæt nok på
   husets 14 til at det ikke er værd at slås med !important om. */
.units-pdp .woocommerce-info { display: block; margin: 0 0 14px; padding: 12px 14px; background: var(--cobalt-wash); border: 1px solid var(--cobalt-tint); border-radius: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.units-pdp .woocommerce-info::before { display: none; }
.units-pdp .woocommerce-info a { color: var(--cobalt-deep); }

/* ===== Spor 3: købsboksen på varer UDEN variationer (elastik, gjordbånd) ===
   Alle rækkereglerne ovenfor hænger på .woocommerce-variation-add-to-cart, som
   kun findes på variable varer. På en simpel vare ER form.cart rækken, så uden
   disse regler stod stepper og knap som to blokke under hinanden med
   WooCommerces egne mål — og prisen manglede helt. Målt 24/8 på #46845 og
   #54272 (elastik), preview som indlogget B2B.
   Ingen enhedstekst under prisen: hvad ÉN elastik er (rulle à 25 m eller
   100 m) findes ikke som data i shoppen endnu, og "pr. stk." ville være en
   påstand om salgsenheden. Den kommer med pa_salgsenhed (vindue B6). */
.units-pdp__pris { font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; margin-bottom: 14px; }
.units-pdp__pris del { font-size: 0.62em; font-weight: 400; color: var(--ink-mute); margin-right: 8px; }
.units-pdp__pris ins { text-decoration: none; }
.units-pdp__pris .woocommerce-price-suffix { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--ink-mute); margin-top: 4px; }
.units-pdp p.stock { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); margin: 0 0 12px; }
.units-pdp p.stock.out-of-stock { color: var(--rust); }
.units-pdp form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.units-pdp form.cart:not(.variations_form) p.stock { flex: 0 0 100%; }
.units-pdp form.cart:not(.variations_form) .quantity { flex: 0 0 auto; }
/* Samme stakning som R16 giver de variable varer under 600px, og af samme
   grund: etiket + total kræver ~200px, en stepper man kan ramme med tommelen
   ~150px, og de kan ikke være på én linje på en 390px skærm. */
@media (max-width: 600px) {
  .units-pdp form.cart:not(.variations_form) { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .units-pdp form.cart:not(.variations_form) .quantity { justify-self: start; }
  .units-pdp__pris { font-size: 23px; }
}

/* P1: single-image products — no thumb track, full-width main */
.gal:not(:has(.gal__thumbs)) { grid-template-columns: 1fr; }
/* P1: buy box fills the info column (mock grid expected 2 children) */
.units-pdp { display: block; }

    /* P2 batch 2 */
    .btn-sec-row--single { grid-template-columns: 1fr; margin-top: 8px; }
    section.care { margin-top: 48px; margin-bottom: 16px; }

    /* P2 batch 7: unit selling design, PDP qty stepper, CTA two-line, zoom */
    .units-pdp__lbl { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
    .units-pdp__grid .unit-btn { position: relative; padding-top: 12px; }
    .unit-btn__ico { width: 40px; height: 40px; object-fit: contain; opacity: 0.85; display: block; margin: 0 auto 4px; }
    .unit-btn[aria-pressed="true"] .unit-btn__ico { opacity: 1; }
    .save-chip { position: absolute; top: 8px; right: 8px; background: var(--moss, #4A6741); color: var(--snow); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; }
    .qty--pdp { display: inline-flex; align-items: center; border: 1.5px solid var(--line); margin-right: 10px; }
    .qty--pdp input.qty { width: 52px; border: 0; text-align: center; font-family: var(--font-mono); font-size: 15px; padding: 10px 4px; outline: 0; -moz-appearance: textfield; }
    .qty--pdp input::-webkit-outer-spin-button, .qty--pdp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .qty--pdp .qty__step { width: 36px; align-self: stretch; background: var(--paper); border: 0; cursor: pointer; font-size: 16px; color: var(--ink-soft); }
    .qty--pdp .qty__step:hover { background: var(--ink); color: var(--snow); }
    button.single_add_to_cart_button .cta-top { display: block; line-height: 1.2; }
    button.single_add_to_cart_button .cta-sub { display: block; font-size: 12px; font-weight: 400; opacity: 0.8; line-height: 1.2; }
    .gal__main { position: relative; overflow: hidden; }
    .gal__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; background: var(--snow); border: 1.5px solid var(--ink); cursor: pointer; }
    .gal__zoom:hover { background: var(--ink); color: var(--snow); }
    .gal__main.is-zoomed { cursor: zoom-out; }
    .gal__main.is-zoomed img { transition: transform 0.15s ease; }

    /* R1 Lane 0: guest login box on PDP */
    .pdp-login { display: grid; gap: 8px; border: 1.5px solid var(--ink); padding: 20px; margin: 8px 0; }
    .pdp-login b { font-size: 15px; }
    .pdp-login span { font-size: 13px; color: var(--ink-soft); }
    /* Privatkunde-udgangen på PDP'en, v2 (Marc 26/8). Fuld bredde, men som
       ROUTER-RÆKKE: venstrestillet etiket, pil helt ude til højre, 1px --line
       på --paper. De to .btn 8px ovenover er 52px, 1.5px --ink og fyldt kobolt.
       Formforskellen bærer hierarkiet, ikke størrelsen.
       Ingen margin — .pdp-login er grid med gap: 8px.

       ⚠️ SPECIFICITET. .pdp-login b og .pdp-login span ovenfor er begge (0,1,1),
       og en bar klasse taber til dem. Derfor er der intet <b> i markup'en, og
       alle tre span-regler herunder er skrevet som
       .pdp-login a.pdp-login__exit span.klasse = (0,3,2).
       (Samme kollision er i øvrigt grunden til at .pdp-login__micro renderes
       13px og ikke 11.5px. Uden for denne opgave, men bør rettes efter flippet.) */
    .pdp-login a.pdp-login__exit {
      justify-content: space-between;
      width: 100%;
      text-align: left;
      padding: 9px 12px 9px 14px;
    }
    .pdp-login a.pdp-login__exit span.pdp-login__exit-txt {
      display: grid;
      gap: 1px;
      font-size: inherit;
      color: inherit;
    }
    .pdp-login a.pdp-login__exit span.pdp-login__exit-lbl {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .pdp-login a.pdp-login__exit span.pdp-login__exit-sub {
      font-size: 11.5px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--ink-mute);
    }
    .pdp-login a.pdp-login__exit:hover span.pdp-login__exit-lbl { color: var(--cobalt-deep); }

    /* R1 PDP pass (Marc): native photo ratio 805x1000 — box matches the format
       photos are actually shot in; object-fit safety kills any stretch. */
    .gal__main { aspect-ratio: 1 / 1; }
    .gal__main .bg, .gal__main img { width: 100%; height: 100%; object-fit: cover; }
    .gal__thumb img { object-fit: cover; width: 100%; height: 100%; }

    /* Padding rhythm: uniform 16px column flow instead of ad-hoc margins */
    .info { display: flex; flex-direction: column; gap: 16px; }
    .info > * { margin: 0 !important; }
    .pdp { padding-top: 20px; gap: 48px; }

    /* CTA weight (Marc: knappen er lille) */
    button.single_add_to_cart_button { min-height: 58px; font-size: 15.5px; padding: 10px 24px; width: 100%; }

    /* Spec table follows the description (Marc: sticky) */
    @media (min-width: 1000px) { .specs__table { position: sticky; top: 96px; } }

    /* ===== R2: buy-box = mock product-v2 EXACT ===== */
    .units-pdp__grid .unit-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: var(--paper); border: 1.5px solid var(--line); text-align: center; }
    .units-pdp__grid .unit-btn[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); }
    .unit-btn__ico { width: 44px; height: 44px; mix-blend-mode: multiply; }
    .units-pdp__grid .unit-btn .label { font-size: 13px; font-weight: 500; }
    .units-pdp__grid .unit-btn .per-m { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; }
    .units-pdp__grid .unit-btn .per-m small { font-size: 0.55em; opacity: 0.7; font-weight: 500; }
    .units-pdp__grid .unit-btn[aria-pressed="true"] .per-m { color: var(--cobalt-deep); }
    .units-pdp__grid .unit-btn .price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-top: 1px; }
    .units-pdp__grid .unit-btn .savings { display: inline-block; margin-top: 6px; padding: 2px 8px; background: var(--moss, #4A6741); color: var(--snow); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; position: static; }
    /* qty + CTA = ONE 60px row (mock qty-row) */
    .woocommerce-variation-add-to-cart { display: flex; gap: 8px; align-items: stretch; }
    .qty--pdp { height: 60px; margin-right: 0; border-color: var(--ink); }
    .qty--pdp .qty__step { width: 48px; font-size: 18px; }
    .qty--pdp input.qty { width: 64px; font-size: 18px; }
    button.single_add_to_cart_button { flex: 1; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; text-align: left; min-height: 60px; padding: 8px 20px !important; }
    .cta-lead { display: grid; gap: 2px; }
    .cta-sub { font-size: 12px; font-weight: 400; opacity: 0.8; }
    .cta-total { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
    /* match band (mock 4-col) */
    .match { max-width: var(--content-w); margin: var(--s-16) auto 0; padding: 0 var(--gutter); }
    .match__inner { background: var(--cobalt-tint); border: 1.5px solid var(--cobalt); padding: 32px 36px; }
    .match__head h2 { font-weight: 400; font-size: 28px; margin: 0; letter-spacing: -0.025em; }
    .match__head h2 em { font-style: italic; color: var(--cobalt-deep); }
    .match__head p { color: var(--cobalt-deep); font-size: 13px; margin: 4px 0 20px; }
    .match__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .match-card { background: var(--snow); border: 1px solid var(--cobalt); padding: 14px; display: flex; gap: 12px; align-items: center; }
    .match-card__media { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; }
    .match-card__media img { width: 100%; height: 100%; object-fit: cover; }
    .match-card__info { flex: 1; min-width: 0; }
    .match-card__info b { font-size: 13px; font-weight: 500; display: block; line-height: 1.2; }
    .match-card__info b a { color: var(--ink); }
    .match-card__info .sku { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }
    .match-card__info .price { font-family: var(--font-mono); font-size: 11.5px; color: var(--cobalt-deep); display: block; margin-top: 2px; }
    .match-card__add { width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt); color: var(--snow); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
    .match-card__add:hover { background: var(--cobalt-deep); }
    @media (max-width: 900px) { .match__grid { grid-template-columns: 1fr 1fr; } }
    /* stray native variation price (redundant — unit cards carry pricing) + qty crush */
    .woocommerce-variation-price, .woocommerce-variation-availability { display: none; }
    .qty--pdp { flex: 0 0 auto; }
    /* WC's .quantity wrapper had a fixed ~56px width crushing the stepper */
    .woocommerce-variation-add-to-cart .quantity, form.cart .quantity { width: auto !important; float: none !important; flex: 0 0 auto; margin: 0 !important; }
    /* .quantity IS the flex child — forbid shrink below content */
    .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto !important; min-width: 176px; }
    /* R3: større stofprøver i match-kort */
    .match-card__media { width: 72px; height: 72px; }
    /* Mobil: match-kort som grid-items har min-width:auto → sporene kunne ikke
       skrumpe under kort-indholdet (side blev 502px bred på 386px viewport).
       1-kolonne under 700px — 2-up kan reelt ikke rumme 72px prøve + tekst + knap. */
    .match__grid > .match-card { min-width: 0; }
    @media (max-width: 700px) {
      .match__grid { grid-template-columns: 1fr; }
      .match__inner { padding: 20px 16px; }
    }

/* R4: matchende sytråd (ensfarvet) — collapsed linje under buy-boksen */
.thread-match { margin-top: 12px; }
.thread-match__toggle { display: flex; align-items: center; gap: 10px; background: 0; border: 1.5px dashed var(--line); padding: 12px 14px; width: 100%; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.thread-match__toggle:hover { border-color: var(--cobalt); color: var(--cobalt-deep); }
.thread-match__toggle .tm-plus { width: 22px; height: 22px; border-radius: 50%; background: var(--cobalt); color: var(--snow); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.thread-match__panel { border: 1px solid var(--line); border-top: 0; padding: 14px; background: var(--paper); }
.thread-match__tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tm-tab { padding: 6px 12px; font-size: 12px; border: 1px solid var(--line); background: var(--snow); cursor: pointer; font-family: var(--font-sans); }
.tm-tab[aria-selected="true"] { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.tm-grid { display: grid; gap: 8px; }
.tm-card { display: flex; align-items: center; gap: 10px; background: var(--snow); border: 1px solid var(--line); padding: 8px 10px; }
.tm-card__media { width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; }
.tm-card__media img { width: 100% !important; height: 100% !important; object-fit: cover; float: none !important; margin: 0 !important; }
.tm-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-card__info b { font-size: 12.5px; font-weight: 500; }
.tm-card__info .price { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.tm-card__add { width: 28px; height: 28px; border-radius: 50%; background: var(--cobalt); color: var(--snow); border: 0; cursor: pointer; font-size: 15px; flex-shrink: 0; display: grid; place-items: center; }
.tm-card__add:hover { background: var(--cobalt-deep); }

/* R8: TablePress-spec-tabellen blødte ud over canvas på mobil — indkapsles
   scrollbart + tvinges til 100% */
.specs__table, .specs__desc { max-width: 100%; }
.specs__table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tablepress { width: 100% !important; max-width: 100% !important; }
@media (max-width: 700px) {
  table.tablepress th, table.tablepress td { font-size: 12.5px; padding: 6px 8px; word-break: break-word; }
}

/* F7-9-opfølgning (Marc 6/8 aften: "dataene er ikke i samme tabel-layout som
   du viste mig"): mockens .specs__table-regler rammer aldrig — indholdet er
   TablePress-markup, og tablepress-combined.min.css vinder med selektorer som
   `.tablepress>:not(thead)+tbody>tr>td`. Derfor overstyres pluginets look
   målrettet HER (kun inde i .specs__table — andre tabeller på sitet røres
   ikke): mockens rene to-kolonne-look, tynde linjer, label-kolonne i mute,
   værdier i mono. Indholdet er urørt (SEO-reglen: tabellen redigeres aldrig). */
.specs__table .tablepress { border: 0; margin: 0; font-size: 14px; --text-color: var(--ink); --border-color: transparent; --background-color: transparent; --alternating-background-color: transparent; --hover-background-color: transparent; }
.specs__table .tablepress > :not(thead) + tbody > tr,
.specs__table .tablepress tbody > tr { background: transparent !important; border-top: 1px solid var(--line); }
.specs__table .tablepress tbody > tr:last-child { border-bottom: 1px solid var(--line); }
.specs__table .tablepress > :not(thead) + tbody > tr > td,
.specs__table .tablepress tbody td { border: 0 !important; background: transparent !important; padding: 14px 0; vertical-align: middle; }
.specs__table .tablepress .column-1 { color: var(--ink-mute); width: 38%; font-size: 13px; }
.specs__table .tablepress .column-2 { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.specs__table .tablepress img { max-height: 48px; width: auto; display: block; }
@media (max-width: 700px) {
  .specs__table .tablepress .column-1, .specs__table .tablepress .column-2 { font-size: 12px; }
  .specs__table .tablepress tbody td { padding: 10px 0; }
}

/* ===== R9: kurv-rækken på PDP (Marc: "rec'en passer ikke inde i knappen" +
   "noget galt med qty-feltets kant") =====================================

   1) KNAPPEN. Rækken er ét 60px-bånd, men knappen havde height:56px hævet til
      60px af min-height. En definit højde slår align-self:stretch fra, så
      knappen kunne ikke vokse. Etiketten er 2 linjer ("+ Læg i kurv" +
      "1 x 10 m") = 34px i en indholdskasse på 41px — kun 6,6px luft. Omkring
      1024-1200px brækker "+ Læg i kurv" til to linjer, etiketten bliver 52px,
      og de 11px løb ud af knappen. Samme risiko ved længere strenge: engelsk og
      finsk etiket, eller en pris med flere cifre.
      height fjernet (linje ~260) -> min-height er gulvet, indholdet er loftet.

   2) STRAY MARGIN. WooCommerces .button giver margin-bottom:10px, som gjorde
      rækken 70px høj med en 60px knap i toppen. Nulstilles, så rækkens højde
      ER knappens højde — så kan stepperen flugte præcist.

   3) STEPPEREN følger med. .quantity er flex-item'et (ikke .qty--pdp), så den
      skal videresende stretch til bandet indeni. Uden dette blev stepperen
      hængende på 60px mens knappen voksede til 71px.

   4) QTY-KANTEN. .qty input arvede height:100%, som opløste til wrapperens
      YDRE 60px — ikke de 57px indeni kanten. Input'et er hvidt, så det malede
      hen over 1,5px-kanten foroven og forneden hen over midterfeltet: kanten så
      brudt ud netop omkring tallet. stretch giver præcis indholdskassen, som
      +/- knapperne allerede havde (align-self:stretch).

   Målt 500-1500px efter rettelsen: knap og stepper har samme højde og flugter
   i toppen på alle bredder, etiketten spilder 0px, og input'et ligger 1,5px
   inde i kanten hele vejen. */
button.single_add_to_cart_button { margin-bottom: 0 !important; }
.woocommerce-variation-add-to-cart .quantity { display: flex; align-items: stretch; }
.qty--pdp { height: auto; min-height: 60px; }
.qty--pdp input.qty { height: auto; align-self: stretch; }

/* ===== R16: kurv-rækken på MOBIL (Marc 2026-07-26: "alt for stort quantity
   felt og i det hele taget alt for store felter") ========================

   Rækken er ÉN flex-linje: [.quantity 176px] [knap flex:1]. På 390px viewport
   er indholdsbredden 358px, så knappen får 174px. Inde i knappen deles
   174 − 40px padding − 12px gap = 122px mellem etiket og pris — og prisen
   ("445,00 kr.", 19px mono) tager alene ~95px. Etiketten fik ~27px og brækkede
   til FIRE linjer ("+" / "Læg" / "i" / "kurv"), knappen voksede til ~97px, og
   align-items:stretch trak den hvide qty-boks med op i samme højde. Derfor så
   BEGGE felter enorme ud — R9's rettelse (lad knappen vokse i stedet for at
   klippe etiketten) er korrekt på desktop, men på mobil er der intet at vokse
   ind i, så den blæser rækken op.

   Side om side kan ikke lade sig gøre her: etiket + pris kræver ~200px, og en
   stepper man kan ramme med tommelen kræver ~150px. Derfor STAKKES rækken
   under 600px — stepperen i naturlig bredde til venstre, knappen i fuld bredde
   under. Så står etiket og pris på én linje med rigelig luft, og begge felter
   falder fra ~97px til 52px (stadig over 44px-touchmålet). Ingen ændring over
   600px. */
@media (max-width: 600px) {
  .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .woocommerce-variation-add-to-cart .quantity { min-width: 0; justify-self: start; }
  .qty--pdp { min-height: 52px; }
  .qty--pdp .qty__step { width: 46px; font-size: 17px; }
  .qty--pdp input.qty { width: 54px; font-size: 17px; }
  button.single_add_to_cart_button { min-height: 52px; padding: 8px 16px !important; }
  .cta-top { white-space: nowrap; }
  .cta-total { font-size: 17px; white-space: nowrap; }
  .cta-sub { font-size: 11.5px; }
}

    /* Marc 21/8: boksen default-åben ved købsknappen — synlig, ikke gemt.
       tm-gruppe = sporoverskrift når både uni og rib vises. */
    .thread-match--open { border: 1.5px solid var(--cobalt); background: var(--cobalt-wash, #eef2fc); }
    .thread-match--open .thread-match__toggle { font-weight: 600; color: var(--cobalt-deep, var(--ink)); }
    .tm-gruppe { display: block; margin: 10px 14px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

/* Marc 2/9: "lige saa nem at laegge i kurv uden at scrolle" paa mobil.
   Fast bund-bjaelke der ruller ned til koebsboksen; pdp.js skjuler den naar
   boksen selv er i syne (IntersectionObserver). Kun mobil, kun koebere. */
.buy-jump { display: none; }
@media (max-width: 700px) {
  /* Temaets formsprog (Marc 2/9 runde 2): papir-bund, ink-kant, chips som
     mini-enhedskort — og enhederne KAN vaelges direkte i bjaelken. */
  .buy-jump { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--paper); color: var(--ink); border-top: 1.5px solid var(--ink);
    padding: 10px max(14px, env(safe-area-inset-left));
    padding-bottom: max(10px, env(safe-area-inset-bottom)); align-items: center; gap: 10px; }
  .buy-jump[hidden] { display: none; }
  .buy-jump__chips { flex: 1; display: flex; gap: 8px; min-width: 0; }
  .buy-jump__chip { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: var(--snow); border: 1.5px solid var(--line); padding: 7px 6px; cursor: pointer;
    font-family: inherit; }
  .buy-jump__chip b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .buy-jump__chip small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }
  .buy-jump__chip[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-tint); }
  .buy-jump__btn { background: var(--cobalt); color: var(--snow); border: 1.5px solid var(--cobalt);
    padding: 13px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
}