/**
 * MSD — egen farvepalette på tekstil-produktsider (v2.11.0, Fase 3).
 *
 * Egen lille fil frem for en tilføjelse til frontend.css: den store fil loades KUN når MSD ejer
 * købskolonnen, og dét gør vi aldrig på tekstil. At hænge paletten på den ville trække hele
 * produktside-/editor-styling ind på leverandørernes sider og kunne flytte rundt på deres layout.
 *
 * Udseendet ligner bevidst THWEPO's egen palette (runde prikker, navn som tooltip, tydelig
 * markering af det valgte) — kunden skal ikke opdage at noget er skiftet ud.
 */

.msd-textile-palette {
    margin: 0 0 16px;
}

.msd-palette-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.msd-palette-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.msd-swatch {
    /* v1.0.3: VÆRN MOD TEMAETS KNAP-STYLING. Prikken er en <button>, og temaet sætter
       min-height (~39px) + line-height på alle knapper - det klemte prikken oval (28x38,8
       målt på tekstil-tryk-temaet, 23/8). Nulstil de mål temaet kan arve ind, og lås
       flex-shrink så bredden heller ikke kan klemmes i smalle containere. */
    min-height: 0;
    min-width: 0;
    line-height: 1;
    flex: 0 0 auto;
    margin: 0; /* temaet giver knapper 15,5px margin -> prikkerne stod spredt (pitch 52px, ref ~36px) */
    /* Fallback bag --msd-swatch: en farve uden kendt hex må ikke blive en usynlig knap. */
    background: var(--msd-swatch, #d8d8d8);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 50%;
    cursor: pointer;
    /* Ingen layout-hop når markeringen kommer på: pladsen til ringen er der hele tiden. */
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow .12s ease-in-out;
}

.msd-swatch:hover {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}

.msd-swatch.is-selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}

.msd-swatch:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

/* Ukendt hex: skraveret så den ikke ligner en rigtig farve. Stadig valgbar — farven FINDES,
   vi kender bare ikke dens hex (se msd-catalogs normalize_hex). */
.msd-swatch.is-unknown {
    background-image: repeating-linear-gradient(45deg, #ccc 0 4px, #eee 4px 8px);
}

/* Udsolgt: nedtonet OG uvælgbar (disabled sættes også i markuppen). */
.msd-swatch.is-oos {
    opacity: .35;
    cursor: not-allowed;
    position: relative;
}

.msd-swatch.is-oos::after {
    content: "";
    position: absolute;
    inset: 50% 2px auto;
    border-top: 1px solid rgba(0, 0, 0, .55);
    transform: rotate(-45deg);
}

.msd-palette-chosen {
    font-size: 13px;
    margin-top: 6px;
    min-height: 1.2em;   /* ingen hop når navnet dukker op */
}

.msd-palette-notice {
    font-size: 13px;
    margin-top: 6px;
    color: #b3261e;
}

/* ⚠ BRUGES AF EDITORENS buy-panel.js (skjulte THWEPO-rækker i købspanelet) — MÅ IKKE SLETTES.
   Paletten selv bruger den IKKE længere: fra v1.187.0 skjuler vi aldrig THWEPO's farvevælger
   på produktsiden (Johns domænegrænse 11/9 — produktsiden er Stevens lag). */
.msd-thwepo-hidden {
    display: none !important;
}

/* ── Fase 3.1: editor-visningen på tekstil ────────────────────────────────────────────
 *
 * Temaets egen knap-blok rendres også i editorens kolonne, fordi editoren kalder
 * WooCommerces add-to-cart-template. Alle tre knapper hører til produktsidens flow:
 * "Design & Læg i Kurv" fører HERTIL (klik = kunden i ring), mens "Gratis Tilbud" og
 * "Læg i kurv uden at designe" er alternativer til at designe — den sidste ville kaste
 * det design kunden lige har lavet. De skjules KUN i editoren, KUN på tekstil.
 * Produktsiden er urørt, og knapperne fjernes ikke fra DOM'en. */
body.msd-editor-fullscreen.msd-kind-textile .msd-region-right .cart-actions {
    display: none !important;
}

/* v2.12.1: editorens EGEN købsknap på tekstil. Den har bevidst IKKE klassen
   `single_add_to_cart_button` — netop dén er skjult af temaets eget stylesheet, så en
   genbrugt klasse ville gøre knappen usynlig igen. Fuld bredde, så den er den tydelige
   afslutning på kolonnen ligesom mobilbarens CTA. */
.msd-textile-cta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    /* Temaets egne knap-farver hvis de findes; ellers MSD's pink. */
    background: var(--primary-color, #e8849f);
    color: #fff;
}

.msd-textile-cta:hover {
    filter: brightness(.94);
}

.msd-textile-cta:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* Bevidst IKKE skjult på mobil: højre kolonne ER bund-arket dér, og mobilbarens egen
   "Læg i kurv · pris" ÅBNER kun arket (den lægger ikke i kurv). Vores knap er altså den
   handling arket mangler — at skjule den ville efterlade et hul i mobil-flowet. */

/* Ingen bårne valg (kunden er landet direkte på ?design=1) → købet ville få en forkert
   pris. Knappen spærres, og beskeden peger vejen tilbage i stedet for at lade det ske. */
.msd-buy-blocked {
    opacity: .5;
    cursor: not-allowed;
}

.msd-buy-blocked-note {
    font-size: 13px;
    line-height: 1.4;
    margin: 8px 0 0;
    color: #b3261e;
}