/*
 * The admin skin.
 *
 * Plain and dense on purpose: this is a tool, not a shop window. The owner
 * processes orders on a phone, so every table scrolls inside its own container
 * rather than truncating a column someone needed.
 */

:root {
    /* Taken from Shopify's own Polaris tokens, which are published under the MIT
       licence, rather than matched by eye. The people using this have read that
       palette daily for years, and a near-miss is more jarring than a difference.
       Values from @shopify/polaris-tokens: --p-color-text, --p-color-bg,
       --p-color-border, --p-color-bg-fill-brand. */
    --admin-ink: #303030;
    --admin-ink-muted: #616161;
    --admin-paper: #ffffff;
    --admin-sunken: #f1f1f1;
    --admin-line: #e3e3e3;

    /* Their brand fill: near-black, so the primary action reads as the action
       without colour having to carry the meaning. */
    --admin-accent: #303030;
    --admin-rail: #f1f1f1;
    --admin-bar: #1a1a1a;
    --admin-accent-contrast: #ffffff;
    --admin-danger: #c70a24;
    --admin-danger-soft: #ffd7d5;
    --admin-ok: #014b40;
    --admin-ok-soft: #cdfee1;
    --admin-warn: #7a4c05;
    --admin-warn-soft: #fdf3e0;
    /* Polaris --p-border-radius-300. */
    --admin-radius: 0.75rem;

    /* Polaris --p-shadow-100: one shadow on every raised surface, so the whole
       admin agrees about how far off the page things sit. */
    --admin-shadow: 0 0.0625rem 0 0 rgb(26 26 26 / 7%);
    --admin-shadow-raised: 0 0.1875rem 0.0625rem -0.0625rem rgb(26 26 26 / 7%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;

    /* Polaris --p-font-family-sans, minus the webfont: Inter is not served from
       here, so the stack falls to the same system faces Shopify falls to. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--admin-ink);
    background: var(--admin-sunken);
}

a {
    color: var(--admin-accent);
}

:focus-visible {
    outline: 3px solid var(--admin-accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
    z-index: 10;
    background: var(--admin-paper);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--admin-line);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Chrome */

.admin-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    background: var(--admin-bar);
    color: var(--admin-paper);
}

.admin-brand {
    font-weight: 600;
    color: var(--admin-paper);
    text-decoration: none;
}

.admin-bar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}

.admin-user {
    color: #c6cdd5;
}

.admin-bar-meta a {
    color: var(--admin-paper);
}

.admin-shell {
    display: block;
}

.admin-nav {
    /* The rail shares the page's ground rather than being a white panel: what is
       raised on a Shopify screen is the card you are working in, not the
       furniture around it. */
    background: var(--admin-rail);
    border-bottom: 1px solid var(--admin-line);
}

.admin-nav ul {
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
}

/* A heading over a group of sections, as Shopify puts one over its sales
   channels: it tells you these belong together without making them look
   clickable. */
.nav-heading {
    padding: 0.9rem 1.25rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--admin-ink-muted);
}

.nav-sub {
    display: block;
    list-style: none;
    margin: 0.1rem 0 0.35rem;
    padding: 0;
}

.nav-sub a {
    font-size: 0.85rem;

    /* Indented to sit under the section it belongs to, so the shape of the list
       says what belongs to what. */
    padding-left: 1.6rem;
    color: var(--admin-ink-muted);
}

.nav-sub a[aria-current="page"] {
    color: var(--admin-ink);
    font-weight: 500;
}

.admin-nav a {
    display: block;
    padding: 0.5rem 0.8rem;
    color: var(--admin-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    border-radius: var(--admin-radius);
}

.admin-nav a:hover,
.admin-nav a:focus {
    background: var(--admin-sunken);
}

@media (min-width: 60rem) {
    .admin-nav a {
        margin: 0.1rem 0.6rem;
        padding: 0.45rem 0.7rem;
        border-bottom: 0;
    }

    /* The section you are in, marked quietly: a filled bar down the whole list
       shouts, and this list is looked at every few seconds all day. */
    .admin-nav .nav-top[aria-current="page"],
    .admin-nav .nav-top.is-in {
        /* White, raised out of the grey rail: the same way Shopify marks where
           you are, and the opposite of a filled bar that shouts. */
        background: var(--admin-paper);
        color: var(--admin-ink);
        font-weight: 600;
        box-shadow: var(--admin-shadow);
    }

    .nav-sub a {
        margin: 0.05rem 0.6rem;
        padding: 0.35rem 0.7rem 0.35rem 1.5rem;
    }

    .nav-sub a[aria-current="page"] {
        background: #e4e4e4;
    }

    /* Settings sits at the bottom of the rail, the way it does in Shopify, so a
       hand goes to the same corner for it. */
    .admin-nav {
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
    }

    .nav-foot {
        margin-top: auto;
        padding-top: 0.75rem;
        border-top: 1px solid var(--admin-line);
    }
}

.admin-main {
    padding: 0.75rem;
    max-width: 1400px;
    min-width: 0;
}

@media (min-width: 60rem) {
    .admin-shell {
        display: grid;
        /* minmax(0, 1fr): en bred tabell i huvudytan fick annars ytan att växa
           ut över fönsterkanten, så hela sidan rullade i sidled i stället för
           bara tabellen. */
        grid-template-columns: 14.5rem minmax(0, 1fr);
        align-items: start;
    }

    /* Menyn står still när sidan rullar, och rullar själv när den är högre än
       fönstret. Med bara min-height och sticky låg menyns nedre del utanför
       skärmen och gick inte att nå alls. */
    .admin-nav {
        position: sticky;
        top: 0;
        border-bottom: 0;
        border-right: 1px solid var(--admin-line);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--admin-rail);
    }

    .admin-nav ul {
        display: block;
        padding: 0.5rem 0;
    }

    .admin-main {
        padding: 1.5rem 2rem 4rem;
    }
}

/* Headings and blocks */

h1 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.75rem 0 0.6rem;
}

h3 {
    font-size: 0.95rem;
    margin: 1rem 0 0.35rem;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--admin-line);
}

.muted {
    color: var(--admin-ink-muted);
}

.card {
    background: var(--admin-paper);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.card > :first-child {
    margin-top: 0;
}

.grid-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 50rem) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.metrics {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-bottom: 1.5rem;
}

.metric {
    background: var(--admin-paper);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 0.9rem 1rem;
}

.metric .value {
    display: block;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.15;

    /* Figures line up under each other when they are read down a row of cards. */
    font-variant-numeric: tabular-nums;
}

.metric .label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--admin-ink-muted);
}

/* Tables */

.table-scroll {
    overflow-x: auto;

    /* Etiketterna som bara skärmläsare ser är position: absolute. Utan en
       positionerad förälder räknades de mot hela sidan och inte mot tabellens
       rullningsruta, och på en telefon puttade de ut sidan i sidled. */
    position: relative;
    background: var(--admin-paper);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
}

/* Vecket som gömmer det man sällan rör.
   Ser ut som en rubrik man kan öppna, inte som en knapp: det som ligger under
   är resten av samma formulär och inte en ny sida. */
.advanced {
    border-top: 1px solid var(--admin-line);
    margin: 1rem 0;
}

.advanced > summary {
    cursor: pointer;
    padding: 0.75rem 0;
    font-weight: 500;
    list-style: none;
}

.advanced > summary::-webkit-details-marker {
    display: none;
}

/* Pilen skrivs ut själv och vänder när vecket öppnas, så tillståndet syns utan
   att man måste komma ihåg vad man klickade på. */
.advanced > summary::before {
    content: "▸";
    display: inline-block;
    width: 1.25em;
    color: var(--admin-ink-muted);
}

.advanced[open] > summary::before {
    content: "▾";
}

.advanced > summary:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

/* Miniatyr i en lista.
   En egen kolumn längst till vänster, smal och utan rubrik: bilden är inte en
   uppgift om varan utan ett sätt att hitta rätt rad utan att läsa. */
.thumb-cell {
    width: 3.5rem;
    padding-right: 0;
}

.thumb {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--admin-radius);
    background: var(--admin-sunken);
}

/* En vara utan foto får en tom ruta i samma storlek, så raderna inte hoppar i
   sidled beroende på vad någon hunnit fotografera. */
.thumb-empty {
    border: 1px dashed var(--admin-line);
    background: transparent;
}

/* Inventeringsraden. Fälten låg tidigare i ett eget formulär per rad; nu ligger
   de direkt i cellen, så cellen får själv hålla ihop dem. */
.stock-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Samma höjd på allt i raden. Utan det blev fältet, listan och knappen tre
   olika höga saker bredvid varandra, och raden såg sned ut trots att den
   rymdes. */
.stock-edit input,
.stock-edit select {
    min-height: 2.5rem;
    margin: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;
    font-size: 0.9rem;
}

caption {
    text-align: left;
    padding: 0.5rem 0.6rem;
    color: var(--admin-ink-muted);
    font-size: 0.85rem;
}

th,
td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--admin-line);
    vertical-align: top;
}

thead th {
    background: var(--admin-sunken);
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--admin-ink-muted);

    /* The header stays put while a long list scrolls, so column four is still
       column four two hundred rows down. */
    position: sticky;
    top: 0;
    z-index: 1;
}

tbody tr:hover td {
    background: #fafafa;
}

tbody tr:last-child td {
    border-bottom: 0;
}

td.numeric,
th.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* hidden ska alltid vinna. Utan det visade .hint (display: block) beskedet
   "Inget matchar" hela tiden, även med en full lista ovanför. */
[hidden] {
    display: none !important;
}

/* Forms */

form {
    margin: 0;
}

/* A fieldset is a card, as every grouping in Shopify's admin is: white, raised
   a hair off the grey ground, with its name as a heading inside rather than a
   label cut into the border. */
fieldset {
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-paper);
    box-shadow: var(--admin-shadow);
    padding: 1rem;
    margin: 0 0 1rem;

    /* En fieldset är som standard minst så bred som sitt bredaste innehåll.
       Varianttabellen i ett kort gjorde då kortet lika brett som tabellen, och
       på en telefon rullade hela sidan i sidled i stället för att bara tabellen
       gjorde det. */
    min-width: 0;
}

legend {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0;
    margin-bottom: 0.6rem;

    /* En legend sitter annars i kortets ram, och rubriken skar rakt genom
       kantlinjen. float tar den ur ramen och in i kortet. */
    float: left;
    width: 100%;
}

/* ...och det här är skälet att float gick sönder förra gången.
   En float i full bredd lämnar noll bredd bredvid sig, och en flexrad eller
   ett rutnät bredvid en float krymper hellre till noll än lägger sig under.
   Fälten hamnade då utanför kortet, ett ord per rad, ovanpå spalten intill.
   clear på allt som följer tvingar det under rubriken, där det har hela
   bredden. */
fieldset > :not(legend) {
    clear: both;
}

.field {
    margin-bottom: 0.7rem;
}

.field label,
.field .label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.field .hint {
    display: block;
    font-size: 0.8rem;
    color: var(--admin-ink-muted);
    margin-top: 0.15rem;
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
input[type="file"],
select,
textarea {
    width: 100%;
    max-width: 40rem;
    font: inherit;
    color: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-paper);
}

textarea {
    min-height: 6rem;
    max-width: 55rem;
}

/* Safari på iPhone zoomar in på ett fält med mindre text än 16 px när man
   trycker i det, och zoomar inte ut igen. */
@media (max-width: 47.999rem) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* Ett brevs text radbryts vid skärmkanten i stället för att gå utanför den. */
.mail-body {
    margin: 1rem 0;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Färgväljaren: en ruta man ser vad den innehåller, inte en knapp stor som en
   frimärkskant. */
input[type="color"] {
    width: 4rem;
    height: 2.5rem;
    padding: 0.2rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-paper);
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

.checkbox {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.checkbox label {
    font-weight: 400;
    margin: 0;
}

/* Rea med nytt pris: reapriset bredvid produkten. */
.sale-new-price {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    white-space: nowrap;
}

.sale-new-price[hidden] {
    display: none;
}

.sale-new-price input {
    width: 7rem;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.field-row > .field {
    flex: 1 1 11rem;
    min-width: 0;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

button,
.button {
    font: inherit;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--admin-accent);
    border-radius: var(--admin-radius);
    background: var(--admin-accent);
    color: var(--admin-accent-contrast);
    text-decoration: none;
    cursor: pointer;
    min-height: 2.4rem;
    transition: background-color 120ms ease, border-color 120ms ease;
}

button:hover,
.button:hover {
    background: #3a3a3a;
    border-color: #3a3a3a;
}

button.secondary,
.button.secondary,
button.button-secondary,
.button-secondary {
    background: var(--admin-paper);
    color: var(--admin-ink);
    border-color: var(--admin-line);
}

button.secondary:hover,
.button.secondary:hover,
button.button-secondary:hover,
.button-secondary:hover {
    background: var(--admin-sunken);
    border-color: var(--admin-ink-muted);
}

button.danger,
.button.danger {
    background: var(--admin-paper);
    border-color: var(--admin-danger);
    color: var(--admin-danger);
}

button.small,
.button.small {
    padding: 0.15rem 0.45rem;
    min-height: 1.8rem;
    font-size: 0.85rem;
}

.link-button {
    background: none;
    border: 0;
    color: inherit;
    text-decoration: underline;
    padding: 0;
    min-height: 0;
    cursor: pointer;
}

/* Messages and status */

.notice {
    border: 1px solid var(--admin-line);
    border-left-width: 4px;
    border-radius: var(--admin-radius);
    padding: 0.7rem 0.9rem;
    margin: 0 0 1rem;
    background: var(--admin-paper);
}

.notice-ok {
    border-left-color: var(--admin-ok);
    background: var(--admin-ok-soft);
}

.notice-error {
    border-left-color: var(--admin-danger);
    background: var(--admin-danger-soft);
}

.notice-warning {
    border-left-color: var(--admin-warn);
    background: var(--admin-warn-soft);
}

.validation-summary ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/* The validation tag helpers always emit their element; empty ones stay out of the way. */
.validation-summary-valid,
.field-validation-valid {
    display: none;
}

.field-error {
    display: block;
    color: var(--admin-danger);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

/*
 * Status is spelled out as well as tinted: colour alone would leave a
 * colour-blind owner guessing which orders still need picking.
 */
.badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    font-size: 0.78rem;
    white-space: nowrap;
    background: var(--admin-paper);
    color: var(--admin-ink);
}

.badge-ok {
    border-color: var(--admin-ok);
    background: var(--admin-ok-soft);
    color: var(--admin-ok);
}

.badge-warning {
    border-color: var(--admin-warn);
    background: var(--admin-warn-soft);
    color: var(--admin-warn);
}

.badge-danger {
    border-color: var(--admin-danger);
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
}

/* Detail lists */

.definitions {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.2rem 0.75rem;
    font-size: 0.9rem;
}

.definitions dt {
    font-weight: 600;
    color: var(--admin-ink-muted);
}

.definitions dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.filters .field {
    margin-bottom: 0;
}

.filters input,
.filters select {
    max-width: 14rem;
}

.pager {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.media-list li {
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    padding: 0.4rem;
    width: 11rem;
}

.media-list img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--admin-radius);
    background: var(--admin-sunken);
}

.media-list li > p {
    margin: 0.35rem 0;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-actions {
    display: flex;
    gap: 0.25rem;
}

.media-actions form {
    margin: 0;
}

.media-actions form:last-child {
    margin-left: auto;
}

pre.report {
    overflow-x: auto;
    background: var(--admin-sunken);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    padding: 0.6rem;
    font-size: 0.85rem;
}

.preview-frame {
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-paper);
    padding: 0.75rem;
}

/* Edit pages, in two columns
 *
 * Shopify puts the thing being edited on the left and its status, visibility and
 * organisation in a narrower column on the right. People who have used that for
 * years reach for the right-hand side to publish something, so this does the
 * same rather than making them hunt down a long single column.
 */

.edit-layout {
    display: grid;
    gap: 1.25rem;

    /* minmax(0, …) och inte bara 1fr: 1fr får aldrig bli smalare än sitt
       bredaste innehåll, och varianttabellen sköt då hela sidan i sidled på
       en telefon i stället för att rulla i sin egen ruta. */
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 64rem) {
    .edit-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    /* The side column follows you down a long form, because status and publish
       belong within reach wherever you are in it. */
    .edit-side {
        position: sticky;
        top: 1.5rem;
    }
}

@media (min-width: 64rem) {
    /* En sticky spalt som är högre än fönstret fastnar fel och hänger ut under
       innehållet bredvid. Med ett tjugotal produktserier blev rutan 1039 px hög
       i ett 950 px högt fönster, och listan lade sig över varianttabellen. Den
       får rulla för sig själv i stället. */
    .edit-side {
        max-height: calc(100vh - 3rem);
        overflow-y: auto;

        /* Plats åt fokusringar, som annars klipps av rullningen. */
        padding: 2px;
    }
}

.edit-side .card,
.edit-side fieldset {
    margin-bottom: 1rem;
}

/* En lång kryssrutelista med egen rullning. Listan ska inte få bestämma hur
   hög sidospalten är. */
.picker {
    max-height: 16rem;
    overflow-y: auto;

    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    padding: 0.5rem 0.75rem;
}

/* Listan med en produkts alla färger: en rad per produkt, med bild, namn,
   prick och ta bort. På en bred skärm på en rad; på en telefon bryts raden. */
.swatch-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
}

.swatch-row {
    display: grid;
    grid-template-columns: 3rem minmax(8rem, 1.4fr) minmax(8rem, 1fr) auto auto;
    align-items: end;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
}

.swatch-row + .swatch-row {
    border-top: 1px solid var(--admin-line);
}

/* Den man står på: samma rad, en ton mörkare, så den syns i listan. */
.swatch-row.is-this {
    background: var(--admin-sunken);
}

.swatch-row > .thumb,
.swatch-row > .swatch-row-title {
    align-self: center;
}

.swatch-row-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.swatch-row-title .muted {
    display: block;
    font-size: 0.8rem;
}

.swatch-row .field {
    margin: 0;
}

.swatch-row-pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pricken: färg eller en bit av en bild, på en egen rad under namnet. Bara
   den del som hör till valet syns, även utan skript (:has). */
@media (min-width: 40.01rem) {
    .swatch-row > button {
        grid-row: 1;
        grid-column: -2;
        white-space: nowrap;
    }
}

.swatch-row > .swatch-row-color {
    grid-column: 1 / -1;
    border: 0;
    padding: 0;
    min-width: 0;
}

.swatch-row-color legend {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.swatch-preview {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
    background-color: var(--admin-sunken);
    background-repeat: no-repeat;
}

.swatch-row-color:has([data-swatch-mode][value="color"]:checked) [data-swatch-pattern],
.swatch-row-color:has([data-swatch-mode][value="pattern"]:checked) [data-swatch-colour] {
    display: none;
}

.swatch-colour-pick,
.swatch-pattern {
    display: grid;
    gap: 0.3rem;
    max-width: 28rem;
    margin-top: 0.6rem;
}

.swatch-pattern label,
.swatch-colour-pick label {
    font-size: 0.85rem;
}

.swatch-pattern-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 400;
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .swatch-row {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .swatch-row > .field,
    .swatch-row > button {
        grid-column: 2;
    }

    .swatch-row > button {
        justify-self: start;
    }
}

/* AI-sidan: status och förlopp. */
.translate-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

progress {
    width: 100%;
    max-width: 40rem;
    height: 0.75rem;
    accent-color: var(--admin-accent);
}

.model-list {
    columns: 2 16rem;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
}

/* En avdelning inuti ett kort, med ett streck över så det syns var den
   förra slutar. */
.subsection {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--admin-line);
}

.subsection > h3 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

/* Verktygsraden: publicering till vänster, Spara till höger. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.toolbar .actions {
    margin-top: 0;
}

/* Genvägar ned i en lång sida. */
.page-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--admin-line);

    font-size: 0.875rem;
}

/* Korten som sparar sig själva, tydligt avskilda från produktformuläret.
   Ett streck och en rubrik, så det syns var Spara produkten slutar gälla. */
.own-forms {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--admin-line);
}

.own-forms > h2:first-child {
    margin-top: 0;
}

/* Produktväljaren: en rad per vara, med bild.
   En <select> kan inte visa bilder, och i den här butiken skiljer sig titlarna
   ofta på ett ord i slutet. */
.picker-products {
    max-height: 20rem;
}

.picker-search {
    margin-bottom: 0.5rem;
}

/* .field label sätter display:block och väger tyngre än .picker-row ensam,
   så raden får sin flex genom att nämna sin behållare. */
.picker .picker-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;

    padding: 0.25rem;
    border-radius: var(--admin-radius);
    cursor: pointer;
}

.picker .picker-row:hover {
    background: var(--admin-sunken);
}

/* Hela raden är klickbar, så den valda ska synas som en rad och inte bara som
   en ifylld liten ring. */
.picker .picker-row:has(input:checked) {
    background: var(--admin-sunken);
    font-weight: 500;
}

.picker .picker-row:has(input:focus-visible) {
    outline: 2px solid var(--admin-accent);
    outline-offset: -2px;
}

.picker .picker-row input {
    flex: none;
    margin: 0;
}

.picker .picker-row .thumb {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
}

/* Växeln för de sällan använda kolumnerna. Ser ut som en länk och inte som en
   knapp: den ändrar vad man ser, inte vad som är sparat. */
.col-toggle {
    display: inline-block;
    margin-bottom: 0.5rem;
    cursor: pointer;

    color: var(--admin-ink-muted);
    font-size: 0.875rem;
    text-decoration: underline;
}

.col-toggle::before {
    content: "▸ ";
}

.col-toggle-input:checked + .col-toggle::before {
    content: "▾ ";
}

.col-extra {
    display: none;
}

.col-toggle-input:checked ~ .table-scroll .col-extra {
    display: table-cell;
}

/* Tangentbordet måste kunna nå växeln, och rutan är visuellt dold. */
.col-toggle-input:focus-visible + .col-toggle {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

.edit-main > fieldset {
    margin-bottom: 1rem;
}

/* The save button spans both columns and sits at the end of the form, so it is
   found in the same place whichever column you were last typing in. */
/* Sparaknappen följer med nedanför fönstret. Formuläret är långt, och att
   behöva rulla tillbaka för att spara är hur ändringar går förlorade. */
.edit-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.edit-side h2 {
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
}

/* Adressen en bild i bildspelet leder till.
   På samma rad som miniatyren, för att det ska synas att fältet hör till just
   den bilden och inte till blocket. */
.slide-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.slide-link label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--admin-ink, #303030);
}

.slide-link input {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Knappen i inventeringsraden lika hög som fälten den står bredvid. Regeln
   ligger sist för att väga tyngre än .small, som annars gör den lägre. */
.stock-edit button.small {
    min-height: 2.5rem;
    margin: 0;
}

/* A/B-tester. Versionerna sida vid sida på en bred skärm, under varandra på
   en smal; texten visas med sina radbrytningar, som i butiken. */
.experiment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.experiment-versions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.experiment-versions > .card {
    min-width: 0;
    margin: 0;
}

.experiment-title {
    font-weight: 600;
}

.experiment-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-height: 16rem;
    overflow-y: auto;
}

.experiment-results .is-leader {
    background: var(--admin-sunken);
}

.experiment-results td .muted {
    display: block;
    font-size: 0.85em;
}

.experiment-help dt {
    font-weight: 600;
    margin-top: 0.5rem;
}

.experiment-help dd {
    margin-left: 0;
}

.experiment-delete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Produktsidan i en spalt, i den ordning en produkt läggs upp. Rutorna får
   samma luft emellan, vare sig de hör till huvudformuläret eller sparas
   var för sig. */
.edit-flow > fieldset,
.edit-flow > form > fieldset,
.edit-flow > form > details {
    margin-bottom: 1rem;
}

.own-save {
    margin-top: 0;
}

/* "Lägg till färg": en knapp som fäller ut produktlistan. */
.color-add {
    margin-top: 1rem;
}

.color-add > summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer;
}

.color-add > summary::-webkit-details-marker {
    display: none;
}

.color-add[open] > summary {
    margin-bottom: 0.75rem;
}

/* Menyn som går att fälla in. Knappen finns bara där menyn är en spalt; på en
   smal skärm ligger menyn ovanför sidan och tar ingen bredd från den. */
.admin-bar-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-toggle {
    display: none;
}

/* Telefonen: menyn är stängd tills man trycker på Meny, så att sidan syns
   först. Utan skript (ingen nav-js) står den framme som förut. */
@media (max-width: 59.999rem) {
    .nav-js .admin-nav {
        display: none;
    }

    .nav-js.nav-open .admin-nav {
        display: block;
    }

    .nav-toggle:not([hidden]) {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 2.5rem;
        padding: 0 0.6rem;
        border: 1px solid rgb(255 255 255 / 30%);
        border-radius: var(--admin-radius);
        background: transparent;
        color: var(--admin-paper);
        font: inherit;
        font-size: 0.9rem;
        cursor: pointer;
    }
}

.nav-toggle-text {
    display: inline;
}

@media (min-width: 60rem) {
    .nav-toggle-text {
        display: none;
    }

    .nav-toggle:not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: 0;
        border-radius: var(--admin-radius);
        background: transparent;
        color: var(--admin-paper);
        cursor: pointer;
    }

    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        background: rgb(255 255 255 / 14%);
    }

    .nav-collapsed .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .nav-collapsed .admin-nav {
        display: none;
    }
}

/* Temasidan. */
.theme-chips {
    display: inline-flex;
    gap: 0.25rem;
}

.theme-chip {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--admin-line);
}

tr.is-selected {
    background: var(--admin-sunken);
}

.theme-import,
.theme-save-as {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.theme-colours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

.theme-colour-pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-colour-pick input[type="color"] {
    width: 3rem;
    height: 2.25rem;
    padding: 0.1rem;
}

.theme-preview {
    margin: 1rem 0;
    border: 1px solid;
    border-radius: var(--admin-radius);
    overflow: hidden;
}

.theme-preview-banner {
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.theme-preview-body {
    padding: 1rem;
}

.theme-preview-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.theme-preview-footer {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    text-align: center;
}

.font-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.font-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--admin-line);
}

/* Omdömen i adminen. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--admin-line);
}

.tabs a {
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--admin-ink-muted);
}

.tabs a[aria-current="page"] {
    color: var(--admin-ink);
    font-weight: 600;
    border-bottom: 2px solid var(--admin-ink);
}

.review-admin-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.review-admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.review-admin-stars {
    color: #b8860b;
    letter-spacing: 0.08em;
}

.review-admin-body {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.review-admin-reply textarea {
    width: 100%;
}

/* Våra favoriter i startsidans block. */
.favourite-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.favourite-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--admin-line);
}

.favourite-title {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Avstängd favorit: kvar på sin plats, men tydligt inte i butiken. */
.favourite-list li.is-hidden .thumb,
.favourite-list li.is-hidden .favourite-title {
    opacity: 0.55;
}

/* Sidans bild i sidredigeraren. */
.page-image-preview {
    display: block;
    max-width: 16rem;
    height: auto;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.page-image-placeholder {
    display: grid;
    place-items: center;
    width: 16rem;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 0.75rem;
    border: 2px dashed var(--line, #ccc);
    border-radius: 4px;
    color: var(--ink-muted, #666);
}

/* Storleken under varje typsnitt i temat: ett smalt tal med procenttecknet bredvid. */
.font-size-label {
    margin-top: 0.75rem;
}

.font-size-input {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.font-size-input input {
    width: 6rem;
}

/* Finjusteringen av delar i temat: namn, typsnitt och storlek på en rad. */
.font-parts {
    margin-top: 1.25rem;
}

.font-parts summary {
    cursor: pointer;
    font-weight: 600;
}

.font-part-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.font-part {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line, #e5e5e5);
}

.font-part-name {
    display: grid;
}

@media (max-width: 47.999rem) {
    .font-part {
        grid-template-columns: 1fr auto;
    }

    .font-part-name {
        grid-column: 1 / -1;
    }
}

/* Bilder och filmer
   ------------------------------------------------------------------------- */
.media-upload-cards {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.media-upload-cards summary {
    cursor: pointer;
}

.media-upload-row {
    align-items: start;
}

.media-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.media-filters .field,
.media-filters .checkbox,
.media-filters .actions {
    margin: 0;
}

.media-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
}

.media-tile {
    display: grid;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 6px;
    padding: 0.5rem;
}

/* Mapparna i Bilder och videor. */
.media-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.media-folders ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.media-folders a {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.media-folders a[aria-current="page"] {
    border-color: currentColor;
    font-weight: 600;
}

.media-folder-new[open] summary {
    margin-bottom: 0.5rem;
}

.media-folder-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: end;
    justify-content: space-between;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.inline-form input:not([type=checkbox]),
.inline-form select {
    width: auto;
    min-width: 12rem;
    max-width: 100%;
}

.media-move {
    margin-bottom: 1rem;
}

.media-tile {
    position: relative;
}

.media-tile-pick {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.9);
    cursor: pointer;
}

.media-tile-pick input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.media-tile a {
    display: grid;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.media-tile img,
.media-tile-empty {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    background: #f1efec;
}

.media-tile-empty {
    display: grid;
    place-items: center;
    color: #777;
}

.media-tile-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.media-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.85rem;
}

.media-edit {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
    .media-edit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.media-edit-preview img,
.media-edit-preview video {
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #f1efec;
}

.media-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin-top: 1rem;
}

.media-facts dt {
    color: #666;
}

.media-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Filer i en väljare: lite större bilder än produktväljarens, det är bilden man känner igen. */
.picker-media .thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

/* Shoppa stilen i admin */
.look-admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.look-admin-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.look-admin-row img,
.look-admin-row .thumb-empty {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
}

.look-admin-row .actions {
    grid-column: 1 / -1;
}

@media (min-width: 60rem) {
    .look-admin-row {
        grid-template-columns: 96px minmax(0, 1fr) auto;
    }

    .look-admin-row .actions {
        grid-column: auto;
    }
}

.look-admin-products,
.look-admin-hotspots {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.look-admin-products li,
.look-admin-hotspots li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line, #e5e5e5);
}

.look-admin-products img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}

.look-admin-product-name {
    display: grid;
    flex: 1 1 14rem;
}

.look-admin-number,
.look-admin-dot {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    flex: none;
}

.look-admin-image {
    position: relative;
    max-width: 44rem;
    margin-bottom: 1rem;
}

.look-admin-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.look-admin-image.is-placing {
    cursor: crosshair;
    outline: 3px solid #9d826d;
    outline-offset: 3px;
}

.look-admin-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px #fff;
    pointer-events: none;
}

.look-admin-hotspot-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
}

.look-admin-coordinates {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.look-admin-coordinates input {
    width: 5rem;
}

/* A product the website does not show: its row and dot greyed, no number. */
.look-admin-products li.is-hidden img,
.look-admin-hotspots li.is-hidden > span,
.look-admin-number:where(li.is-hidden *) {
    opacity: 0.55;
}

.look-admin-dot.is-hidden {
    background: #999;
}

/* Backloggen */
.backlog-new summary {
    cursor: pointer;
}

.backlog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.backlog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.backlog-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.backlog-item.is-done h2 {
    text-decoration: line-through;
    text-decoration-color: rgb(0 0 0 / 35%);
}

.backlog-description {
    white-space: pre-wrap;
    margin: 0.5rem 0;
}

.backlog-images,
.backlog-preview {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.backlog-images img,
.backlog-preview img {
    display: block;
    width: 8rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line, #e5e5e5);
    background: #f4f4f4;
}

.backlog-images-edit li,
.backlog-preview li {
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

/* Backloggen: listan är bara rubriker; allt annat finns inne i tasken. */
.backlog-list {
    gap: 0;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 6px;
}

.backlog-list li + li {
    border-top: 1px solid var(--line, #e5e5e5);
}

.backlog-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 1rem;
    min-height: 2.75rem;
    text-decoration: none;
    color: inherit;
}

.backlog-row:hover .backlog-row-title {
    text-decoration: underline;
}

.backlog-row-title {
    font-weight: 600;
}

.backlog-row.is-done .backlog-row-title {
    text-decoration: line-through;
    text-decoration-color: rgb(0 0 0 / 35%);
}

.backlog-images-large img {
    width: 16rem;
    height: auto;
    max-height: 14rem;
    object-fit: contain;
}

.backlog-purge {
    margin-top: 2rem;
    border-color: #e4b4b4;
}

.backlog-purge .field input {
    max-width: 20rem;
}


/* Öppna tasks i prioritetsordning: numret, raden och Upp/Ned bredvid. */
.backlog-list.is-ordered li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.75rem;
}

.backlog-list.is-ordered .backlog-row {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.25rem;
}

.backlog-priority {
    min-width: 1.75rem;
    color: var(--admin-muted, #6b6b6b);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.backlog-move {
    display: flex;
    gap: 0.35rem;
    padding-right: 0.75rem;
}

.backlog-move form {
    margin: 0;
}

/* Tema: Finjustera färger. */
.colour-part-group {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.95rem;
}

.colour-part-list {
    display: grid;
    gap: 0.5rem;
}

.colour-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line, #e5e5e5);
}

.colour-part-own {
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 47.999rem) {
    .colour-part {
        grid-template-columns: 1fr auto;
    }

    .colour-part .font-part-name {
        grid-column: 1 / -1;
    }
}

/* Tema: logotypen som den ser ut nu. */
.logo-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Leveranssätt: zonerna det erbjuds i. */
.zone-choice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.zone-choice-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line, #e5e5e5);
}

.zone-choice-list .choice {
    margin: 0;
}

/* Leveranssätt: leveransområdet. */
.area-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.area-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line, #e5e5e5);
}

.area-list li > span {
    display: grid;
}

.area-list form {
    margin: 0;
}

.area-search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.area-search input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Leveranssätt: undantagen med postnummer, hopfällda. */
details.zone-choice {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--admin-line, #e5e5e5);
    border-radius: var(--admin-radius, 6px);
}

details.zone-choice summary {
    cursor: pointer;
    font-weight: 600;
}

.area-list li.area-group {
    display: block;
    padding: 0.75rem 0 0.25rem;
    border-bottom: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-muted, #6b6b6b);
}

/* Startsida: panelerna som en lista av namn. */
.panel-list {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
    background: #fff;
    border: 1px solid var(--admin-line, #e5e5e5);
    border-radius: var(--admin-radius, 6px);
}

.panel-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
}

.panel-list li + li {
    border-top: 1px solid var(--admin-line, #e5e5e5);
}

.panel-list li.is-hidden .panel-title {
    color: var(--admin-muted, #6b6b6b);
}

.panel-number {
    min-width: 1.5rem;
    color: var(--admin-muted, #6b6b6b);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.panel-row {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    text-decoration: none;
    color: inherit;
    min-height: 2.75rem;
    align-content: center;
}

.panel-row:hover .panel-title,
.panel-row:focus-visible .panel-title {
    text-decoration: underline;
}

.panel-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.panel-move {
    display: flex;
    gap: 0.35rem;
}

.panel-move form {
    margin: 0;
}

/* Bildspelets rubrik: utseendet. */
.caption-style details {
    margin-top: 0.75rem;
}

.caption-style summary {
    cursor: pointer;
    font-weight: 600;
}

.slide-link {
    display: grid;
    gap: 0.25rem;
}

/* Viktbaserad frakt: ett kort per intervall, fälten radbryts på mobil. */
.weight-bands {
    display: grid;
    gap: 1rem;
}

.weight-band-title {
    margin: 0 0 0.5rem;
}

/* Sökmotorförhandsvisning, ungefär som ett sökresultat. */
.seo-preview {
    display: grid;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: var(--admin-paper);
    overflow-wrap: anywhere;
}

.seo-preview-url {
    font-size: 0.85rem;
    color: #3c7a3c;
}

.seo-preview-title {
    font-size: 1.15rem;
    color: #1a0dab;
}

.seo-preview-description {
    font-size: 0.9rem;
    color: #4d5156;
}

/* Taggar som chips. */
.tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.3rem 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--admin-sunken);
}

.tag-chip-remove {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
}

.tag-chip-remove:hover,
.tag-chip-remove:focus-visible {
    background: rgb(0 0 0 / 8%);
}

.tag-chip-row {
    display: flex;
    gap: 0.5rem;
}

.tag-chip-entry {
    flex: 1;
    min-width: 0;
}

/* Varianttabellen blir ett kort per variant på telefonen, med fältnamn
   framför varje fält, i stället för en tio kolumner bred tabell att rulla i. */
@media (max-width: 47.999rem) {
    .variant-table,
    .variant-table tbody,
    .variant-table tr,
    .variant-table td {
        display: block;
        width: 100%;
    }

    .variant-table thead {
        display: none;
    }

    .variant-table {
        min-width: 0;
    }

    .variant-table caption {
        display: block;
    }

    .variant-table tr {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        border: 1px solid var(--admin-line);
        border-radius: var(--admin-radius);
    }

    .variant-table td {
        padding: 0.25rem 0;
        border: 0;
    }

    .variant-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8rem;
        color: var(--admin-ink-muted);
    }

    .variant-table input:not([type=checkbox]),
    .variant-table select {
        width: 100%;
        max-width: none !important;
    }

    .variant-table td.col-extra {
        display: none;
    }

    .col-toggle-input:checked ~ .table-scroll .variant-table td.col-extra {
        display: block;
    }

    .option-row {
        gap: 0.5rem;
    }
}

/* Autosparets status bredvid Spara-knappen. */
.save-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.autosave-status {
    font-size: 0.85rem;
    color: var(--admin-ink-muted);
}

/* ── Produkteditorn steg för steg ──────────────────────────────────────── */
.product-editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.product-editor-head h1 {
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
}

.product-editor-head p {
    margin: 0;
}

.step-timeline {
    margin-bottom: 1rem;
    scroll-margin-top: 1rem;
}

.step-count {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.step-timeline ol {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.step-timeline li {
    flex: 1 1 0;
    min-width: 0;
}

.step-timeline a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.1rem;
    color: var(--admin-ink-muted);
    text-decoration: none;
    font-size: 0.8rem;
    text-align: center;
    border-top: 3px solid var(--admin-line);
}

.step-timeline .step-number {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--admin-line);
    background: var(--admin-paper);
    font-weight: 600;
}

.step-timeline li.is-done a {
    border-top-color: var(--admin-ink-muted);
    color: var(--admin-ink);
}

.step-timeline a[aria-current] {
    border-top-color: var(--admin-accent);
    color: var(--admin-ink);
    font-weight: 600;
}

.step-timeline a[aria-current] .step-number {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
    color: var(--admin-accent-contrast);
}

/* På telefonen syns bara siffrorna; "Steg 3 av 8: Varianter" står ovanför. */
@media (max-width: 47.999rem) {
    .step-timeline .step-label {
        display: none;
    }
}

/* Utan skript finns ingen räknare, och stegen står under varandra. */
body:not(.has-steps) .step-count {
    display: none;
}

.step {
    background: var(--admin-paper);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 1rem;
    margin: 0 0 1rem;
    min-width: 0;
}

.step[hidden] {
    display: none;
}

.step > h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.step h3 {
    font-size: 1rem;
    margin: 1.25rem 0 0.4rem;
}

.step-aside {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--admin-line);
}

.step-aside h3 {
    margin-top: 0;
}

.step-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0 2rem;
}

.step-nav[hidden] {
    display: none;
}

.step-nav [data-step-next] {
    margin-left: auto;
}

.step-more {
    margin-top: 1.5rem;
}

.publish-missing-list li {
    margin-bottom: 0.3rem;
}

.publish-missing-list a {
    margin-left: 0.5rem;
}

/* Bilder och videor: ett rutnät av kort, med små knappar under varje. */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.media-card {
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    overflow: hidden;
    background: var(--admin-paper);
}

.media-card.is-main {
    border-color: var(--admin-accent);
}

.media-card-picture {
    position: relative;
    aspect-ratio: 1;
    background: var(--admin-sunken);
    display: grid;
    place-items: center;
}

.media-card-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-card-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--admin-accent);
    color: var(--admin-accent-contrast);
    font-size: 0.75rem;
}

.media-card-name {
    margin: 0.4rem 0.5rem 0;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bildens beskrivning för sökmotorer, under filnamnet: två rader, resten i filen. */
.media-card-alt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    font-size: 0.75rem;
}

.media-card-actions {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem;
}

.media-card-actions form {
    margin: 0;
}

.icon-action {
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0;
    background: var(--admin-paper);
    color: var(--admin-ink);
    border-color: var(--admin-line);
    font-size: 1rem;
    line-height: 1;
}

.icon-action:hover {
    background: var(--admin-sunken);
    border-color: var(--admin-ink-muted);
}

.icon-action.danger {
    color: var(--admin-danger);
}

.media-empty {
    padding: 1.5rem 1rem;
    border: 1px dashed var(--admin-line);
    border-radius: var(--admin-radius);
    text-align: center;
    color: var(--admin-ink-muted);
}

.media-pending {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.media-pending li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.4rem 0;
}

.media-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

.media-add-choice > summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer;
}

.media-add-choice > summary::-webkit-details-marker {
    display: none;
}

.media-add-choice[open] {
    flex-basis: 100%;
}

.media-add-body {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-sunken);
}

@media (max-width: 47.999rem) {
    .step-next-label {
        display: none;
    }
}

/* Inloggningen: rutan mitt på skärmen, åt båda hållen. */
body.admin-sign-in {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    margin: 0;
}

body.admin-sign-in .admin-main {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

body.admin-sign-in .sign-in-card {
    width: 100%;
    margin: 0;
}

/* Julkulor: en ruta per kula, två i bredd på en stor skärm. */
.bauble-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 0 1rem;
}

.bauble-preview {
    margin: -1rem 0 0;
}

.bauble-size {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bauble-size input[type=range] {
    flex: 1;
    min-width: 0;
}

.bauble-preview-card {
    position: sticky;
    top: 0;
    z-index: 2;
}

.bauble-preview .bauble[hidden] {
    display: none;
}

.bauble-text-color {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* En dold julkula i förhandsvisningen: blek, men kvar. */
.bauble-preview .bauble.is-off {
    opacity: 0.35;
}

/* Julpyntets förhandsvisning: en påhittad bild med samma pynt som i butiken. */
.decor-preview {
    padding: 1.25rem 0 1.75rem;
}

.decor-preview-picture {
    position: relative;
    display: grid;
    place-items: center;
    height: 11rem;
    background: linear-gradient(135deg, #3f5f55, #6f8f86);
    color: #fff;
}

.decor-preview-caption {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.decor-sub {
    margin-left: 1.75rem;
}

/* Temats bakgrundsmönster och färgförslag. */
.pattern-preview {
    display: grid;
    place-items: center;
    height: 8rem;
    margin-top: 0.5rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
}

.palette-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Julkalendern i adminen: 24 luckor i ett rutnät, ifyllda markerade. */
.calendar-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendar-admin-door {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 4.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed var(--admin-line);
    border-radius: var(--admin-radius);
    color: var(--admin-ink-muted);
    text-decoration: none;
}

.calendar-admin-door.is-filled {
    border-style: solid;
    background: var(--admin-paper);
    color: var(--admin-ink);
}

.calendar-admin-door.is-selected {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 2px var(--admin-accent);
}

.calendar-admin-door.is-today .calendar-admin-number::after {
    content: " · idag";
    font-size: 0.75rem;
    font-weight: 400;
}

.calendar-admin-number {
    font-size: 1.2rem;
    font-weight: 600;
}

.calendar-admin-title {
    font-size: 0.8rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Kalenderns bild: väljaren och förhandsvisningen bredvid varandra. */
.calendar-image-edit {
    display: grid;
    gap: 1rem;
}

.calendar-board-preview {
    max-width: 36rem;
}

@media (min-width: 70rem) {
    .calendar-image-edit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        align-items: start;
    }

    .calendar-admin-edit {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
}

.calendar-admin-preview .store-preview {
    padding: 1rem;
    background: #fbf6ee;
    border-radius: var(--admin-radius);
    margin-bottom: 0.75rem;
}

/* ── Menyns avsnitt och sökruta ───────────────────────────────────────────
   Ett avsnitt är en rad med länken och en pil som fäller ut vad som finns
   under det. Sökrutan överst hittar en sida på vad den gör. */
.nav-row {
    display: flex;
    align-items: center;
}

.nav-row .nav-top {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-expand {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--admin-radius);
    background: transparent;
    color: var(--admin-ink-muted);
    cursor: pointer;
}

.nav-expand::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 150ms ease;
}

.nav-expand[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

.nav-expand:hover,
.nav-expand:focus-visible {
    background: var(--admin-sunken);
    color: var(--admin-ink);
}

.nav-find {
    padding: 0.75rem 0.75rem 0.25rem;
}

.nav-find input {
    width: 100%;
    font-size: 0.9rem;
}

.nav-find-empty {
    margin: 0.5rem 0.25rem 0;
    font-size: 0.82rem;
    color: var(--admin-ink-muted);
}

/* Medan man söker står träffarna på rad, utan fällda avsnitt och utan
   foten nere i hörnet. */
.admin-nav.is-searching .nav-foot {
    margin-top: 0;
    border-top: 0;
}

.nav-shortcuts {
    border-top: 1px dashed var(--admin-line);
}

.nav-shortcuts a::before {
    content: "↳ ";
    color: var(--admin-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
    .nav-expand::before {
        transition: none;
    }
}

/* Undersidorna står indragna under sitt avsnitt, också på telefonen. */
.admin-nav .nav-sub a {
    padding-left: 1.6rem;
}

/* ── Tabeller som blir kort på telefonen ──────────────────────────────────
   table-cards: varje rad ett kort, med kolumnens namn (data-label) över
   värdet, så att inget hamnar utanför skärmen. .card-title står överst. */
@media (max-width: 47.999rem) {
    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: 100%;
    }

    .table-cards {
        min-width: 0;
    }

    .table-cards thead {
        display: none;
    }

    .table-cards caption {
        display: block;
        text-align: left;
    }

    .table-cards tr {
        position: relative;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--admin-line);
        border-radius: var(--admin-radius);
        background: var(--admin-paper);
    }

    .table-cards td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.2rem 0;
        border: 0;
        text-align: left;
    }

    .table-cards td[data-label]::before {
        content: attr(data-label);
        color: var(--admin-ink-muted);
        font-size: 0.85rem;
    }

    .table-cards td.card-title {
        display: block;
        font-weight: 600;
    }

    .table-cards td.thumb-cell {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: auto;
        padding: 0;
    }

    .table-cards td.thumb-cell ~ td.card-title {
        min-height: 3.25rem;
        padding-right: 3.75rem;
    }

    .table-cards td:empty {
        display: none;
    }

    /* Fält i ett kort: hela bredden och stora nog för tummen. */
    .table-cards td.stock-edit {
        display: block;
        padding-top: 0.5rem;
    }

    .table-cards td.stock-edit::before {
        display: block;
        margin-bottom: 0.25rem;
    }

    .table-cards input:not([type=checkbox]):not([type=hidden]),
    .table-cards select {
        width: 100%;
        max-width: none !important;
        min-height: 2.75rem;
        font-size: 1.05rem;
    }

    .table-cards .stock-why {
        display: grid;
        gap: 0.4rem;
        margin-top: 0.4rem;
    }
}

.nowrap {
    white-space: nowrap;
}

/* Lagret: skäl och anteckning först när raden ändrats (bara med skript). */
.forms-js .stock-row:not(.is-changed) .stock-why {
    display: none;
}

.stock-row.is-changed {
    background: var(--admin-warn-soft);
}

/* Spara-knappen står kvar nere i fönstret på långa sidor. */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0.75rem 0;
    background: linear-gradient(to top, var(--admin-sunken) 70%, transparent);
}

@media (max-width: 47.999rem) {
    .table-cards td.card-actions {
        display: block;
        padding-top: 0.5rem;
    }
}

/* Översiktens siffror går att trycka på: de leder till listan bakom. */
a.metric {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.metric:hover,
a.metric:focus-visible {
    border-color: var(--admin-ink-muted);
}

/* Att göra på översikten. */
.todo {
    margin-bottom: 1.25rem;
}

.todo h2 {
    margin-top: 0;
}

.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.todo-list li {
    border-top: 1px solid var(--admin-line);
}

.todo-list li:first-child {
    border-top: 0;
}

.todo-list a {
    display: block;
    padding: 0.6rem 1.5rem 0.6rem 0;
    color: var(--admin-ink);
    text-decoration: none;
    position: relative;
}

.todo-list a::after {
    content: "›";
    position: absolute;
    right: 0.25rem;
    color: var(--admin-ink-muted);
}

.todo-list a:hover,
.todo-list a:focus-visible {
    text-decoration: underline;
}

.todo-list li.is-urgent a {
    font-weight: 600;
}

/* Temat: förhandsvisningen står kvar bredvid fälten medan man rullar, så att
   man ser vad en ändring gör. På en smal skärm står den överst. */
@media (min-width: 70rem) {
    .theme-editor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        column-gap: 1.5rem;
        align-items: start;
    }

    .theme-editor > * {
        grid-column: 1;
    }

    .theme-editor > .theme-preview {
        grid-column: 2;
        grid-row: 1 / span 30;
        position: sticky;
        top: 1rem;
    }
}

/* Ny order: raderna utöver de tre första visas med "Lägg till vara". */
.forms-js tr.extra-line:not(.is-shown) {
    display: none;
}

/* Frakt-rutan på produktsidan: vikt med enhet bredvid, och vad frakten blir. */
.shipping-card .weight-input {
    display: flex;
    gap: 0.5rem;
    max-width: 16rem;
}

.shipping-card .weight-input input {
    flex: 1 1 auto;
    min-width: 0;
}

.shipping-card .weight-input select {
    flex: 0 0 5rem;
    width: 5rem;
}

.shipping-estimate {
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--admin-radius);
    background: var(--admin-sunken);
    font-size: 0.9rem;
}

.shipping-estimate:empty {
    display: none;
}

/* Menyn: "Ändra" öppnar formuläret under raden. */
.menu-edit {
    margin-bottom: 0.5rem;
}

.menu-edit > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.menu-edit > summary::-webkit-details-marker {
    display: none;
}

.menu-edit-form {
    min-width: 18rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-paper);
}

.how-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

/* Mejl: uppgifter att trycka på för att lägga in dem i texten. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.chip {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--admin-line);
    border-radius: 999px;
    background: var(--admin-paper);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.chip:hover,
.chip:focus-visible {
    border-color: currentColor;
}

.card-details {
    margin: 1rem 0;
}

.card-details > summary {
    cursor: pointer;
}

.email-design-grid {
    display: grid;
    gap: 0.75rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.email-design-grid input[type="color"] {
    width: 3.5rem;
    height: 2.25rem;
    padding: 0.1rem;
}

.group-row th {
    padding-top: 1.25rem;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-muted, inherit);
}

/* Reglage (_Slider.cshtml): dra, se siffran, "Standard" sätter tillbaka. */
.slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slider-row input[type="range"] {
    flex: 1;
    min-width: 8rem;
    accent-color: var(--admin-accent);
}

.slider-value {
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

button.slider-reset {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--admin-line);
    background: transparent;
    color: var(--admin-ink-muted);
    font-size: 0.8rem;
}

button.slider-reset:hover {
    background: var(--admin-sunken);
    color: var(--admin-ink);
}

/* Förhandsvisningen av en panel på startsidan (panel-preview.js). Ligger kvar
   överst medan hon skrollar i formuläret, så att det hon ändrar syns samtidigt. */
.panel-preview {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-sunken);
}

.panel-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.panel-preview-bar .hint {
    flex: 1;
}

.segmented {
    display: inline-flex;
    gap: 0.25rem;
}

.segmented button[aria-pressed="true"] {
    background: var(--admin-accent);
    color: var(--admin-accent-contrast);
}

.panel-preview-stage {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--admin-paper);
    box-shadow: 0 0 0 1px var(--admin-line);
}

.panel-preview-stage {
    margin-inline: auto;
}

.panel-preview-stage iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
    background: #fff;
}

.panel-preview-stage iframe.is-loading {
    opacity: 0;
    pointer-events: none;
}

.panel-preview.is-updating .panel-preview-bar strong::after {
    content: " · uppdaterar …";
    font-weight: 400;
    color: var(--admin-ink-muted);
}

.panel-preview.has-failed .panel-preview-bar strong::after {
    content: " · kunde inte uppdatera, försök igen";
    font-weight: 400;
    color: var(--admin-danger);
}

/* En låg skärm: förhandsvisningen ska inte ta hela höjden från formuläret. */
@media (max-height: 760px) {
    .panel-preview {
        position: static;
    }
}

/* Utseende (_BlockStyle.cshtml): en del av panelen per hopfällbar rad, och
   bara den skärm som är vald syns (panel-preview.js sätter data-st-device).
   Utan skript syns båda, var och en med sitt namn. */
.block-style {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
}

.block-style legend {
    font-weight: 600;
    padding-inline: 0.35rem;
}

/* Inte klistrad: förhandsvisningen ovanför ligger kvar överst med samma val. */
.block-style-device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

form[data-st-device="desktop"] .st-phone,
form[data-st-device="phone"] .st-desktop,
form[data-st-device="desktop"] .st-phone-note {
    display: none;
}

.st-part {
    border-top: 1px solid var(--admin-line);
}

.st-part > summary {
    padding: 0.75rem 0;
    font-weight: 600;
    cursor: pointer;
}

.st-count {
    font-weight: 400;
    color: var(--admin-ink-muted);
}

.st-row {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0 0.75rem;
}

.st-label {
    font-weight: 500;
}

.st-device-label {
    font-size: 0.8rem;
    color: var(--admin-ink-muted);
}

.st-number,
.st-colour {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.st-number input[type="range"] {
    flex: 1 1 10rem;
    min-width: 8rem;
}

/* Inget valt: reglaget visar var panelen står, men blekt. */
.st-number input[type="range"].is-unset {
    opacity: 0.45;
}

.st-number input[data-st-number] {
    flex: 0 0 auto;
    width: 5.5rem;
}

.st-device select {
    max-width: 22rem;
}

.st-step {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.st-colour input[type="color"] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.15rem;
}

.st-colour input[type="text"] {
    width: 7rem;
    font-family: ui-monospace, monospace;
}

.st-chip {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgb(0 0 0 / 25%);
    border-radius: 50%;
}

.st-chip:hover,
.st-chip:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

/* Justera (Adjust.cshtml): hela startsidan i ett fönster som fyller skärmen,
   reglagen bredvid på dator och under på telefon. */
.adjust-body {
    margin: 0;
    background: var(--admin-sunken);
}

.adjust {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

.adjust-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.6rem 1rem;
    background: var(--admin-paper);
    border-bottom: 1px solid var(--admin-line);
}

.adjust-close {
    font-weight: 600;
    text-decoration: none;
}

.adjust-title {
    flex: 1;
}

.adjust-status {
    color: var(--admin-ink-muted);
    font-size: 0.9rem;
}

.adjust-main {
    display: flex;
    flex: 1;
    min-height: 0;
}

.adjust-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.adjust-stage iframe {
    position: absolute;
    top: 8px;
    border: 0;
    background: #fff;
    transform-origin: 0 0;
    box-shadow: 0 0 0 1px var(--admin-line), 0 6px 24px rgb(0 0 0 / 12%);
}

.adjust-side {
    width: 22rem;
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    background: var(--admin-paper);
    border-left: 1px solid var(--admin-line);
}

.adjust-side h2 {
    margin-top: 0.25rem;
}

.adjust-gap {
    display: grid;
    gap: 0.35rem;
    margin: 1rem 0;
}

.adjust-gap label {
    font-weight: 600;
}

.adjust-gap input[data-adjust-value] {
    flex: 0 0 auto;
    width: 5.5rem;
}

.adjust-gap input[type="range"].is-unset {
    opacity: 0.45;
}

@media (max-width: 47.999rem) {
    .adjust-main {
        flex-direction: column;
    }

    .adjust-stage {
        flex: 0 0 55dvh;
    }

    .adjust-side {
        width: auto;
        flex: 1;
        border-left: 0;
        border-top: 1px solid var(--admin-line);
    }
}

/* Ordersidan: en liten bild per rad, så att den som packar ser vad som ska plockas. */
.order-line {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-width: 14rem;
}

.order-line-image {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    object-fit: cover;
    background: var(--admin-sunken);
    box-shadow: 0 0 0 1px var(--admin-line);
}

/* Ordersidan uppifrån och ner: status, packa, skicka till, klart. */
.order-stage {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--admin-radius);
    border: 1px solid var(--admin-line);
    background: var(--admin-paper);
}

.order-stage strong {
    font-size: 1.15rem;
}

.order-stage-todo {
    border-color: #2c6ecb;
    background: #eaf2fd;
}

.order-stage-ok {
    border-color: var(--admin-ok);
    background: var(--admin-ok-soft);
}

.order-stage-warning {
    border-color: var(--admin-warn);
    background: var(--admin-warn-soft);
}

.order-stage-muted {
    color: var(--admin-ink-muted);
}

.order-step h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-step-number {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--admin-accent);
    color: var(--admin-accent-contrast);
    font-size: 0.95rem;
}

.pick-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pick-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
}

.pick-item.is-sent {
    opacity: 0.6;
}

.pick-item > .badge-ok {
    grid-column: 3;
}

.pick-image {
    width: 96px;
    height: 96px;
    border-radius: 0.5rem;
    object-fit: cover;
    background: var(--admin-sunken);
}

.pick-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.pick-text strong {
    font-size: 1.05rem;
}

.pick-quantity {
    min-width: 4.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--admin-sunken);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pick-quantity small {
    font-size: 0.8rem;
    font-weight: 400;
}

.ship-to {
    display: grid;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .ship-to {
        grid-template-columns: 1fr 1fr;
    }
}

.ship-to-address p {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.ship-to-name {
    font-weight: 700;
}

.order-done-button {
    width: 100%;
    padding: 1rem;
    font-size: 1.15rem;
}

.order-cannot {
    margin: 0;
    color: var(--admin-ink-muted);
}

.order-partial {
    margin-top: 1rem;
}

.order-partial summary,
.order-more summary {
    cursor: pointer;
    font-weight: 600;
}

.order-partial-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.order-more-heading {
    margin-top: 2rem;
    font-size: 1rem;
    color: var(--admin-ink-muted);
}

.order-more {
    margin-bottom: 0.75rem;
}

.order-danger summary {
    color: var(--admin-danger);
}

@media (max-width: 30rem) {
    .pick-item {
        grid-template-columns: auto 1fr;
    }

    .pick-quantity {
        grid-column: 2;
        justify-self: start;
    }

    .pick-image {
        width: 72px;
        height: 72px;
    }
}

/* Inloggningsappens adress är ett enda långt ord; på en telefon sköt den sidan
   330 px åt sidan. */
.authenticator-uri {
    overflow-wrap: anywhere;
}

/* Inkorgen: en flik per brevlåda, med antal olästa. */
.mail-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mail-box {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--admin-line);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.mail-box.is-current {
    border-color: var(--admin-accent);
    background: var(--admin-accent);
    color: var(--admin-accent-contrast);
}

.mail-box-unread {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--admin-danger);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

/* Mapparna i en brevlåda: Inkorg, Skickat, Papperskorg. */
.mail-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.mail-folders .is-current {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
    color: var(--admin-accent-contrast);
}

/* Sökrutan ovanför listan. */
.mail-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mail-search input[type="search"] {
    flex: 1 1 14rem;
    max-width: 30rem;
}

.mail-search-result {
    margin: 0 0 0.75rem;
}

/* Listan: oläst i fetstil, med en blå prick och en ljusblå rad, som i Mail
   på iPhone. Blått och inte adminens accent, som är nästan svart och inte
   syns som en ton. */
.mail-list {
    width: 100%;
    --mail-unread: #0a6cdb;
}

.mail-list tr.is-unread {
    background: #eef5ff;
}

.mail-list tr.is-unread .mail-name,
.mail-list tr.is-unread .mail-open {
    font-weight: 700;
    color: var(--admin-ink);
}

.mail-list .mail-open {
    color: inherit;
}

.mail-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--mail-unread);
    vertical-align: 0.05rem;
}

.mail-date {
    white-space: nowrap;
}

/* Telefonen: en rad per brev som i Mail. Avsändare och tid överst, ämnet
   under, och hela raden går att trycka på. Inga kolumnrubriker och ingen
   sidledsrullning. */
@media (max-width: 47.999rem) {
    .mail-list,
    .mail-list tbody {
        display: block;
        min-width: 0;
    }

    .mail-list thead {
        display: none;
    }

    .mail-list tr {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "from date"
            "subject actions";
        gap: 0.15rem 0.75rem;
        padding: 0.75rem 0.25rem 0.75rem 0.5rem;
        border-bottom: 1px solid var(--admin-line);
    }

    .mail-list td {
        display: block;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .mail-list .mail-from {
        grid-area: from;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mail-list .mail-address {
        display: none;
    }

    .mail-list .mail-date {
        grid-area: date;
        font-size: 0.85rem;
        color: var(--admin-ink-muted);
    }

    .mail-list .mail-subject {
        grid-area: subject;
        overflow-wrap: anywhere;
    }

    .mail-list .mail-actions {
        grid-area: actions;
        position: relative;
        z-index: 1;
    }

    /* Hela raden öppnar brevet, utom knapparna som ligger ovanpå. */
    .mail-list .mail-open::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}

/* Radera och återställ på varje rad, utan att ta mer plats än en knapp. */
.mail-actions {
    white-space: nowrap;
    text-align: right;
}

.mail-actions form,
.mail-forever,
.mail-forever form {
    display: inline-block;
    margin: 0;
}

.mail-forever > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.mail-forever > summary::-webkit-details-marker {
    display: none;
}

.mail-forever[open] > summary {
    display: none;
}

/* Ett öppet brev: knapparna överst, som i Mail. */
.mail-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.mail-toolbar form {
    margin: 0;
}

/* Brevets egen HTML. Skriptet gör ramen lika hög som brevet; utan det
   rullar ramen själv. Vit bakgrund, för det är vad avsändaren räknat med. */
.mail-html {
    display: block;
    width: 100%;
    height: 70vh;
    margin: 1rem 0;
    border: 1px solid var(--admin-line);
    border-radius: 0.5rem;
    background: #fff;
}

.mail-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--admin-accent) 6%, var(--admin-paper));
}

.mail-images p {
    flex: 1 1 100%;
    margin: 0;
}

.mail-images form,
.mail-images-trusted {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
}

/* Notiser: vad varje enhet får. */
.push-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.push-topics .checkbox {
    margin: 0;
}

/* Statistik */
.stat-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.stat-periods a {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.stat-periods a[aria-current="page"] {
    border-color: currentColor;
    font-weight: 600;
}

.metric .stat-change {
    font-size: 0.85rem;
}

.stat-change.is-up {
    color: #2e7d32;
}

.stat-change.is-down {
    color: #b3261e;
}

.stat-charts {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.stat-charts figure {
    margin: 0;
}

.stat-charts svg,
.stat-hours {
    display: block;
    width: 100%;
    height: 8rem;
    background: #faf9f7;
    border-radius: 4px;
}

.stat-hours {
    height: 5rem;
}

.bar-visitors {
    fill: #8a7a6a;
}

.bar-sales {
    fill: #4f7a5a;
}

.stat-hour-axis {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0 0;
}

.stat-funnel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stat-funnel li {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 6px;
}

.stat-funnel .value {
    font-size: 1.5rem;
    font-weight: 600;
}

.stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    margin-bottom: 1.5rem;
}

.stat-list h3 {
    margin-top: 0;
}

.stat-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.stat-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    background: linear-gradient(to right, #efe9e2 var(--bar, 0%), transparent var(--bar, 0%));
}

.stat-label {
    overflow-wrap: anywhere;
    min-width: 0;
}

.stat-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stat-about {
    margin-top: 2rem;
}

/* En lång inställningsrad i ett meddelande bryts hellre än skjuter ut sidan i sidled på telefonen. */
.notice code {
    overflow-wrap: anywhere;
}

/* Guiden för iPhone: rubriken står i summary och ska se ut som de andra kortens. */
.push-guide summary {
    cursor: pointer;
}

.push-guide summary h2 {
    display: inline;
    margin: 0;
}

.push-guide h3 {
    margin-top: 1.25rem;
}

/* Gjord på beställning: det kunden skrev, tydligt på packraden. */
.pick-personal {
    display: block;
    margin-top: 0.15rem;
    padding: 0.2rem 0.5rem;
    border-left: 3px solid #9d826d;
    background: #f6f1ec;
}

.personal-row {
    border-left: 3px solid #e5ddd5;
    padding-left: 0.75rem;
}

/* Just nu i butiken */
.live-now {
    border-left: 4px solid #2e7d32;
}

.live-now.is-busy {
    border-left-color: #c77700;
}

.live-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.live-figures p {
    margin: 0;
}

.live-figures .value {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.live-verdict {
    margin: 0.5rem 0 0;
}

/* Text på föremål: fälten bara när rutan är ikryssad. */
.step:has(#PersonalizationEnabled:not(:checked)) .personal-fields {
    display: none;
}

.stat-axis {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0 0;
}

.stat-table {
    width: 100%;
}

.stat-excluded-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.stat-excluded-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.stat-excluded-list li > span {
    flex: 1 1 12rem;
}

/* AI-hjälp: knapparna för ett område bredvid varandra, utan radbrytning i dem. */
.ai-area-actions {
    white-space: nowrap;
    text-align: right;
}

.ai-area-actions .inline-form {
    display: inline-block;
    margin: 0 0 0 0.25rem;
}

/* Presentkortets kod, stor nog att läsa upp för en kund. */
.giftcard-code code {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}