/* ═══════════════════════════════════════════════════════════════════════════
   matching.css — farvematchede stof-forslag (jm-matching.php, 2026-07-24).
   Egne klasser (kolliderer ikke med .cart__nudge / v2-extras):
     .jm-match        — forslags-kort (ensfarvet OG rib, 2026-07-29). ÉN
                        komponent, to steder: kurv-siden (stribe efter
                        .cart__items) og produktsiden (.jm-match--pdp, over
                        tråd-chipsene). To slots i samme boks, __slot-etiket
                        når begge findes, resten bag .jm-match__more.
     .jm-threads      — produktside: matchende sytråd/overlock som ét-klik-chips
   Derfor er selektorerne scopet på body.jm-v2 ALENE og ikke på sidetype:
   samme kort skal se ens ud begge steder, og kortet findes kun hvor pluginet
   renderer det. (Flyout-fladen .jm-fly-match bor IKKE her — den bærer sin egen
   inline CSS, fordi den ankommer som WC-fragment i en muligvis cachet side.)
   Køes KUN ind af pluginet når en flade faktisk renderer (SEO-gate).
   Scrapbook/pink-sprog som cart-lane.css + gavekort-vælgeren; tokens fra
   tokens.css (--jm-pink, --cream-dark, --border, --text*). Scope-guard følger
   v2-extras' konvention (body.jm-v2) så intet lækker udenfor v2.
   Rør IKKE mobile-sync.css / v2-extras.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FLADE A · KURV-STRIBE ────────────────────────────────────────────────
   Sidder efter .cart__items (indsat af pluginets script). Paper-scrap-kort
   med stiplet pink kant + tape, som Jeanette-noten. */
body.jm-v2 .jm-match {
    position: relative;
    margin: 18px 24px 4px;
    padding: 20px 20px 18px;
    background: var(--cream-dark, #F7F6F3);
    border: 1px dashed var(--jm-pink, #E27297);
    border-radius: 10px;
}
body.jm-v2 .jm-match::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 30px;
    width: 64px;
    height: 18px;
    transform: rotate(-3deg);
    background: rgba(244, 169, 127, 0.45); /* peach tape — som jm-tape */
    pointer-events: none;
}

body.jm-v2 .jm-match__head { margin-bottom: 14px; }
body.jm-v2 .jm-match__eyebrow {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jm-pink-dark, #C75B80);
    margin-bottom: 4px;
}
body.jm-v2 .jm-match__title {
    margin: 0 0 4px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.25;
    color: var(--text, #333E48);
}
body.jm-v2 .jm-match__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mid, #5D7184);
}
/* Sypakke-perken står i samme sætning som resten — den skal læses som en
   oplysning, ikke som en banner. Kun vægt og farve skiller den ud. */
body.jm-v2 .jm-match__perk {
    color: var(--jm-pink-dark, #C75B80);
    font-weight: 800;
}

body.jm-v2 .jm-match__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.jm-v2 .jm-match__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border, #ECEAE6);
    border-radius: 10px;
}
body.jm-v2 .jm-match__link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
body.jm-v2 .jm-match__thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
    background: var(--cream-dark, #F7F6F3);
}
body.jm-v2 .jm-match__meta { min-width: 0; }
body.jm-v2 .jm-match__name {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--text, #333E48);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.jm-v2 .jm-match__price {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-mid, #5D7184);
}
body.jm-v2 .jm-match__price del { color: var(--text-muted, #888); margin-right: 4px; }
body.jm-v2 .jm-match__price ins { text-decoration: none; font-weight: 700; }
body.jm-v2 .jm-match__unit {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #888);
    white-space: nowrap;
}
body.jm-v2 .jm-match__form { margin: 0; flex: 0 0 auto; }
body.jm-v2 .jm-match__add {
    appearance: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 9px;
    background: var(--jm-pink, #E27297);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1;
    transition: background 150ms;
}
body.jm-v2 .jm-match__add:hover { background: var(--jm-pink-dark, #C75B80); }
body.jm-v2 .jm-match__add[disabled] { opacity: 0.6; cursor: wait; }

/* ─── SLOTS · ensfarvet + rib i SAMME boks (2026-07-29) ────────────────────
   Marc: "make the rib suggestions in the same box as the cotton lycra, but
   only show two suggestions and the rest as drop-down." To slots, to kort af
   hver synligt, resten bag én <details>.

   Etiketten er BEVIDST svagere end .jm-match__eyebrow: eyebrow'en er boksens
   ene stemme, og to lige stærke versaler over hinanden ville slås om samme
   rolle. Den vises kun når boksen faktisk har begge slags — står der kun
   ensfarvet, siger overskriften det allerede. */
body.jm-v2 .jm-match__slot {
    margin: 0 0 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mid, #5D7184);
}
body.jm-v2 .jm-match__list + .jm-match__slot { margin-top: 14px; }

/* "Vis N mere". Samme mønster som .pdp__details-more (system.css) — stiplet
   linje, pink label, +/− til højre — så folden ser ud som resten af siden.
   Native <details>: virker uden JS og er tastatur-/skærmlæser-korrekt af sig
   selv, så folden koster nul ekstra script. */
body.jm-v2 .jm-match__more { margin-top: 12px; }
body.jm-v2 .jm-match__more > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 2px;
    border-top: 1px dashed var(--jm-pink, #E27297);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--jm-pink-dark, #C75B80);
}
body.jm-v2 .jm-match__more > summary::-webkit-details-marker { display: none; }
body.jm-v2 .jm-match__more > summary::after {
    content: '+';
    margin-left: auto;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}
body.jm-v2 .jm-match__more[open] > summary::after { content: '−'; }
body.jm-v2 .jm-match__more[open] > summary { margin-bottom: 12px; }

/* ─── FLADE B · PRODUKTSIDE · TRÅD-CHIPS ───────────────────────────────────
   Sidder under købsknappen (woocommerce_after_add_to_cart_form). */
body.jm-v2 .jm-threads {
    margin: 14px 0 4px;
    padding: 16px 16px 14px;
    background: var(--cream-dark, #F7F6F3);
    border: 1px solid var(--border, #ECEAE6);
    border-radius: 12px;
}
body.jm-v2 .jm-threads__label {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--text, #333E48);
}
body.jm-v2 .jm-threads__sub {
    margin: 2px 0 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-mid, #5D7184);
}
body.jm-v2 .jm-threads__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.jm-v2 .jm-threads__chip {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 9px;
    background: #fff;
    border: 1px solid var(--border, #ECEAE6);
    border-radius: 10px;
    transition: border-color 150ms, opacity 150ms;
}
body.jm-v2 .jm-threads__chip.is-loading { opacity: 0.6; }
body.jm-v2 .jm-threads__chip.is-added { border-color: var(--jm-pink, #E27297); }
body.jm-v2 .jm-threads__chip-thumb {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 7px;
    background: var(--cream-dark, #F7F6F3);
}
body.jm-v2 .jm-threads__chip-meta { min-width: 0; flex: 1 1 auto; }
body.jm-v2 .jm-threads__chip-name {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--text, #333E48);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.jm-v2 .jm-threads__chip-price {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-mid, #5D7184);
}
body.jm-v2 .jm-threads__chip-price del { color: var(--text-muted, #888); margin-right: 3px; }
body.jm-v2 .jm-threads__chip-price ins { text-decoration: none; font-weight: 700; }
body.jm-v2 .jm-threads__chip-add {
    appearance: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    border-radius: 8px;
    background: var(--jm-pink, #E27297);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    transition: background 150ms;
}
body.jm-v2 .jm-threads__chip-add:hover { background: var(--jm-pink-dark, #C75B80); }
body.jm-v2 .jm-threads__chip-add-done { display: none; }
body.jm-v2 .jm-threads__chip.is-added .jm-threads__chip-add { background: var(--jm-pink-dark, #C75B80); cursor: default; }
body.jm-v2 .jm-threads__chip.is-added .jm-threads__chip-add-idle { display: none; }
body.jm-v2 .jm-threads__chip.is-added .jm-threads__chip-add-done { display: inline; }

/* ─── FLADE D · PRODUKTSIDE · ENSFARVET ────────────────────────────────────
   Samme kort som kurven, men i produktsidens smallere spalte: ingen sidemargin
   (kurvens 24px ville skubbe blokken ud af flugt med .jm-threads lige under),
   og en anelse strammere indre luft. */
body.jm-v2 .jm-match--pdp {
    margin: 14px 0 4px;
    padding: 18px 16px 16px;
}
body.jm-v2 .jm-match--pdp .jm-match__head { margin-bottom: 12px; }
body.jm-v2 .jm-match--pdp .jm-match__title { font-size: 15px; }
body.jm-v2 .jm-match--pdp .jm-match__sub { font-size: 12.5px; }
body.jm-v2 .jm-match--pdp .jm-match__thumb { width: 48px; height: 48px; }
/* Tilføjet-tilstand: kortet bliver stående (i modsætning til kurven, hvor
   siden reloader), så knappen skal selv fortælle at det lykkedes. */
body.jm-v2 .jm-match--pdp .jm-match__card.is-added { border-color: var(--jm-pink, #E27297); }
body.jm-v2 .jm-match--pdp .jm-match__card.is-added .jm-match__add {
    background: var(--jm-pink-dark, #C75B80);
    cursor: default;
}

/* ─── Mobil ────────────────────────────────────────────────────────────────
   44px tap-mål, fuld-bredde chips, mindre kant-margin i kurven. */
@media (max-width: 640px) {
    body.jm-v2 .jm-match { margin: 16px 16px 4px; padding: 18px 16px 16px; }
    body.jm-v2 .jm-match__title { font-size: 16px; }
    body.jm-v2 .jm-match__add { padding: 12px 14px; min-height: 44px; }
    body.jm-v2 .jm-threads__chips { grid-template-columns: 1fr; }
    body.jm-v2 .jm-threads__chip-add { width: 40px; height: 40px; }
    /* Folden er et tap-mål som alt andet på mobil. */
    body.jm-v2 .jm-match__more > summary { min-height: 44px; padding: 12px 0 4px; }
    /* SIDST i blokken med vilje: --pdp har samme specificitet som .jm-match,
       så den skal stå efter for at vinde. Stod den først, ville kurvens
       16px sidemargin ovenfor overskrive produktsidens flugt på mobil. */
    body.jm-v2 .jm-match--pdp { margin: 12px 0 4px; padding: 16px 14px 14px; }
    body.jm-v2 .jm-match--pdp .jm-match__title { font-size: 15px; }
}

/* QA B7 2026-08-07 (mobil): forslagslisten må aldrig sprænge viewporten */
body.jm-v2 .jm-match { max-width: 100%; }
body.jm-v2 .jm-match * { min-width: 0; }
body.jm-v2 .jm-match__form { flex-wrap: wrap; }