/*
 * The default theme.
 *
 * Deliberately plain and typographic: a deployment supplies its own brand through
 * store configuration and a theme, and nothing here should have to be undone to
 * make that look right. Mobile first, because most shoppers arrive on a phone.
 */

:root {
    --ink: #1a1a1a;
    --ink-muted: #5c5c5c;
    --paper: #ffffff;
    --paper-sunken: #f6f5f3;
    --line: #e2dfda;
    --accent: #2f4f4f;
    --accent-contrast: #ffffff;

    /* Ljusa accentytor: bannern, brickor, markerade rader. Aldrig knappar,
       de behåller --accent. */
    --color-accent-light: var(--paper-sunken);
    --color-accent-light-ink: var(--ink);
    --danger: #9b2c2c;
    --success: #276749;
    --radius: 4px;
    --measure: 68ch;
    --gap: 1rem;
}

html {
    /* Se .full-bleed nedan: bilden är 100vw bred, och 100vw räknar med
       rullningslisten på en dator. Utan det här får varje sida några pixlars
       sidledsrullning. clip och inte hidden — hidden gör elementet till en egen
       rullningsbehållare och slår sönder position: sticky längre in på sidan. */
    overflow-x: clip;
}

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

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);

    /* Temats mönster, när det har ett: svagt, på sidans bakgrund. Ytor med
       egen bakgrund (sidhuvudet, avsnitten, korten) ligger ovanpå. */
    background-image: var(--page-pattern, none);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus must stay visible: the checkout is completable without a mouse. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.announcement {
    background: var(--c-announcement-background, var(--color-accent-light));
    color: var(--c-announcement-text, var(--color-accent-light-ink));
    text-align: center;
    padding: 0.55rem 1rem;

    /* Versaler och glesa bokstäver: raden ska läsas som en skylt över butiken
       och inte som en mening någon glömt kvar. */
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Tre spalter med namnet i mitten.
   Rutnät och inte flex, för att butikens namn ska stå exakt mitt på skärmen
   oavsett hur breda sakerna bredvid är — med flex vandrar det i sidled så fort
   varukorgen får en siffra. */
.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.header-start {
    justify-self: start;
    display: flex;
    align-items: center;
}

.brand {
    justify-self: center;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

/* Logotypen i stället för namnet: fast höjd, så sidhuvudet inte hoppar när
   bilden laddas, och bredden följer bildens egna proportioner. Höjden väljs
   under Tema (standard som på deras tidigare sida: 100 px på dator, 66 px på
   telefon) och kommer hit som --logo-height och --logo-height-mobile. */
.brand-logo img {
    display: block;
    height: var(--logo-height-mobile, 66px);
    width: auto;
    max-width: calc(100vw - 11.5rem);
    object-fit: contain;

    /* En logga sparad med vit eller gräddvit bakgrund blir annars en synlig
       ruta mot sidhuvudet; så smälter den ljusa bakgrunden in och bara
       bokstäverna syns. */
    mix-blend-mode: multiply;

    /* Nästan vitt (254) blir helt vitt, så ingen svag ruta syns mot ett vitt
       sidhuvud. Bokstävernas färg ändras med under två procent. */
    filter: brightness(1.02);
}

@media (min-width: 48rem) {
    .brand-logo img {
        height: var(--logo-height, 100px);
        max-width: 40vw;
    }
}

.header-actions {
    justify-self: end;
}

/* Språkbytet: två bokstäver bredvid ikonerna, lika hög träffyta som dem. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;

    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: inherit;
}

.lang-switch:hover {
    text-decoration: underline;
}

/* Menyn och sökrutan ligger på egna rader under den översta. */
.site-nav,
.search {
    grid-column: 1 / -1;
}

.site-nav {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
}

/* Ikonerna på en rad. Spalten är smal, och radbrytning staplade dem ovanpå
   varandra i stället för bredvid. */
.header-actions {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    align-items: center;
}

/* Ikonknapparna.
   Egen klass och inte bara "button", eftersom temat målar varje knapp svart
   med accentfärgad hovring — en ikon ska bära sidans egen färg. */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
}

.icon-button:hover {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
}

.header-actions .icon-button {
    color: var(--c-header-text, var(--ink));
}

.cart-link {
    position: relative;
}

/* Antalet som en liten bricka på väskan, som i butikens nuvarande sida. */
.cart-count {
    position: absolute;
    top: 0.3rem;
    right: 0.15rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--c-cart-count-background, var(--accent));
    color: var(--c-cart-count-text, var(--accent-contrast));
    font-family: var(--font-accent, inherit);
    font-size: 0.7rem;
    line-height: 1.15rem;
    text-align: center;
}

.site-nav a,
.header-actions a {
    text-decoration: none;
    color: var(--ink-muted);
}

.site-nav a:hover,
.header-actions a:hover {
    color: var(--ink);
}

.search {
    display: flex;
    gap: 0.25rem;
}


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

.site-main {
    padding: 1.5rem 1rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Kant till kant, ut ur innehållsspalten.
   Toppbilden ska nå skärmens kanter medan texten under stannar i sin spalt.
   100vw räknar med rullningslisten på en dator, vilket ger några pixlars
   sidledsrullning — därför klipps det på html-elementet. */
.full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Toppbilden ligger tätt mot sidhuvudet, utan luften sidan annars börjar med. */
.site-main > .full-bleed:first-child {
    margin-top: -1.5rem;
}

.site-footer {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.site-footer nav {
    display: flex;
    justify-content: center;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

h1, h2, h3,
.section-heading {
    color: var(--c-headings, inherit);
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 0.5em;
}

p {
    max-width: var(--measure);
}

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

.notice {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--paper-sunken);
    border-left: 3px solid var(--success);
    max-width: none;
}

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

/* Forms */

input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.field {
    margin-bottom: 1rem;
}

.field-error {
    color: var(--danger);
    font-size: 0.875rem;
}

.field-row {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }
}

button,
.button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--c-button-background, var(--accent));
    border-radius: var(--radius);
    background: var(--c-button-background, var(--accent));
    color: var(--c-button-text, var(--accent-contrast));
    text-decoration: none;
    cursor: pointer;
    width: auto;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

/* Product grid */

.product-grid {
    display: grid;

    /* Två kolumner på telefon.
       Nästan alla kunder handlar i telefonen, och en kolumn betyder en hel
       skärm per vara: åtta varor blev nästan fyra tusen pixlars rullning, och
       butiken har sjuttio. Två kolumner är också vad de är vana vid från
       Shopify. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;

    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 40rem) {
    .product-grid {
        gap: 1.5rem;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    }
}

.product-card {
    /* Centrerat under bilden, som i butiker av det här slaget. */
    text-align: center;
}

.product-card a {
    text-decoration: none;
}

/* Bilden, märkningen och köpknappen i samma ruta, så knappen kan ligga i
   hörnet av fotot i stället för under det. */
.product-card-media {
    position: relative;
    margin-bottom: 0.5rem;
}

.product-card img {
    /* Formen väljs under Tema → Produktbilder; 4:5 som i Shopify-butiken. */
    aspect-ratio: var(--product-card-ratio, 4 / 5);
    object-fit: cover;
    background: var(--paper-sunken);
    border-radius: var(--radius);
    margin-bottom: 0;
}

.product-card-media .badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

/* Köpknappen nere i vänstra hörnet av bilden.
   En beige platta som ligger över fotot utan att täcka det: den ska synas på en
   ljus produktbild men inte ta uppmärksamhet från varan. */
.quick-add {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    margin: 0;
}

.quick-add-button {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    color: var(--ink);

    /* Enkel bakgrund först, som reserv för de webbläsare som inte kan
       color-mix. Utan den blir knappen osynlig mot en ljus bild. */
    background: var(--c-quick-add-background, var(--paper-sunken));
    background: color-mix(in srgb, var(--c-quick-add-background, var(--paper-sunken)) 90%, transparent);
}

.quick-add-button:hover,
.quick-add-button:focus-visible {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* Väskan som fäller ut storlekarna.
   summary bär samma utseende som knappen bredvid, så kunden ser inte att den
   ena öppnar en panel och den andra lägger i korgen direkt — det är samma
   handling, bara med ett mellansteg när det finns något att välja. */
.quick-add-choice > summary {
    list-style: none;
    cursor: pointer;
}

.quick-add-choice > summary::-webkit-details-marker,
.quick-add-choice > summary::marker {
    display: none;
    content: "";
}

.quick-add-panel {
    position: absolute;
    left: 0;
    bottom: 3rem;
    z-index: 2;

    display: grid;
    gap: 0.25rem;

    /* Brett nog att "649,00 SEK" ryms på en rad. Ett pris brutet mitt itu är
       svårare att jämföra än ett som står helt. */
    min-width: 12rem;
    padding: 0.5rem;

    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 12%);
    text-align: left;
}

.quick-add-panel button {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.6rem;

    /* Minst så högt att ett finger träffar rätt rad. */
    min-height: 2.5rem;

    background: transparent;
    color: var(--ink);
    border: 0;
    border-radius: var(--radius);
    font-size: 0.875rem;
    text-align: left;
}

.quick-add-panel button .muted {
    white-space: nowrap;
}

.quick-add-panel button:hover:not(:disabled),
.quick-add-panel button:focus-visible {
    background: var(--c-button-background, var(--accent));
    border-color: transparent;
    color: var(--c-button-text, var(--accent-contrast));
}

.quick-add-panel button:hover:not(:disabled) .muted,
.quick-add-panel button:focus-visible .muted {
    color: inherit;
}

.quick-add-panel button:disabled {
    opacity: 0.45;
}

.product-card-text {
    display: block;
}

.product-card .title,
.product-card .price {
    display: block;
}

.product-card .title {
    font-weight: 500;
}

/* Priset
   ----------------------------------------------------------------------------
   Två delar: beloppet, som är priset, och valutan, som är en etikett efter det.
   "SEK" i versaler i samma storlek som siffrorna blev större än beloppet för
   ögat — versaler är höga och breda, siffror smala. Valutan är därför mindre,
   lätt spärrad och tonad, med lite luft före.

   Stående siffror (lnum) i samma höjd som versalerna, så att "29,00" står
   lugnt på raden; kerning på. Ingen påhittad fetstil: typsnittet används i den
   vikt det har (font-synthesis: none). */
.price {
    color: var(--c-price, inherit);
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1, "kern" 1;
    font-synthesis: none;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.price-amount {
    letter-spacing: -0.01em;
}

.price-currency {
    font-size: 0.64em;
    letter-spacing: 0.1em;
    margin-left: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    vertical-align: baseline;
}

/* I tabeller står beloppen under varandra: lika breda siffror där. */
td.price,
.totals dd,
.panel dd {
    font-variant-numeric: lining-nums tabular-nums;
}

.price del {
    color: var(--ink-muted);
    margin-right: 0.45rem;
}

.price del .price-currency {
    color: inherit;
}

.badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
    background: var(--paper-sunken);
    color: var(--ink-muted);
}

.badge-sale {
    background: var(--c-sale-badge-background, var(--danger));
    color: var(--c-sale-badge-text, #fff);
}

.badge-soldout {
    background: var(--c-sold-out-badge-background, var(--ink-muted));
    color: #fff;
}

/* Samma vara i andra utföranden: en rad prickar under bilden. */
.swatches {
    margin: 0 0 1.25rem;
}

.swatch-heading {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

/* Vad utförandet heter är ett namn och inte en etikett. "EK" skrikandes i
   versaler efter "MATERIAL:" läser sig som två rubriker; namnet skrivs som
   butiken skrev det. */
.swatch-heading .muted {
    text-transform: none;
    letter-spacing: 0;
}

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

.swatch {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;

    background-color: var(--paper-sunken);
    background-size: cover;
    background-position: center;

    /* En tunn ram, för att en vit prick mot vitt papper annars inte finns. */
    border: 1px solid var(--line);
}

/* Fingret behöver mer än pricken är stor. Träffytan växer utanför cirkeln i
   stället för att cirkeln blir klumpig. */
.swatches li {
    padding: 0.25rem;
}

.swatch:hover {
    border-color: var(--ink-muted);
}

/* Den man tittar på: en ring utanför pricken, inte en färgändring — färgen är
   ju varans egen och får inte ändras för att markera något. */
.swatch.is-current {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    cursor: default;
}

/* Product detail */

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

@media (min-width: 52rem) {
    .product-detail {
        grid-template-columns: 3fr 2fr;
    }
}

/* Produktbilderna: en i taget, svep åt sidan. Ett spår som rullar i sidled
   och snäpper fast vid varje bild — webbläsarens egen rullning, så svepet
   känns som telefonens och fungerar utan skript. */
.gallery {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.gallery-viewport {
    position: relative;
}

.gallery-track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    list-style: none;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-track:focus-visible {
    outline-offset: -2px;
}

.gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: var(--paper-sunken);
}

/* Samma form på alla bilder, så att sidan inte hoppar mellan dem. Formen och
   om bilden fyller rutan eller visas hel väljs under Tema (standard 4:5 och
   fylld, som i den gamla Shopify-butiken). */
.gallery-slide img,
.gallery-slide video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--product-media-ratio, 4 / 5);
    object-fit: var(--product-media-fit, cover);
    background: var(--paper);
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    color: var(--ink);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.gallery-arrow:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
}

.gallery-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.gallery-prev {
    left: 0.5rem;
}

.gallery-next {
    right: 0.5rem;
}

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

.gallery-thumbs a {
    display: block;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--line);
    background: var(--paper-sunken);
}

.gallery-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Miniatyrerna i samma form som de stora bilderna. */
.gallery-thumbs a {
    height: auto;
    aspect-ratio: var(--product-media-ratio, 4 / 5);
}

.gallery-thumbs a[aria-current="true"] {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

/* Telefon (en spalt): bild, titel och pris ska synas utan att man rullar, som
   i de flesta webbutiker. Bilden får högst 52 % av skärmhöjden (svh: det som
   syns med webbläsarens egna fält framme) och visas hel i rutan i stället för
   att fylla den — en 2:3-bild i en hög 9:16-ruta blev annars beskuren på
   sidorna och såg inzoomad ut. Miniatyrerna blir en rad små rutor. */
@media (max-width: 51.999rem) {
    .site-main:has(> .product-detail) {
        padding-top: 0.75rem;
    }

    .product-detail {
        gap: 1.25rem;
    }

    .product-info h1 {
        font-size: clamp(1.5rem, 6.5vw, 1.75rem);
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    .product-info .product-price {
        margin-top: 0;
    }

    .gallery-slide img,
    .gallery-slide video {
        max-height: 52svh;
        object-fit: contain;
    }

    .gallery-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 2px;
    }

    .gallery-thumbs a {
        flex: 0 0 auto;
        width: 3rem;
        aspect-ratio: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-track {
        scroll-behavior: auto;
    }

    /* Filmen visas inte för den som bett om mindre rörelse, och då ska den
       inte heller lämna en tom plats i bildraden. */
    .gallery-slide.is-video,
    .gallery-thumbs .is-video {
        display: none;
    }
}

/* Cart and checkout */

.line-items {
    width: 100%;
    border-collapse: collapse;
}

.line-items th,
.line-items td {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.line-items td:last-child,
.line-items th:last-child {
    text-align: right;
}

/* A narrow screen cannot show a wide table; scrolling it is better than
   truncating prices the shopper needs to read. */
.table-scroll {
    overflow-x: auto;
}

.totals {
    margin-left: auto;
    max-width: 22rem;
}

.totals dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    margin: 0;
}

.totals dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.totals .grand {
    font-weight: 600;
    font-size: 1.1rem;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

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

@media (min-width: 52rem) {
    .checkout-layout {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }
}

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    background: var(--paper);
}

.choice {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.choice input {
    width: auto;
    margin-top: 0.35rem;
}

@media (prefers-reduced-motion: no-preference) {
    a,
    button {
        transition: color 120ms ease, background-color 120ms ease;
    }
}

/* Consent */

.consent-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    z-index: 10;
}

.consent-banner p {
    flex: 1 1 20rem;
    margin: 0;
}

.consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Homepage blocks */

/* Avsnittsrubrik: "våra KOLLEKTIONER".
   Det lilla kursiva ordet i brödtextens snitt, resten i versaler i
   gränssnittssnittet. Kontrasten mellan de två är hela poängen. */
.section-heading {
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-accent, inherit);
    font-weight: 500;
    letter-spacing: 0.06em;
    font-size: 1.5rem;
    margin: 2.5rem 0 1.25rem;
}

.section-heading em {
    font-family: var(--font-body, inherit);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    margin-right: 0.25em;
}

@media (min-width: 48rem) {
    .section-heading {
        font-size: 2rem;
    }
}

/* Kollektionerna som en rad man drar i sidled på telefon.
   Egna klasser och inte produktrutnätets: ett kollektionskort har ingen
   köpknapp och ingen rea-märkning, och ska inte ärva reglerna för dem. */
.collection-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    list-style: none;
    margin: 0 -1rem;
    padding: 0 1rem 0.5rem;
}

.collection-row::-webkit-scrollbar {
    display: none;
}

.collection-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
    text-align: center;
}

.collection-card a {
    text-decoration: none;
}

.collection-card img {
    width: 100%;

    /* Formatet väljs i adminen på blocket (CollectionCardSettings); stående
       4:5 som standard. Bilden beskärs (cover) och sträcks aldrig. */
    aspect-ratio: var(--card-ratio, 4 / 5);
    object-fit: cover;
    background: var(--paper-sunken);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.collection-card .title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8125rem;
}

@media (min-width: 48rem) {
    .collection-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        gap: 1.5rem;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .collection-card {
        flex: initial;
    }
}

/* Ett beige band bakom ett avsnitt.
   Förebilden byter bakgrund mellan avsnitten i stället för att sätta linjer
   mellan dem. Bandet går kant till kant medan innehållet stannar i spalten, så
   regeln bär sin egen utbrytning i stället för att kräva .full-bleed också. */
.band {
    width: 100vw;
    margin-inline: calc(50% - 50vw);

    /* Innehållet hålls i spalten av bandets egen indragning, inte av
       marginaler på barnen. Ett rutnät med "margin: 0" nollställde annars
       centreringen, och avsnittet gled ut i vänsterkanten. */
    padding-block: 0.5rem 2.5rem;
    padding-inline: max(1rem, calc(50vw - 550px));

    background: var(--c-section-background, var(--paper-sunken));
}

/* Omdömen.
   Citat butiken valt ut. Stjärnorna hör till citatet bredvid och är aldrig ett
   snitt — därför står de i varje kort och aldrig som en siffra för sig. */
.testimonials {
    background: var(--paper);
}

.quote-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 48rem) {
    .quote-grid {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: 1.5rem;
    }
}

.quote-card {
    background: var(--c-review-background, var(--paper-sunken));
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}

.quote-card .stars {
    margin: 0 0 1rem;
    color: var(--c-stars, var(--accent));
    font-size: 1.1rem;
    letter-spacing: 0.35em;

    /* Stjärnorna sitter tätt ihop i sin ruta; indraget håller raden centrerad
       trots mellanrummet efter den sista. */
    text-indent: 0.35em;
}

.quote-card blockquote {
    margin: 0 0 1.25rem;
    font-style: italic;
    line-height: 1.7;
}

.quote-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-accent, inherit);
    font-size: 0.875rem;
    text-align: left;
}

.quote-by .muted {
    display: block;
    color: var(--ink-muted);
}

.quote-mark {
    font-size: 3rem;
    line-height: 0.6;
    color: var(--line);
}

/* Omdömen i adminpanelen. */
.quote-strip {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 1rem;
}

.quote-strip li {
    border: 1px solid var(--admin-line, #e3e3e3);
    border-radius: var(--radius);
    padding: 1rem;
}

.quote-strip blockquote {
    margin: 0 0 0.5rem;
    font-style: italic;
}

.quote-stars {
    margin: 0 0 0.5rem;
    letter-spacing: 0.2em;
}

/* Nyhetsbrevet i sidfoten. */
.footer-newsletter {
    max-width: 26rem;
    margin: 0 auto 2rem;
}

.footer-newsletter .section-heading {
    margin-top: 0;

    /* Mindre än en avdelningsrubrik ute på sidan. Nyhetsbrevet står i sidfoten
       på varje sida och ska inte ropa lika högt som butikens egna rubriker. */
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.hero {
    text-align: center;
    margin-bottom: 3rem;
}

/* En toppbild med foto beter sig som filmtoppen: bilden fyller ytan och texten
   ligger över. Utan detta fick bilden ingen form alls och en stående bild tog
   hela telefonskärmen. */
.hero-image {
    position: relative;
    margin-bottom: 2rem;

    /* Underkanten, inte kortformen: margin nollställer
       margin-inline som .full-bleed behöver. */
}

.hero-image img {
    width: 100%;
    height: var(--hero-height);
    object-fit: cover;
}

.hero p {
    margin-inline: auto;
}

/* Bild med text, som Shopify-panelen butiken hade. Allt som går att välja i
   adminen kommer som variabler i blockets style (ImageTextSettings):
   --image-width, --media-height(-mobile), --text-scale, --heading-scale,
   --block-space, --media-order(-mobile), --it-background, --it-text och
   typsnitten. Utan val: bilden till höger, 80 % av skärmhöjden på dator och
   70 % på telefon, temats bruna yta och vit text. */
.media-text {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    background: var(--it-background, var(--accent));
    color: var(--it-text, var(--accent-contrast, #fff));
    font-family: var(--body-font, inherit);
    font-size: calc(1rem * var(--text-scale, 1));
}

.media-text-media {
    order: var(--media-order-mobile, 0);
}

.media-text-media img {
    display: block;
    width: 100%;
    height: var(--media-height-mobile, 70svh);
    object-fit: cover;
}

.media-text-content {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: max(1rem, calc(1.5rem * var(--block-space, 1.5))) 1.25rem;
}

.media-text h2 {
    margin: 0 0 1rem;
    color: inherit;
    font-family: var(--heading-font, inherit);
    font-size: calc(1.5rem * var(--heading-scale, 1));
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.media-text-copy p {
    max-width: 32em;
    white-space: pre-line;
    margin: 0 0 1em;
    line-height: 1.5;
}

.media-text-link,
.media-text-link:visited {
    align-self: flex-start;
    color: inherit;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.media-text-link:hover,
.media-text-link:focus-visible {
    text-decoration: underline;
}

@media (min-width: 48rem) {
    .media-text {
        flex-direction: row;
        align-items: stretch;
    }

    .media-text-media {
        order: var(--media-order, 2);
        flex: 0 0 var(--image-width, 50%);
    }

    .media-text-media img {
        height: var(--media-height, 80svh);
    }

    .media-text-content {
        flex: 1;
        padding: max(1.5rem, calc(2rem * var(--block-space, 1.5))) max(1.5rem, 10%);
    }
}

/* Adminens förhandsvisning av en panel (Index.cshtml.cs, ?panel=): bara
   panelen, utan sidhuvud, sidfot och rutor som dyker upp. Bannern visas bara
   när det är den som förhandsvisas. */
.is-panel-preview:not(.is-announcement-preview) .announcement,
.is-panel-preview .site-header,
.is-panel-preview .site-footer,
.is-panel-preview .consent-banner,
.is-panel-preview .newsletter-popup,
.is-adjust-preview .consent-banner,
.is-adjust-preview .newsletter-popup {
    display: none !important;
}

.is-panel-preview .site-main {
    padding-top: 0;
}

/* Raden över ett kollektionsrutnät: sortering, lagerfilter och knappen.
   Tre kontroller som hör ihop ska se ut som en rad, inte som tre olika möjbler
   som råkat hamna bredvid varandra. Samma höjd på alla, samma underkant. */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

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

.filters label {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* En gemensam höjd. Utan den blev select, kryssruta och knapp tre olika höga
   lådor på rad, vilket är precis så slarvigt som det lät. */
.filters select,
.filters button,
.filters .choice {
    min-height: 2.75rem;
    margin-bottom: 0;
}

.filters select,
.filters button {
    padding-block: 0;
}

/* Kryssrutan är ingen ruta.
   .choice ritar en inramad platta, vilket är rätt i kassan där ett medgivande
   ska synas som ett eget val — men här blev det en tom låda runt två ord,
   större än knappen bredvid. */
.filters .choice {
    align-items: center;
    padding: 0;
    border: 0;
    gap: 0.5rem;
}

.filters .choice span {
    /* Etiketterna ovanför är versaler; den här står bredvid sin ruta och läses
       som vilken text som helst. */
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    color: var(--ink);
}

.filters .choice input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap);
    margin-top: 2rem;
}

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

.summary-lines li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
}

.summary-lines .price {
    margin-left: auto;
}

.newsletter-form {
    max-width: 26rem;
    margin-inline: auto;
}

/* Fältet och knappen på samma rad: knappen tar sin egen bredd, fältet resten. */
.newsletter-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: stretch;
}

.newsletter-row input,
.newsletter-row button {
    min-height: 2.75rem;
    margin: 0;
}

.newsletter-row button {
    white-space: nowrap;
}

/* Vad man tackar ja till, sagt en gång. */
.newsletter-terms {
    max-width: none;
    margin: 0.6rem 0 0;

    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-muted);
}

/* Copyright och org.nr sida vid sida längst ned. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;

    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.description p {
    max-width: var(--measure);
}

/* Product detail additions */

.product-info .product-price {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}


.quantity-field {
    max-width: 8rem;
}

.product-sections {
    margin-top: 2rem;
    border-top: 1px solid var(--line);
}

.product-sections details {
    border-bottom: 1px solid var(--line);
}

.product-sections summary {
    cursor: pointer;
    padding: 0.9rem 0;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    list-style: none;
}

/* The default triangle sits awkwardly against the uppercase labels, so it is
   replaced with a marker that flips when the panel opens. */
.product-sections summary::-webkit-details-marker {
    display: none;
}

.product-sections summary::after {
    content: "+";
    float: right;
    font-weight: 400;
}

.product-sections details[open] summary::after {
    content: "\2212";
}

.product-sections details > div {
    padding-bottom: 1rem;
}

.related {
    margin-top: 4rem;
}

.related h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.subcollections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.subcollections a {
    text-decoration: none;
    color: var(--ink-muted);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subcollections a:hover {
    color: var(--ink);
}

/* Film
 *
 * Which screens a film is for is decided in CSS rather than in script, so the
 * shop shows its goods whether or not JavaScript ran. A hidden video is not
 * merely invisible — display:none stops a browser autoplaying it, so the file
 * for the other screen is not fetched either.
 */

.for-desktop {
    display: none;
}

@media (min-width: 48rem) {
    .for-desktop {
        display: block;
    }

    .for-mobile {
        display: none;
    }
}

.product-video,
.hero-video video {
    width: 100%;
    height: auto;
    display: block;
}

.hero-video {
    position: relative;
    margin-bottom: 2rem;

    /* Underkanten, inte kortformen: margin nollställer
       margin-inline som .full-bleed behöver. */
}

.hero-video video {
    /* A fixed shape so the page does not jump when the film arrives. */
    width: 100%;
    height: var(--hero-height);
    object-fit: cover;
}

/* Toppbildens höjd, uppmätt på avelineinterior.com: 479 px på en 1 366 px
   bred skärm (35 % av bredden), och ungefär lika hög som bred på telefon.
   Lägre än förut, så produkterna under syns utan att man rullar. */
:root {
    --hero-height: clamp(24rem, 35vw, 36rem);
}

/* Bildtexten längst ned, som på deras sida: bilden får synas och en svag
   toning underifrån bär texten. */
.hero-caption {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    gap: 0.25rem;

    padding: 1.5rem 1.5rem 3rem;
    color: var(--c-hero-text, #fff);
    text-shadow: 0 1px 12px rgb(0 0 0 / 30%);
    background: linear-gradient(to top, rgb(0 0 0 / 19%), rgb(0 0 0 / 0%) 60%);
}

.hero-caption h1 {
    color: inherit;
    margin: 0 0 0.75rem;
    max-width: 22ch;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);

    /* Versaler, med de små bindeorden kursiva i gemener. Det är den växlingen
       som ger rubriken sin ton på förebilden. */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hero-caption h1 em {
    text-transform: none;
    font-style: italic;
    letter-spacing: 0;
}

/* Underrubriken som liten versal rad ovanför rubriken.
   Flyttad med order och inte i markupen, så att rubriken står först för den som
   lyssnar på sidan i stället för att se den. */
.hero-caption p {
    order: -1;
    color: inherit;
    margin: 0 0 0.5rem;
    font-family: var(--font-accent, inherit);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-caption .button {
    /* En textlänk i versaler, som "SHOP NOW" på deras sida: ingen ruta, bara
       orden. En egen bakgrundsfärg under Tema gör den till en knapp igen. */
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    background: var(--c-hero-button-background, transparent);
    border: 0;
    color: var(--c-hero-button-text, #fff);
    font-family: var(--font-body, inherit);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-underline-offset: 0.3em;
}

.hero-caption .button:hover,
.hero-caption .button:focus-visible {
    background: var(--c-hero-button-background, transparent);
    color: var(--c-hero-button-text, #fff);
    text-decoration: underline;
}

/* Somebody who has asked their system for less movement is asking for less
   movement here too. The still is shown instead, which is what the poster is
   for. */
@media (prefers-reduced-motion: reduce) {
    .product-video,
    .hero-video video {
        display: none;
    }

    .hero-video {
        background-size: cover;
        background-position: center;
        min-height: var(--hero-height);
    }
}

/* Bildspel
   ----------------------------------------------------------------------------
   Bilderna ligger ovanpå varandra och bara en är synlig i taget. Övergången är
   en opacity-transition, inte en animation som flyttar något: den kostar ingen
   omritning av sidan och river inte sönder texten ovanpå. */

.slideshow {
    position: relative;
    margin-bottom: 2rem;

    /* Underkanten, inte kortformen: margin nollställer
       margin-inline som .full-bleed behöver. */
}

.slideshow .slides {
    position: relative;

    /* Bredden uttryckligen, inte underförstådd.
       Med enbart aspect-ratio och max-height räknar webbläsaren baklänges från
       höjden och krymper rutan i sidled — toppbilden blev 1 280 px bred på en
       1 440 px skärm och hamnade snett. */
    width: 100%;

    /* Samma form som filmtoppen, så sidan inte hoppar när första bilden kommer
       och så att bilder i olika format inte ändrar höjden mellan bytena. */
    height: var(--hero-height);
    overflow: hidden;
}

.slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;

    /* Två sekunder är lång nog att läsas som en toning och kort nog att bilden
       står stilla större delen av tiden den visas. */
    transition: opacity 2s ease-in-out;
}

.slideshow .slide.is-active {
    opacity: 1;
}

/* Bara bilden som syns går att klicka på.
   Alla ligger ovanpå varandra, så utan det här fångar den översta länken varje
   klick — och besökaren hamnar på en vara hon inte ser. */
.slideshow a.slide {
    pointer-events: none;
    display: block;
}

.slideshow a.slide.is-active {
    pointer-events: auto;
}

.slideshow a.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow a.slide:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}

.slideshow .hero-caption h1,
.slideshow .hero-caption p {
    color: inherit;
    margin: 0 0 0.5rem;
}

/* Den som bett sitt system om mindre rörelse får första bilden och inget byte.
   Skriptet slutar byta bild; det här ser till att inget tonar även om en bild
   skulle hinna få klassen först. */
@media (prefers-reduced-motion: reduce) {
    .slideshow .slide {
        transition: none;
    }
}

/* Dörren till en butik som inte öppnat än
   ----------------------------------------------------------------------------
   Avsiktligt anspråkslös. Det här är inte butiken; det är beskedet att butiken
   inte är öppen ännu, och det ska inte se ut som en trasig sida. */

body.door {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
}

body.door main {
    width: 100%;
    max-width: 24rem;
    text-align: center;
}

body.door .actions {
    justify-content: center;
}



/* Telefon
   ----------------------------------------------------------------------------
   Nästan alla kunder är här. Det som står nedan är mätt på 375 pixlar, alltså
   den vanligaste telefonbredden, och rättar tre saker som var mätbart fel:
   sidhuvudet tog en fjärdedel av skärmen, flera länkar var under den storlek
   ett finger träffar, och huvudknappen var smalare än den behövde vara. */

/* Minsta yta ett finger träffar med säkerhet är ungefär 44 pixlar. Länkarna i
   sidhuvudet mätte 26. */
.site-nav a,
.header-actions a,
.brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Kryssrutan i produktfiltret var 13 pixlar. Den går inte att träffa. */
input[type="checkbox"],
input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--accent);
}

/* Knappen som öppnar menyn finns bara när skriptet har gömt menyn, och bara på
   smala skärmar. Utan JavaScript står menyn kvar synlig och sidan fungerar. */
.menu-toggle {
    display: none;
}

@media (min-width: 48rem) {
    .site-header.is-collapsible .menu-toggle {
        display: none;
    }

    /* Menyn centrerad under namnet, sökrutan under den. */
    .site-nav {
        justify-content: center;
    }

    .search {
        justify-self: center;
        max-width: 22rem;
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 47.999rem) {
    /* Toppbilden kant till kant, ungefär lika hög som bred: 391 px på en
       375 px bred telefon på deras sida. */
    :root {
        --hero-height: clamp(22rem, 104vw, 30rem);
    }

    .hero-caption {
        padding-bottom: 2rem;
    }

    .hero-caption h1 {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    /* Sökrutan i sidhuvudet tar en hel rad på en telefon. Ikonen leder till
       söksidan i stället, vars eget fält (.search-page) ska synas: en regel på
       bara .search gömde det också, så söksidan saknade ruta på telefonen. */
    .site-header .search {
        display: none;
    }

    .site-header.is-collapsible .menu-toggle {
        display: inline-flex;
    }


    /* Huvudhandlingen ska vara lätt att träffa och lätt att hitta. */
    .product-detail form > button[type="submit"],
    .cart-summary .button,
    .checkout-actions button[type="submit"] {
        width: 100%;
        text-align: center;
    }

    /* Det överstrukna jämförpriset på egen rad, annars delas beloppet under det
       mitt itu: "890,00" på en rad och "SEK" på nästa. */
    .product-card .price del {
        display: block;
        margin-right: 0;
    }

    /* Rullgardiner och kryssrutor är också saker ett finger ska träffa. */
    select,
    .choice {
        min-height: 2.75rem;
    }

    .choice {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Varukorgen som lista i stället för tabell.
       Tre kolumner på 375 pixlar gav en produkttitel bruten över tre rader och
       ett belopp delat mitt itu. Varje vara blir i stället ett eget stycke, med
       kolumnrubriken som liten text före värdet. Detta är sista steget före
       kassan; det är inte stället att spara utrymme på. */
    .line-items,
    .line-items tbody,
    .line-items tr,
    .line-items td {
        display: block;
        width: 100%;
    }

    .line-items thead {
        display: none;
    }

    .line-items tr {
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
    }

    .line-items td {
        padding: 0.25rem 0;
        border: 0;
    }

    .line-items td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8125rem;
        color: var(--ink-muted);
    }

    .line-items td.price {
        text-align: left;
        font-weight: 600;
    }

    /* Antal och knapparna på en rad, i stället för staplade i en smal cell. */
    .line-items td form {
        display: inline-flex;
        gap: 0.5rem;
        align-items: center;
    }

    .line-items td input[type="number"] {
        width: 5rem;
    }

    /* Tabellen behöver ingen egen sidledsrullning när den inte är en tabell. */
    .table-scroll {
        overflow: visible;
    }
}

/* Länkarna lagen kräver: villkor, ångerfunktionen, integritet. En egen rad
   ovanför de juridiska uppgifterna, på varje sida. */
.footer-required {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

.footer-legal a {
    color: inherit;
}

/* Rea- och jämförprisrader under priset. */
.price-note {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
}

/* Villkorsraden ovanför knappen i kassan. */
/* Kassan i steg (Checkout/Index.cshtml): en rad överst som visar var hon är,
   ett kort per steg. Det öppna steget har en tydlig kant; klara steg är en rad
   med "Ändra"; kommande steg är bara sin rubrik, lite bleka. */
.checkout-progress {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.checkout-progress li {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 3px solid var(--line);
}

.checkout-progress li.is-done,
.checkout-progress li.is-current {
    border-top-color: var(--accent);
    color: var(--ink);
}

.checkout-progress li.is-current {
    font-weight: 600;
}

.checkout-progress-number {
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--line);
    font-size: 0.75rem;
}

.is-done > .checkout-progress-number,
.is-current > .checkout-progress-number {
    background: var(--accent);
    color: var(--accent-contrast, #fff);
}

@media (max-width: 30rem) {
    .checkout-progress li {
        font-size: 0;
    }

    .checkout-progress li.is-current {
        font-size: 0.85rem;
    }

    .checkout-progress-number {
        font-size: 0.75rem;
    }
}

.checkout-steps {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.checkout-step {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    background: var(--paper);
}

.checkout-step.is-current {
    border-color: var(--ink);
    padding-bottom: 1.25rem;
}

.checkout-step.is-locked {
    opacity: 0.55;
}

.checkout-step-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

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

.checkout-step.is-current .checkout-step-head {
    margin-bottom: 1rem;
}

.checkout-step-number {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.8rem;
}

.checkout-step.is-done .checkout-step-number {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast, #fff);
}

.checkout-step-summary {
    margin: 0.5rem 0 0 2rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.checkout-step button[type="submit"]:not(.link-button) {
    width: 100%;
    margin-top: 0.5rem;
}

button.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

button.link-button:hover {
    background: none;
    color: var(--accent-deep, var(--accent));
}

/* Leverera eller hämta: två stora knappar sida vid sida. */
.mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.mode-choice {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.mode-choice:has(input:checked),
.delivery-option:has(input:checked) {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}

/* Leveranssätten: namn och tid till vänster, priset till höger. */
.delivery-options {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.delivery-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.delivery-option-text {
    display: grid;
    gap: 0.15rem;
}

.delivery-option-price {
    font-weight: 600;
    white-space: nowrap;
}

.checkout-access {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.checkout-access h3 {
    margin: 0;
    font-size: 1rem;
}

.checkout-more {
    margin: 0.5rem 0 1rem;
}

.checkout-more summary {
    cursor: pointer;
    color: var(--ink-muted);
}

.checkout-pay {
    font-size: 1.05rem;
    padding-block: 0.9rem;
}

.checkout-secure {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

@media (min-width: 52rem) {
    .checkout-summary {
        position: sticky;
        top: 1rem;
    }
}

.terms-note {
    font-size: 0.85rem;
}

.pre-line {
    white-space: pre-line;
}

/* Köpvillkoren och innehållssidor: läsbar radlängd. */
.terms,
.page-body {
    max-width: var(--measure);
}

.terms section {
    margin-top: 2rem;
}

.terms h3 {
    margin: 1.25rem 0 0.35rem;
    font-size: 1rem;
}

.terms address {
    font-style: normal;
}

.terms-toc ol {
    padding-left: 1.25rem;
    columns: 2 12rem;
}

.terms-form {
    padding: 1rem 1.25rem;
    border: 1px dashed var(--line, #ccc);
}

.terms-form p {
    margin: 0 0 0.6rem;
}

/* Omdömen */
.reviews {
    margin-top: 3rem;
    max-width: var(--measure);
}

.review-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.stars {
    color: var(--c-stars, var(--accent));
    letter-spacing: 0.1em;
    margin: 0;
}

.review-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.review {
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
}

.review h3 {
    margin: 0.35rem 0 0.25rem;
    font-size: 1.05rem;
}

.review-body {
    white-space: pre-line;
    margin: 0.35rem 0;
}

.review-meta {
    font-size: 0.85rem;
}

.review-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.75rem;
}

.review-reply {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--paper-sunken);
}

.review-reply p {
    margin: 0.2rem 0;
}

.review-policy {
    font-size: 0.8rem;
}

.card-rating {
    display: block;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* Skriv ett omdöme */
.review-write {
    max-width: 40rem;
}

.review-product {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
}

.review-product > legend {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.review-product > legend img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
}

/* Stjärnor som radioknappar. Knapparna står i ordning 5→1 och visas omvänt,
   så att ~ kan färga alla stjärnor till vänster om den valda. */
.star-input {
    border: 0;
    padding: 0;
    margin: 0.5rem 0 1rem;
    min-width: 0;
}

.star-input legend {
    padding: 0;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.star-row {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15rem;
}

.star-input input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.star-input label {
    font-size: 2rem;
    line-height: 1;
    color: var(--line);
    cursor: pointer;
    padding: 0.1rem;
}

.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
    color: var(--accent);
}

.star-input input:focus-visible + label {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.review-reward {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--paper-sunken);
    text-align: center;
}

.review-code {
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    margin: 0.5rem 0;
}

/* Omdömen om butiken, längst ned på startsidan. */
.store-reviews {
    margin: 3rem auto 1rem;
    max-width: 60rem;
    text-align: center;
}

.store-reviews h2 {
    margin-bottom: 0.25rem;
}

/* Stycken har en maxbredd i butiken; här ska de ligga mitt i blocket. */
.store-reviews p {
    margin-inline: auto;
}

.store-reviews-summary {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

.store-review-card {
    background: var(--c-review-background, var(--paper-sunken));
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
}

.store-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

/* Alla omdömen i samma ruta, ovanpå varandra: kortet får det längstas höjd
   och hoppar inte när nästa visas. */
.store-review {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.store-review.is-current {
    visibility: visible;
    opacity: 1;
}

.store-review-mark {
    display: block;
    font-size: 3.5rem;
    line-height: 0.6;
    color: var(--accent);
}

.store-review blockquote {
    margin: 1rem auto;
    max-width: 44rem;
    font-size: 1.15rem;
}

.store-review-name {
    margin: 0.5rem 0 0;
    font-weight: 600;
}

.store-review-name .verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.25rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.7rem;
    vertical-align: middle;
}

.store-review-note {
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

.store-review-controls {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.store-review-controls .icon-button {
    font-size: 2rem;
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .store-review {
        transition: none;
    }
}

/* ---- Karuseller på startsidan: Våra kollektioner, Nyheter, Våra favoriter ----
   Webbläsarens egen rullning med snäpp, så svepet är telefonens eget och
   fungerar utan skript. På telefon anas nästa kort i kanten; på större
   skärmar syns flera, och pilarna (carousel.js) tar ett helt fönster i taget. */
.home-carousel {
    margin-block: 2.5rem;
}

.carousel-viewport {
    position: relative;
}

.carousel-track,
.collection-row.carousel-track,
.product-grid.carousel-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
    margin: 0 -1rem;
    padding: 0 1rem 0.5rem;
    scroll-padding-inline: 1rem;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track > li {
    scroll-snap-align: start;
    min-width: 0;
}

/* Produktkort: drygt två på telefon, så nästa syns i kanten. */
.product-carousel .carousel-track > .product-card {
    flex: 0 0 calc((100% - 1.5rem) / 2.25);
}

/* Kollektionsblockets luft ovanför, under och under rubriken, från adminen
   (--block-space, 0–2 gånger det vanliga). */
/* Rubriken står mitt emellan bandets överkant och bilderna: samma luft ovanför
   som under, och radhöjdens luft runt bokstäverna räknas bort med text-box, så
   att det är själva versalerna som hamnar i mitten. */
.band.collection-carousel {
    padding-block: max(0.35rem, calc(1.25rem * var(--block-space, 1.5)));
}

/* Det vita mellanrummet mot blocket ovanför, var för sig på telefon och dator
   (--gap-above-*, 0–1 gånger det vanliga). Blocket ovanför släpper sin egen
   marginal nedåt, så att "inget" blir inget. */
.home-carousel.collection-carousel {
    margin-top: calc(2.5rem * var(--gap-above-mobile, 1));
}

.site-main > :has(+ .collection-carousel) {
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .home-carousel.collection-carousel {
        margin-top: calc(2.5rem * var(--gap-above-desktop, 1));
    }
}

.collection-carousel .carousel-head .section-heading {
    margin-bottom: max(0.35rem, calc(1.25rem * var(--block-space, 1.5)));
    text-box: trim-both cap alphabetic;
}

/* Kollektioner: ett stort kort och en bit av nästa. Bildstorleken från
   adminen (--card-scale, 0,5–1) gör korten smalare, och därmed lägre. */
.collection-carousel .carousel-track {
    gap: var(--card-gap, 0.75rem);
}

.collection-carousel .carousel-track > .collection-card {
    flex: 0 0 calc(72% * var(--card-scale, 1));
}

.collection-card-empty {
    display: block;
    aspect-ratio: var(--card-ratio, 4 / 5);
    background: var(--paper-sunken);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

@media (min-width: 48rem) {
    .carousel-track,
    .collection-row.carousel-track,
    .product-grid.carousel-track {
        gap: 1.25rem;
        margin: 0;
        padding: 0 0 0.5rem;
        scroll-padding-inline: 0;
    }

    .product-carousel .carousel-track > .product-card {
        flex-basis: calc((100% - 2.5rem) / 3.2);
    }

    .collection-carousel .carousel-track > .collection-card {
        flex: 0 0 calc((100% - 2.5rem) / 3.2 * var(--card-scale, 1));
    }
}

@media (min-width: 64rem) {
    .product-carousel .carousel-track > .product-card {
        flex-basis: calc((100% - 3.75rem) / 4);
    }

    .collection-carousel .carousel-track > .collection-card {
        flex-basis: calc((100% - 3 * var(--card-gap, 0.75rem)) / 4 * var(--card-scale, 1));
    }
}

@media (min-width: 110rem) {
    .product-carousel .carousel-track > .product-card {
        flex-basis: calc((100% - 5rem) / 5);
    }
}

/* Pilarna: bara där man inte sveper med fingret. */
.carousel-arrow {
    display: none;
}

@media (min-width: 48rem) {
    .carousel-arrow:not([hidden]) {
        position: absolute;
        top: 38%;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--paper);
        color: var(--ink);
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
    }

    .carousel-arrow:not([hidden]):hover {
        background: var(--paper);
        color: var(--accent);
        border-color: var(--accent);
    }

    .carousel-arrow:disabled {
        opacity: 0;
        pointer-events: none;
    }

    .carousel-prev {
        left: -0.75rem;
    }

    .carousel-next {
        right: -0.75rem;
    }
}

/* Olivkvisten kring rubriken: luftigt, en på var sida, aldrig i vägen. */
.carousel-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.carousel-head .section-heading {
    margin-block: 0 1.25rem;
}

.olive-branch {
    display: block;
    flex: 0 1 8rem;
    width: 8rem;
    min-width: 3rem;
    height: auto;
    color: var(--c-ornament, var(--accent));
    pointer-events: none;
    margin-bottom: 1.25rem;
}

.olive-branch--flip {
    transform: scaleX(-1);
}

@media (max-width: 29.999rem) {
    .carousel-head .olive-branch {
        flex-basis: 3.5rem;
        width: 3.5rem;
    }
}

/* Banner och sidhuvud
   ----------------------------------------------------------------------------
   En enhet som följer med när man rullar. Bakgrunden behövs för att sidan inte
   ska synas igenom. Samma vita sidhuvud på varje sida, startsidan inräknad. */
.site-top {
    position: sticky;
    top: 0;
    z-index: 30;
}

.site-header {
    position: relative;
    background: var(--c-header-background, var(--paper));
    color: var(--c-header-text, inherit);
}

/* Huvudmenyn
   ----------------------------------------------------------------------------
   Listan med poster; underposter i en egen lista under sin förälder. */
.site-nav {
    display: block;
}

.nav-list,
.nav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--gap);
}

/* Det som bara hör till telefonpanelen. */
.nav-drawer-head,
.site-nav .nav-account,
.site-nav .nav-lang,
.nav-back,
.nav-sub-all,
.nav-expand,
.olive-branch--nav {
    display: none;
}

@media (min-width: 48rem) {
    .nav-list {
        justify-content: center;
    }

    .nav-list > li {
        position: relative;
    }

    /* Undermenyn som rullgardin, öppen när musen eller tangentbordet är där. */
    .nav-sub {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        min-width: 13rem;
        padding: 0.5rem 1rem;
        background: var(--paper);
        border: 1px solid var(--line);
        box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
        text-align: left;
    }

    .has-sub:hover > .nav-sub,
    .has-sub:focus-within > .nav-sub {
        display: block;
    }

    .nav-sub a {
        display: flex;
        white-space: nowrap;
    }
}

@media (max-width: 47.999rem) {
    /* Utan skript: allt i en lista, underposterna indragna. */
    .nav-list {
        flex-direction: column;
    }

    .nav-sub {
        padding-left: 1rem;
    }

    /* Panelen. Glider in från vänster, rullar själv om den är lång, och låter
       sidan bakom ligga still. */
    .site-header.is-collapsible .site-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 41;
        width: min(86vw, 22rem);
        padding: 0 1.5rem 2.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--c-header-background, var(--paper));
        color: var(--c-header-text, var(--ink));
        box-shadow: 4px 0 24px rgb(0 0 0 / 12%);
        text-align: left;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    /* Första bilden efter att skriptet gömt menyn: ingen glidning. Annars syns
       menyn åka ut över sidan varje gång en sida laddas. */
    .site-header.is-collapsible:not(.is-ready) .site-nav {
        transition: none;
    }

    .site-header.is-collapsible.is-open .site-nav {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgb(0 0 0 / 35%);
    }

    html.nav-open {
        overflow: hidden;
    }

    .is-collapsible .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: 0.75rem 1rem;
    }

    .nav-drawer-title {
        font-family: var(--font-accent, inherit);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.8rem;
        color: var(--ink-muted);
    }

    .nav-close {
        font-size: 1.75rem;
        margin-right: -0.75rem;
    }

    .is-collapsible .nav-list > li {
        display: flex;
        align-items: center;
    }

    .is-collapsible .site-nav a {
        color: var(--c-header-text, var(--ink));
    }

    .is-collapsible .nav-list > li > a,
    .is-collapsible .nav-sub a,
    .is-collapsible .nav-account {
        flex: 1;
        min-height: 3.25rem;
        font-size: 1.1rem;
        letter-spacing: 0.02em;
    }

    .is-collapsible .nav-expand,
    .is-collapsible .nav-back button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3rem;
        min-height: 3.25rem;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--ink);
        font-size: 1.5rem;
        cursor: pointer;
    }

    .is-collapsible .nav-expand {
        margin-right: -0.75rem;
    }

    /* Undermenyn tar panelens plats, med Tillbaka överst. */
    .is-collapsible .nav-sub {
        display: none;
    }

    .is-collapsible .nav-sub.is-open {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 42;
        width: min(86vw, 22rem);
        padding: 0.75rem 1.5rem 2.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--paper);
    }

    .is-collapsible .nav-sub .nav-back {
        display: block;
        margin-bottom: 0.5rem;
    }

    .is-collapsible .nav-back button {
        gap: 0.5rem;
        font-size: 1rem;
        margin-left: -0.5rem;
        padding-right: 0.5rem;
    }

    .is-collapsible .nav-sub-all {
        display: block;
    }

    .is-collapsible .nav-sub-all a {
        font-style: italic;
    }

    .is-collapsible .nav-account {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        text-decoration: none;
    }

    /* Språket ligger i menyn på telefon, så sidhuvudet har lika breda sidor
       och logotypen hamnar mitt på skärmen med plats att synas. */
    .is-collapsible .nav-lang {
        display: flex;
        align-items: center;
        min-height: 3.25rem;
        font-size: 1rem;
        text-decoration: none;
    }

    .site-header.is-collapsible .header-actions .lang-switch {
        display: none;
    }

    .site-header.is-collapsible {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    /* Loggan får så mycket av bredden som går: sidhuvudets kanter så smala
       som ikonerna tål, som på deras tidigare sida. */
    .site-header.is-collapsible {
        padding-inline: 0.25rem;
        column-gap: 0;
    }

    .is-collapsible .olive-branch--nav {
        display: block;
        width: 70%;
        max-width: 14rem;
        margin: 2.5rem auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header.is-collapsible .site-nav,
    .site-header.is-collapsible.is-open .site-nav {
        transition: none;
    }
}

/* Notisen
   ----------------------------------------------------------------------------
   Fast nere på skärmen, så den aldrig lägger sig över sidhuvudet eller trycker
   ned sidan. Försvinner efter fyra sekunder — pausat medan man håller musen
   över eller har fokus i den — utan att behöva skript. */
.toast {
    position: fixed;
    inset-inline: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 30rem;
    margin-inline: auto;
    padding: 0.75rem 0.5rem 0.75rem 1rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--success);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
    animation: toast-in 0.25s ease-out, toast-out 0.3s ease-in 4s forwards;
}

.toast p {
    flex: 1;
    margin: 0;
}

.toast:hover,
.toast:focus-within {
    animation-play-state: paused;
}

/* Ett fel står kvar tills man stänger det. */
.toast-error {
    border-left-color: var(--danger);
    animation: toast-in 0.25s ease-out;
}

.toast-close {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.toast-close:hover {
    background: transparent;
    color: var(--accent);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(0.75rem); }
}

@keyframes toast-out {
    to { opacity: 0; visibility: hidden; transform: translateY(0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
    @keyframes toast-in {
        from { opacity: 0; }
    }

    @keyframes toast-out {
        to { opacity: 0; visibility: hidden; }
    }
}

/* En sida med bild (Om Aveline)
   ----------------------------------------------------------------------------
   Telefon: rubrik, bilden över hela bredden, sedan texten. Dator: texten till
   vänster och bilden till höger. Bilden behåller sin form — höjden följer
   bredden — så inget beskärs. */
.page-editorial-image {
    margin: 0 0 1.5rem;
}

.page-editorial-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

@media (min-width: 48rem) {
    .page-editorial {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: clamp(2rem, 5vw, 4rem);
        align-items: start;
    }

    .page-editorial > h1 {
        grid-column: 1 / -1;
    }

    .page-editorial .page-body {
        grid-column: 1;
        grid-row: 2;
    }

    .page-editorial-image {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }
}

/* Shoppa stilen
   ----------------------------------------------------------------------------
   Stora inspirationsbilder, inte ännu ett produktrutnät: en bild nästan hela
   bredden på telefon, två och sedan tre bredvid varandra på större skärmar.
   Varorna öppnas ovanpå sidan — ett blad nerifrån på telefonen, en ruta i
   mitten på datorn — så att bilden finns kvar bakom. */
.looks .look-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.looks-inline .look-list {
    display: grid;
    gap: 2.5rem;
}

.home-carousel.looks .carousel-track > .look-card {
    flex: 0 0 calc(88% * min(var(--look-scale, 1), 1));
}

@media (min-width: 48rem) {
    .home-carousel.looks .carousel-track > .look-card {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

@media (min-width: 64rem) {
    .home-carousel.looks .carousel-track > .look-card {
        flex-basis: calc((100% - 2.5rem) / 3);
    }
}

.look-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.look-figure {
    position: relative;
    margin: 0;
}

.look-figure img,
.look-figure-empty {
    display: block;
    width: 100%;
    aspect-ratio: var(--look-aspect, 4 / 5);
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--paper-sunken);
}

.looks-inline .look-figure img {
    aspect-ratio: auto;
    max-height: 80vh;
    object-fit: contain;
}

.look-title {
    margin: 0;
    font-family: var(--font-heading, inherit);
    font-size: 1.35rem;
    font-weight: 400;
}

.look-description {
    margin: 0.25rem 0 0;
    color: var(--ink-muted);
}

.look-text .look-open {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    margin-top: 0.75rem;
}

.look-text .look-open .muted {
    color: inherit;
    opacity: 0.75;
}

/* Rutan med varorna. */
.look-dialog {
    width: min(42rem, calc(100% - 2rem));
    max-height: min(85vh, 52rem);
    padding: 0 1.25rem 1.25rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.look-dialog::backdrop {
    background: rgb(0 0 0 / 45%);
}

html.look-dialog-open {
    overflow: hidden;
}

.look-dialog-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
    background: var(--paper);
}

.look-dialog-head h3 {
    margin: 0;
    font-family: var(--font-heading, inherit);
    font-weight: 400;
}

.look-close {
    flex: none;
    font-size: 1.75rem;
    margin-right: -0.5rem;
}

.look-dialog-hint {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

/* Telefon: ett blad som glider upp nerifrån och går att rulla. */
@media (max-width: 47.999rem) {
    .look-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        margin: auto 0 0;
        border-radius: 1rem 1rem 0 0;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .look-dialog[open] {
        animation: look-sheet 0.25s ease-out;
    }
}

@keyframes look-sheet {
    from { transform: translateY(2rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .look-dialog[open] {
        animation: none;
    }
}

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

.look-product {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.9rem 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 4.5rem;
    transition: background 0.3s ease;
}

.look-product.is-highlighted {
    background: color-mix(in srgb, var(--paper-sunken) 60%, transparent);
}

.look-product-image img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--paper-sunken);
}

.look-product-text {
    display: grid;
    gap: 0.2rem;
}

.look-product-title {
    text-decoration: none;
    color: var(--ink);
}

.look-product-title:hover {
    text-decoration: underline;
}

.look-product-text .badge-soldout {
    justify-self: start;
    position: static;
}

.look-product-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.look-product-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.look-add {
    min-height: 2.75rem;
    padding-inline: 1.1rem;
}

.look-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.look-product-actions .look-variant {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 15rem;
}

.look-variant select {
    min-height: 2.75rem;
    width: 100%;
}

.look-view {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ink);
}

@media (min-width: 36rem) {
    .look-product {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
    }

    .look-product-actions {
        grid-column: auto;
        justify-content: flex-end;
        max-width: 16rem;
    }
}

/* Shoppa efter bilden, del två: inga siffror eller prickar i butiken, bara
   bilden. Telefon och surfplatta: en karusell där nästa bild syns i kanten.
   Dator: ett kollage, en stor bild och de andra runt den, med rubrik och knapp
   ovanpå bilden. Samma data i båda. */
.look-figure-link {
    display: block;
}

.look-product-image {
    position: relative;
    display: block;
}

@media (min-width: 48rem) {
    .home-carousel.looks .carousel-track > .look-card {
        flex-basis: calc(44% * var(--look-scale, 1));
    }
}

@media (min-width: 64rem) {
    .looks-collage .carousel-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: calc(clamp(13rem, 19vw, 20rem) * var(--look-scale, 1));
        gap: 1rem;
        overflow: visible;
    }

    .looks-collage .carousel-track > .look-card {
        position: relative;
        display: block;
        min-width: 0;
        overflow: hidden;
        border-radius: var(--radius);
    }

    /* Den första är stor: två kolumner och två rader. */
    .looks-collage .carousel-track > .look-card:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Fyra bilder: den sista fyller raden under de två små. Tre: de två små
       delar på höger sida. Två: sida vid sida. En: hela bredden. */
    .looks-count-4 .carousel-track > .look-card:last-child,
    .looks-count-3 .carousel-track > .look-card:not(:first-child) {
        grid-column: span 2;
    }

    .looks-count-2 .carousel-track > .look-card {
        grid-column: span 2;
        grid-row: span 2;
    }

    .looks-count-1 .carousel-track > .look-card {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .looks-collage .look-card .look-figure,
    .looks-collage .look-card .look-figure-link {
        height: 100%;
    }

    .looks-collage .look-card .look-figure img,
    .looks-collage .look-card .look-figure-empty {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        border-radius: 0;
        transition: transform 0.4s ease;
    }

    .looks-collage .look-card:hover .look-figure img {
        transform: scale(1.03);
    }

    /* Rubrik och knapp ovanpå bilden, mot en mörk toning så texten går att läsa. */
    .looks-collage .look-card .look-text {
        position: absolute;
        inset: auto 0 0;
        padding: 3rem 1.25rem 1.25rem;
        background: linear-gradient(transparent, rgb(0 0 0 / 55%));
        color: #fff;
        pointer-events: none;
    }

    .looks-collage .look-card .look-text a {
        pointer-events: auto;
    }

    .looks-collage .look-card .look-title {
        color: #fff;
    }

    .looks-collage .look-card .look-description {
        display: none;
    }

    .looks-collage .look-card:first-child .look-description {
        display: block;
        color: rgb(255 255 255 / 85%);
    }

    .looks-collage .look-text .look-open {
        background: #fff;
        border-color: #fff;
        color: var(--ink);
    }

    .looks-collage .look-text .look-open:hover,
    .looks-collage .look-text .look-open:focus-visible {
        background: var(--color-accent-light);
        border-color: var(--color-accent-light);
        color: var(--ink);
    }

    .looks-collage .carousel-arrow {
        display: none;
    }
}

/* Karusellen: varje kort lika brett som dess egen bild är i sitt format
   (--look-ratio = bredd/höjd, från adminen), så att bilden visas hel. Alla lika
   höga, utom en bred bild som inte ryms på skärmen: den blir lägre i stället
   för att beskäras. */
/* Bildstorleken från adminen (--look-scale, 0,5–1,2) gör alla bilder lägre eller högre. */
.looks-carousel {
    --look-height: calc(clamp(18rem, 70vw, 26rem) * var(--look-scale, 1));
    --look-max-width: 88vw;
}

.looks-carousel .carousel-track {
    align-items: flex-start;
}

.home-carousel.looks-carousel .carousel-track > .look-card {
    --card-height: min(var(--look-height), calc(var(--look-max-width) / var(--look-ratio, 0.8)));
    flex: 0 0 auto;
    width: calc(var(--card-height) * var(--look-ratio, 0.8));
}

.looks-carousel .look-card > .look-figure img,
.looks-carousel .look-card > .look-figure .look-figure-empty {
    height: var(--card-height);
    aspect-ratio: auto;
}

@media (min-width: 48rem) {
    .looks-carousel {
        --look-height: calc(clamp(22rem, 34vw, 30rem) * var(--look-scale, 1));
        --look-max-width: 80vw;
    }

    .home-carousel.looks-carousel .carousel-track > .look-card {
        flex-basis: auto;
    }
}

/* Rutan: bilden till vänster och varorna till höger på datorn, bilden överst
   på telefonen. */
.look-dialog {
    width: min(64rem, calc(100% - 2rem));
}

.look-dialog-body {
    display: grid;
    gap: 1rem;
}

.look-dialog-figure {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.look-dialog-figure img {
    width: auto;
    max-width: 100%;
    max-height: 38vh;
}

@media (min-width: 48rem) {
    .look-dialog-body {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
        gap: 1.5rem;
    }

    .look-dialog-figure {
        position: sticky;
        top: 4.5rem;
    }

    .look-dialog-figure img {
        max-height: calc(85vh - 8rem);
    }

    /* Two columns share the width now: the buttons go under the text. */
    .look-dialog .look-product {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .look-dialog .look-product-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        max-width: none;
    }
}

/* Kvittensen vid knappen, i stället för en ny sida. */
.look-added {
    font-size: 0.85rem;
    color: var(--success, var(--ink-muted));
}

.look-added:empty {
    display: none;
}

.look-added.is-error {
    color: var(--danger, #a33);
}

.look-add.is-added {
    background: var(--accent);
    border-color: var(--accent);
}

/* Varukorgen
   ----------------------------------------------------------------------------
   Telefon: allt i en spalt, i den ordning hon går igenom det — varorna,
   rabattkod, leveransinstruktioner, fri frakt, summa, Fortsätt handla och Gå
   till kassan. Dator: varorna till vänster och resten i en spalt bredvid. */
.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cart-head h1 {
    margin: 0;
}

.cart-close {
    font-size: 1.75rem;
    line-height: 1;
    text-decoration: none;
}

.cart-layout {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (min-width: 56rem) {
    .cart-layout {
        grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
        gap: 2.5rem;
        align-items: start;
    }
}

.cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.cart-line {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

/* Varans bild: kvadratisk ruta, bilden fyller den utan att dras ut. */
.cart-line-image {
    grid-row: span 2;
    display: block;
}

.cart-line-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--paper-sunken);
}

.cart-line-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.cart-line-title {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cart-line-title:hover {
    text-decoration: underline;
}

.cart-line-variant {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.cart-line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.cart-line-actions form {
    margin: 0;
}

/* − antal + */
.quantity-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.quantity-stepper .stepper-button {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-size: 1.1rem;
}

.quantity-stepper .stepper-button:hover,
.quantity-stepper .stepper-button:focus-visible {
    background: var(--color-accent-light);
    border-color: transparent;
    color: var(--ink);
}

.stepper-value {
    min-width: 2rem;
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
}

.cart-remove {
    min-height: 2.75rem;
    min-width: 2.75rem;
    display: inline-grid;
    place-items: center;
    padding: 0 0.25rem;
    background: transparent;
    border: 0;
    color: var(--ink-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cart-remove:hover,
.cart-remove:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--ink);
}

.cart-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-box {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.cart-box summary {
    cursor: pointer;
    min-height: 1.75rem;
}

.cart-box form {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cart-box form p {
    margin: 0;
    font-size: 0.875rem;
}

.cart-box textarea {
    width: 100%;
}

.cart-box .button-secondary {
    justify-self: start;
}

.inline-field {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.inline-field input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Fri frakt: texten och en stapel som fylls. */
.free-shipping {
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--c-free-shipping-background, var(--color-accent-light));
    color: var(--c-free-shipping-text, var(--color-accent-light-ink));
}

.free-shipping-text {
    margin: 0 0 0.6rem;
}

.free-shipping-bar {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 70%);
    overflow: hidden;
}

.free-shipping-bar > span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: var(--c-free-shipping-bar, var(--accent));
    transition: width 0.3s ease;
}

.cart-totals {
    max-width: none;
    margin: 0;
}

.cart-totals p {
    margin: 0.5rem 0 0;
}

/* Fortsätt handla och Gå till kassan bredvid varandra, lika stora. */
.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cart-actions > p {
    grid-column: 1 / -1;
}

.cart-actions .button,
.cart-actions button {
    width: 100%;
    min-height: 3rem;
    text-align: center;
}

/* Kassaknappen i butikens bruna, med mörkare brun vid pekning och fokus. */
.cart-actions .cart-checkout {
    background: var(--c-checkout-background, var(--accent));
    border-color: var(--c-checkout-background, var(--accent));
    color: var(--c-checkout-text, var(--accent-contrast));
}

.cart-actions .cart-checkout:hover,
.cart-actions .cart-checkout:focus-visible {
    background: var(--c-checkout-hover-background, var(--accent-deep, var(--accent)));
    border-color: var(--c-checkout-hover-background, var(--accent-deep, var(--accent)));
    color: var(--accent-contrast);
}

.cart-actions .cart-checkout:focus-visible {
    outline: 2px solid var(--accent-deep, var(--accent));
    outline-offset: 3px;
}

.cart-actions button.cart-checkout:disabled,
.cart-actions button.cart-checkout:disabled:hover {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.45;
}

/* Fortsätt handla: brun kant och text, så den fyllda kassaknappen syns först. */
.cart-actions .button-secondary {
    background: transparent;
    border: 1px solid var(--c-button-background, var(--accent));
    color: var(--accent-deep, var(--ink));
}

.cart-actions .button-secondary:hover,
.cart-actions .button-secondary:focus-visible {
    background: var(--c-button-background, var(--accent));
    border-color: var(--c-button-background, var(--accent));
    color: var(--c-button-text, var(--accent-contrast));
}

.free-shipping-from {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.8;
}

.cart-remove .icon {
    display: block;
}

/* Kassan: ett leveranssätt som inte går att välja till adressen döljs.
   .choice är flex, och det tar annars över hidden-attributet. */
.choice[hidden] {
    display: none;
}

/* Bildspelets rubrik, en per bild: alla ligger på samma plats och den som hör
   till bilden som visas tonas fram. Färg, storlek, kontur och bakgrund väljs
   i adminen och kommer som style-attribut. */
.hero-caption .slide-headings {
    display: grid;
    justify-items: center;

    /* Den stora rubrikens 22 tecken är för smalt för en kort, liten rad. */
    max-width: min(90vw, 48rem);
}

.slide-heading {
    grid-area: 1 / 1;
    position: relative;
    isolation: isolate;
    opacity: 0;
    pointer-events: none;
    color: inherit;
    text-decoration: none;
    transition: opacity 2s ease-in-out;
}

.slide-heading.is-active {
    opacity: 1;
    pointer-events: auto;
}

a.slide-heading:hover,
a.slide-heading:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.slide-heading-scrim {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .slide-heading {
        transition: none;
    }
}

/* ── Säsongsdetaljer från temat (Jul) ─────────────────────────────────────
   Adventsljus bredvid loggan, snö längs sidhuvudets kant och en hälsning i
   sidfoten. Slås på per tema i adminen, under Jul på startsidan. */

/* Adventsljusen: fyra gräddvita ljus i en guldstake, till höger om loggan på
   datorn och under den på telefonen, där det inte finns plats bredvid. Loggan
   står kvar i mitten; ljusen ligger utanför dess ruta. */
.brand {
    position: relative;
}

.advent-candles {
    position: absolute;
    left: calc(100% + 0.9rem);
    bottom: 22%;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 4px;
    pointer-events: none;
}

.advent-candles::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(#ecd79b, #a8894a);
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
}

.advent-candle {
    position: relative;
    width: 5px;
    height: 18px;
    border-radius: 1px 1px 0 0;
    background: linear-gradient(90deg, #eadfcb, #fffaf0 45%, #e2d6c2);
    box-shadow: inset 0 -2px 3px rgb(0 0 0 / 8%);
}

/* Veken på ett släckt ljus. */
.advent-candle::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 3px;
    background: #3a2c22;
    transform: translateX(-50%);
}

.advent-flame {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1px);
    width: 6px;
    height: 10px;
    margin-left: -3px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 50% 72%, #fffbe6 0 22%, #ffd772 42%, #f59a2b 72%, rgb(245 154 43 / 0%) 100%);
    box-shadow: 0 0 8px 3px rgb(255 190 90 / 45%);
    transform-origin: 50% 100%;
    animation: advent-flicker 1.9s ease-in-out infinite;
    animation-delay: calc(var(--candle, 1) * -0.47s);
}

.advent-candle.is-lit .advent-flame {
    display: block;
}

@keyframes advent-flicker {
    0%,
    100% {
        transform: scale(1, 1) rotate(-1deg);
        opacity: 1;
    }

    30% {
        transform: scale(0.94, 1.06) rotate(2deg);
        opacity: 0.92;
    }

    60% {
        transform: scale(1.04, 0.95) rotate(-2deg);
        opacity: 1;
    }
}

@media (max-width: 47.999rem) {
    .site-header.has-advent {
        padding-bottom: 1.9rem;
    }

    .advent-candles {
        left: 50%;
        bottom: auto;
        top: calc(100% + 0.35rem);
        transform: translateX(-50%) scale(0.85);
        transform-origin: 50% 0;
    }
}

/* Snö längs sidhuvudets nederkant, som på en takkant: jämn överkant, mjukt
   böljande underkant och en svag skugga. Följer med när sidhuvudet ligger kvar
   överst. */
.site-header.has-snow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    z-index: 2;
    height: 14px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M0 0H120V6Q113 12 104 7Q95 13 84 8Q74 14 62 7Q51 12 40 8Q30 13 19 7Q10 12 0 6Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / 12%));
}

/* Julhälsningen överst i sidfoten, i temats rubrikstil och kursivt, som
   handskrivet på ett kort. */
.footer-greeting {
    max-width: none;
    margin: 0 auto 1.75rem;
    font-family: var(--font-script, var(--font-heading));
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.3;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .advent-flame {
        animation: none;
    }
}

/* ── Julkalendern ──────────────────────────────────────────────────────────
   Sidan runt kalenderns bild; bilden och luckorna står i advent-board.css. */
.advent-calendar-page {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
}

.advent-intro {
    margin: 0 auto 1.25rem;
    color: var(--ink-muted);
}

.advent-test-note {
    display: inline-block;
    margin: 0 auto 1rem;
    padding: 0.3rem 0.8rem;
    border: 1px dashed var(--ink-muted);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* Kaksidan: vad som sparas, i en enkel tabell. */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 2rem;
}

.cookie-table th,
.cookie-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--line, #e5e0da);
}

/* Kakornas namn är långa ord utan mellanslag; på en telefon tryckte de ut
   tabellen 120 px utanför skärmen. De får brytas var som helst. */
.cookie-table code {
    overflow-wrap: anywhere;
}

/* Hoppa till innehållet: syns bara när den får tangentbordsfokus. */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #000;
    border: 2px solid currentColor;
}

.skip-link:focus {
    top: 1rem;
}

/* Galleriets bilder är länkar till den största storleken. */
.gallery-zoom {
    display: block;
    cursor: zoom-in;
}

/* Förslagen under varukorgen: luft ovanför, så att rubriken inte klibbar vid
   knapparna. */
.cart-suggestions {
    margin-top: 3rem;
}

/* Menyn överst i versaler, huvudposter och undermenyer, på dator och i
   telefonpanelen. Kontot och språkvalet är inte menyposter och lämnas. */
.site-nav .nav-list a,
.site-nav .nav-sub a,
.site-nav .nav-back,
.site-nav .nav-sub-all {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* "Kommer snart": en skylt på bilden, i samma hörn som Slutsåld och Rea, i
   butikens mörka ton så att den läses som ett besked och inte som en rea. */
.badge-soon {
    background: var(--ink, #2b2118);
    color: var(--paper, #fff);
    border-color: var(--ink, #2b2118);
}

/* På produktkortets bild: mitt på och större, så att det syns direkt att varan
   är på väg. Slutsåld och Rea stannar i hörnet. */
.product-card-media .badge-soon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Placerad från mitten får den annars bara halva bildens bredd och bryts
       på två rader; nu så bred som texten, men aldrig bredare än bilden. */
    width: max-content;
    max-width: calc(100% - 0.75rem);
    padding: 0.45rem 0.7rem;
    font-size: clamp(0.8rem, 2.2vw, 1.05rem);
    letter-spacing: 0.08em;
    text-align: center;
    white-space: normal;
    pointer-events: none;
}

/* Oändlig scroll: "Visa fler" och vad som visas, under listan. */
.infinite-more {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.infinite-more p {
    margin: 0;
}

/* Gjord på beställning: fälten kunden fyller i ovanför Lägg i varukorgen. */
.personalization {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.personalization legend {
    padding: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.personalization .field {
    margin: 0;
}

.personalization input,
.personalization select {
    width: 100%;
}

.personalization-note {
    margin: 0;
}

/* Det kunden skrev, under varans namn i varukorgen och kassan. */
.cart-line-personal,
.summary-personal {
    display: block;
    font-style: italic;
}