/* The storefront in variation 1 (Claude/design-v1.md). Only the storefront's layout loads this file; the admin keeps its
   own look. Every value that repeats is a token below, so a tweak or a season changes it in one place. No inline styles
   anywhere: the shop's Content-Security-Policy allows only styles from files (style-src 'self'). */

/* Fonts, self-hosted (font-src 'self'), cut to Latin; licences next to them (OFL). */
@font-face {
    font-family: "Marcellus";
    src: url("fonts/marcellus-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("fonts/libre-franklin-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --paper: #F3EDE1;
    --card: #FBF8F1;
    --ink: #1E1B18;
    --soft: #4A443D;
    --brown: #8B5E34;
    --brown-dark: #74492A;
    --dove: #3E5A69;
    --dove-dark: #26343C;
    --light-blue: #DCE4E8;
    --cream: #F6EFE2;
    --alert: #9E2B25;
    --alert-tint: #F6E3DF;
    --in-stock: #2F6B3F;
    --low-stock: #B07A12;
    --accent: var(--brown);          /* buttons; a season overrides it */
    --accent-dark: var(--brown-dark);
    --rule: var(--brown);            /* the dashed rule under page headings; a season overrides it */
    --serif: "Marcellus", Georgia, serif;
    --sans: "Libre Franklin", system-ui, sans-serif;
    --page: 1240px;
    --gutter: 32px;
}

@media (max-width: 48rem) {
    :root {
        --gutter: 16px;
    }
}

/* Base */

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

html {
    background: var(--dove-dark);    /* under a short page: the footer's colour, not paper */
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}

/* A word longer than the screen is wide ("Vaxdukar/Avtorkningsbara dukar" on a phone) breaks, rather than taking the
   page sideways with it. */
h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    overflow-wrap: break-word;
}

a {
    color: var(--ink);
}

a:hover {
    color: var(--dove);
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

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

.wrap {
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* The page's own content sits in the page column; pages with full-width bands (class "bleed") lay out their own. */
main.page {
    display: block;
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 44px var(--gutter) 96px;
}

main.page:has(> .bleed) {
    max-width: none;
    padding: 0;
}

.image-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: #E2DACB;
}

/* Info strip */

.info-strip {
    background: var(--dove);
    color: var(--cream);
    font-size: 12.5px;
    letter-spacing: 0.06em;
}

.info-strip p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 28px;
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 9px var(--gutter);
}

/* Awning: decoration, all CSS. The seasons' garlands hang from the scallops (both start at the left edge, period 88 px). */

.awning {
    height: 50px;
    background: repeating-linear-gradient(90deg, var(--ink) 0 44px, #FFFFFF 44px 88px);
    box-shadow: inset 0 -8px 10px rgba(0, 0, 0, 0.14);
}

.awning-scallops {
    height: 22px;
    background:
        radial-gradient(circle at 22px 0, var(--ink) 21.5px, transparent 22px) 0 0 / 88px 22px repeat-x,
        radial-gradient(circle at 66px 0, #FFFFFF 21.5px, transparent 22px) 0 0 / 88px 22px repeat-x;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.14));
}

/* Header: search, the wordmark in the middle, account and cart. Columns 1 and 3 share a flex basis, or the wordmark
   drifts off the page's centre. */

.site-header {
    border-bottom: 5px solid var(--brown);
}

.site-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 28px var(--gutter) 0;
}

.site-search-column {
    display: flex;
    flex: 1 1 240px;
    min-width: 0;
}

.site-search {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    max-width: 360px;   /* room for the whole placeholder: 300 px cut it at "artikelnumme" (Jimmie, 2026-10-19) */
    margin: 0;
    border-bottom: 1px solid var(--ink);
}

.site-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 16px;   /* under 16px, iPhones zoom in on the field */
    text-overflow: ellipsis;   /* where the header is narrower still, the placeholder ends in "…" rather than mid-word */
    appearance: none;
}

.site-search input::placeholder {
    color: var(--soft);
}

.site-search button {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.site-search button:hover {
    color: var(--dove);
}

.site-wordmark {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-wordmark-name {
    display: block;
    width: auto;
    height: 46px;
}

.site-wordmark-anno {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-wordmark-anno::before, .site-wordmark-anno::after {
    content: "";
    width: 56px;
    border-top: 1px solid var(--ink);
}

.site-wordmark-anno img {
    display: block;
    width: auto;
    height: 15px;
}

.site-tools {
    display: flex;
    flex: 1 1 240px;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.site-tools a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 15px;
    text-decoration: none;
}

/* Menu: her categories, then Villkor and Om oss. Nothing seasonal ever goes here. */

.site-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 40px;
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 18px var(--gutter) 16px;
    list-style: none;
    font-family: var(--serif);
    font-size: 15.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-menu a {
    display: inline-block;
    padding: 8px 0;
    text-decoration: none;
}

.site-menu a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 8px;
}

/* Footer */

.site-footer {
    background: var(--dove-dark);
    color: #E7ECEE;
}

.site-footer a {
    color: #E7ECEE;
    text-decoration: none;
}

.site-footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.site-footer :focus-visible, .heritage :focus-visible, .info-strip :focus-visible {
    outline-color: var(--cream);
}

.site-footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 36px;
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 56px var(--gutter) 32px;
    font-size: 15px;
}

.site-footer-brand {
    flex: 1 1 240px;
}

.site-footer-brand img {
    display: block;
    width: auto;
    height: 30px;
}

.site-footer-brand p {
    max-width: 22em;
    margin: 14px 0 0;
    color: #C9D6DD;
}

/* The store's rating on Google (GoogleRating) under the address, its star gold on the dark footer. */
.site-footer-brand .google-rating {
    margin-top: 12px;
}

.site-footer-shop {
    flex: 0 1 160px;
}

.site-footer-service {
    flex: 0 1 180px;
}

.site-footer-contact {
    flex: 0 1 190px;
}

.site-footer-social {
    flex: 0 1 140px;
}

.site-footer h2 {
    margin: 0 0 12px;
    color: #DCE4E8;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-bottom {
    max-width: calc(var(--page) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter) 32px;
}

.cookie-note {
    max-width: 60em;
    margin: 0 0 18px;
    padding: 16px 20px;
    background: #31434C;
    color: #D3DCE0;
    font-size: 14px;
}

.cookie-note strong {
    color: #FAF7F0;
    font-weight: 600;
}

.site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    margin: 0;
    padding-top: 18px;
    border-top: 1px dashed #5B6E78;
    color: #B7C4CA;
    font-size: 13px;
}

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    background: var(--accent);
    color: var(--cream);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--accent-dark);
    color: var(--cream);
}

.button-secondary {
    min-height: 48px;
    padding: 0 24px;
    border: 1.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
}

.button-secondary:hover {
    border-color: var(--dove);
    background: transparent;
    color: var(--dove);
}

/* Shared parts */

.kicker {
    margin: 0 0 20px;
    color: var(--soft);
    font-size: 12.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.heading-rule {
    width: 120px;
    margin: 24px 0;
    border-top: 2px dashed var(--rule);
}

.lead {
    max-width: 34em;
    margin: 0;
    color: var(--soft);
    font-size: 18px;
}

/* A framed image: ink border, card-coloured padding, a second ink border around the image. */
.frame {
    padding: 8px;
    border: 1px solid var(--ink);
    background: var(--card);
}

.frame > img {
    display: block;
    width: 100%;
    border: 1px solid var(--ink);
}

/* The summary box (Tygguiden's table, later the cart's and checkout's sums): a paper ring and an ink ring outside it. */
.summary-box {
    padding: 26px 24px;
    border: 1px solid var(--ink);
    background: var(--card);
    box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--ink);
}

.band {
    border-block: 1px solid var(--ink);
    background: var(--light-blue);
}

h2.ruled {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 44px;
    font-size: 34px;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

h2.ruled::before, h2.ruled::after {
    content: "";
    flex: 1 1 0;
    border-top: 1px solid var(--ink);
}

/* Label plates, like the label holders on the shop's drawers, with two screw holes. */
.plate {
    position: relative;
    display: block;
    padding: 14px 32px;
    border: 1px solid var(--ink);
    background: var(--card);
    text-align: center;
}

.plate::before, .plate::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border: 1px solid var(--ink);
    border-radius: 50%;
}

.plate::before {
    left: 10px;
}

.plate::after {
    right: 10px;
}

.plate-name {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.plate-line {
    display: block;
    margin-top: 4px;
    color: var(--soft);
    font-size: 14px;
}

/* Spolis and his speech bubble: bottom-aligned, the bubble's tail pointing at him. */
.spolis {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.spolis > img {
    display: block;
    flex: 0 0 auto;
}

.bubble {
    position: relative;
    flex: 0 1 600px;
    min-width: 0;
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 1px solid var(--ink);
    background: var(--card);
    overflow-wrap: break-word; /* a long email address in it */
}

.bubble::before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: -9px;
    width: 16px;
    height: 16px;
    border-bottom: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    background: var(--card);
    transform: rotate(45deg);
}

.bubble-first {
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.3;
}

.bubble-second {
    margin: 6px 0 0;
    color: var(--soft);
    font-size: 15px;
}

.bubble-second a {
    font-weight: 600;
}

/* The big image on a product page opens its zoom (shop.js, PhotoSwipe), on the shop's ink. */
.product-zoom {
    display: block;
    cursor: zoom-in;
}

.pswp {
    --pswp-bg: var(--ink);
}

/* Product cards: four columns, three on tablets, two on phones. */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-card-image {
    display: block;
    padding: 8px;
    border: 1px solid var(--ink);
    background: var(--card);
}

.product-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.product-card-kicker {
    margin: 0;
    color: var(--soft);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.product-card-name {
    margin: 4px 0 0;
    font-size: 21px;
    line-height: 1.25;
    overflow-wrap: break-word;   /* "svart/antikkoppar" in a phone's narrow column */
}

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

.product-card-name a:hover {
    text-decoration: underline;
}

.product-card-line {
    margin: 2px 0 0;
    color: var(--soft);
    font-size: 15px;
}

.product-card-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ink);
}

.product-card-foot p {
    margin: 0;
}

.product-card-facts {
    color: var(--soft);
    font-size: 13.5px;
}

.product-card-price {
    font-family: var(--serif);
    font-size: 21px;
}

.product-card-price span {
    color: var(--soft);
    font-family: var(--sans);
    font-size: 14px;
}

.product-card-out {
    color: var(--soft);
    font-size: 14px;
}

/* Product lists: category, brand and search pages. */

main.page > h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;   /* the links' text level with the slashes, though the links are taller */
    gap: 6px 10px;
    margin: -22px 0 30px;
    color: var(--soft);
    font-size: 13.5px;
}

.breadcrumbs a {
    padding: 3px 0;   /* 27px tall, easier to tap on a phone */
    color: var(--soft);
}

.list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--ink);
}

.list-head-text {
    flex: 1 1 520px;
    min-width: 0;
}

.list-head h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
}

.list-head .heading-rule {
    margin: 22px 0;
}

.list-head-text > .heading-rule:last-child {
    margin-bottom: 0;
}

.category-description {
    max-width: 40em;
    margin: 0;
    color: var(--soft);
    font-size: 17.5px;
}

.category-description p {
    margin: 0 0 0.6em;
}

.category-description p:last-child {
    margin-bottom: 0;
}

.plates {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.plate-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 30px;
    border: 1px solid var(--ink);
    background: var(--card);
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.plate-link::before, .plate-link::after {
    content: "";
    position: absolute;
    top: calc(50% - 3.5px);
    width: 7px;
    height: 7px;
    border: 1px solid var(--ink);
    border-radius: 50%;
}

.plate-link::before {
    left: 10px;
}

.plate-link::after {
    right: 10px;
}

.list-empty {
    color: var(--soft);
}

/* Form fields: the label above, in small capitals. */
.field {
    display: flex;
    flex-direction: column;
}

.field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--soft);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.field input, .field select, .field textarea {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
}

.sort-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0;
}

.sort-form select {
    min-width: 190px;
    height: 46px;
    padding: 0 12px;
}

.sort-form .button {
    min-height: 46px;
    padding: 0 20px;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: 640px;
    margin: 26px 0 0;
}

.search-form .field {
    flex: 1 1 320px;
}

.search-form + .list-head, .search-form + .search-none {
    margin-top: 36px;
}

.search-count {
    margin: 0;
    font-family: var(--serif);
    font-size: 24px;
}

/* Messages and the fabric notice */

.message {
    margin: 16px 0 0;
    padding: 12px 16px;
    color: var(--ink);
}

.message-ok {
    border: 1px solid var(--dove);
    background: var(--light-blue);
}

.message-problem {
    border: 1px solid var(--alert);
    background: var(--card);
}

.fabric-notice {
    margin: 22px 0 0;
    padding: 14px 16px;
    border: 1px dashed var(--ink);
    color: var(--soft);
    font-size: 14px;
}

/* Product page */

.product-page .breadcrumbs {
    margin: 0 auto;
    padding-top: 22px;
}

.product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 56px;
    padding-block: 32px 80px;
}

.product-images {
    flex: 1 1 480px;
    min-width: 0;
}

/* The big image, in its zoom link since #200. */
.product-image > img, .product-zoom > img, .product-image > .image-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--ink);
}

.product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.product-thumbs a {
    display: block;
    padding: 4px;
    border: 1px solid var(--ink);
    background: var(--card);
}

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

.product-thumbs img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.product-info {
    flex: 1 1 420px;
    min-width: 0;
}

.product-kicker {
    margin: 0;
    letter-spacing: 0.18em;
}

.product-info h1 {
    margin: 8px 0 0;
    font-size: 48px;
    line-height: 1.1;
}

.product-variant {
    margin: 6px 0 0;
    color: var(--soft);
    font-size: 19px;
}

.product-brand {
    margin: 6px 0 0;
    color: var(--soft);
    font-size: 15px;
}

.product-price {
    margin: 22px 0 0;
    font-family: var(--serif);
    font-size: 34px;
}

.product-price span {
    color: var(--soft);
    font-family: var(--sans);
    font-size: 16px;
}

.product-text {
    max-width: 34em;
    margin: 18px 0 0;
    color: var(--soft);
    font-size: 16.5px;
}

.product-text + .product-text {
    margin-top: 10px;
}

.product-divider {
    margin: 26px 0;
    border-top: 1px dashed var(--ink);
}

/* The colours as framed squares with their own image; the chosen one has a ring. */
.swatches {
    margin-bottom: 28px;
}

.swatches-label {
    margin: 0 0 12px;
    color: var(--soft);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.swatches-label strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* The colours asked for most, above all of them (ProductPage, ProductVariant.Common), each group named small. */
.swatches-group {
    margin: 0 0 10px;
    color: var(--soft);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.swatches .swatches-common {
    margin-bottom: 16px;
}

/* Five rows of colours and a glimpse of the sixth, the rest a scroll away in their box (Jimmie, 2026-10-21: the 254 of a
   thread, at about 10 kB a picture, which the browser fetches as they come into view); shop.js shows the chosen one in
   it. Padded, as the box would cut off the chosen one's ring. */
.swatches ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-height: calc(5 * 78px + 22px + 12px);
    margin: -6px;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
}

.swatch {
    display: block;
    width: 64px;
    height: 64px;
    padding: 3px;
    border: 1px solid var(--ink);
    background: var(--card);
}

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

.swatch[aria-current="page"] {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.swatch-out img {
    opacity: 0.45;
}

/* A colour without a picture, not in stock, as dim as one with (the review, 2026-10-20: only its hidden words said so). */
.swatch-text.swatch-out {
    opacity: 0.55;
}

.swatch-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 64px;
    height: auto;
    min-height: 44px;
    padding: 6px 14px;
    font-size: 14px;
    text-decoration: none;
}

/* The amount: − and + around the field, the total under it. */
.product-buy {
    margin: 0;
}

.product-buy .field-label {
    margin-bottom: 10px;
}

.stepper-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ink);
    background: var(--card);
}

.stepper button {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 22px;
    cursor: pointer;
}

.stepper button:first-child {
    border-right: 1px solid var(--ink);
}

.stepper button:last-child {
    border-left: 1px solid var(--ink);
}

.stepper button:hover {
    background: var(--paper);
}

.stepper input {
    width: 84px;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 20px;
    text-align: center;
}

.stepper-hint {
    margin: 0;
    color: var(--soft);
    font-size: 15px;
}

.product-guide-link {
    margin: 12px 0 0;
    font-size: 15px;
}

.product-guide-link a {
    font-weight: 600;
    text-underline-offset: 3px;
}

.product-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 16px 0;
    border-block: 1px solid var(--ink);
}

.product-total p {
    margin: 0;
}

.product-total strong {
    font-weight: 600;
}

.product-total-amount {
    font-family: var(--serif);
    font-size: 30px;
}

.product-add {
    width: 100%;
    min-height: 56px;
    margin-top: 22px;
    font-size: 17px;
    letter-spacing: 0.06em;
}

.product-stock {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    font-size: 15px;
}

.stock-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--in-stock);
}

.product-stock[hidden] {
    display: none;
}

/* Little left (ShopSettings.LowStockNotice), or to be ordered in (Backorder): an amber dot, the text as it is. */
.product-low {
    align-items: baseline;
}

.product-low .stock-dot {
    flex: none;
    background: var(--low-stock);
}

.product-nudge {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.product-nudge img {
    display: block;
    flex: 0 0 auto;
}

.product-nudge .bubble {
    flex: 1 1 auto;
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 15px;
}

.product-nudge .bubble::before {
    bottom: 12px;
    left: -7px;
    width: 12px;
    height: 12px;
}

.service-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    color: var(--soft);
    font-size: 15px;
}

.service-lines li {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Om tyget: the facts in two columns on light blue. */
.facts-inner {
    padding-block: 64px 72px;
}

.facts-inner h2 {
    margin: 0 0 24px;
    font-size: 32px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-facts {
    display: flex;
    flex-wrap: wrap;
    column-gap: 56px;
    margin: 0;
}

.fact {
    display: flex;
    flex: 1 1 420px;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--ink);
}

.fact dt {
    flex: 0 0 140px;
    color: var(--soft);
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fact dd {
    margin: 0;
}

.product-more {
    padding-block: 80px;
}

.product-more > h2 {
    margin: 0 0 36px;
    font-size: 36px;
}

/* Cart and checkout */

.button-small {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.button-small:hover {
    border-color: var(--dove);
    color: var(--dove);
}

.button-text {
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--soft);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.button-text:hover {
    color: var(--dove);
}

/* A form's button that looks like the links around it: the payment page's Ändra beställningen, a form as it cancels. */
.button-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.button-link:hover {
    color: var(--dove);
}

.cart-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    margin-top: 30px;
}

.cart-lines {
    flex: 999 1 620px;
    min-width: 0;
}

.cart-topups {
    margin-top: 32px;
    padding: 20px 22px;
    border: 1px dashed var(--brown);
    background: var(--card);
}

.cart-topups h2 {
    margin: 0 0 4px;
    font-size: 26px;
}

.cart-topups > p {
    margin: 0 0 16px;
    color: var(--soft);
}

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

/* One row per item, its columns lined up from row to row: picture, name, price, button. */
.topup {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 64px auto;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px dashed var(--ink);
}

.topup-thumb {
    display: block;
}

.topup-thumb img, .topup-thumb .image-placeholder {
    display: block;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ink);
    object-fit: cover;
}

.topup-name {
    color: var(--ink);
}

.topup-price {
    color: var(--soft);
    text-align: right;
    white-space: nowrap;
}

.topup form {
    margin: 0;
}

.topup-add {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.topup-add:hover {
    background: var(--ink);
    color: var(--cream);
}

/* On a phone the price goes under the name, and the button keeps its place on the right. */
@media (max-width: 600px) {
    .topup {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
    }

    .topup-thumb {
        grid-row: 1 / span 2;
    }

    .topup-price {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        font-size: 14px;
    }

    .topup form {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

.cart {
    width: 100%;
    border-collapse: collapse;
}

.cart th {
    padding: 0 12px 12px;
    color: var(--soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
}

.cart td {
    padding: 18px 12px;
    border-top: 1px dashed var(--ink);
    vertical-align: middle;
}

.cart .num {
    text-align: right;
    white-space: nowrap;
}

.cart-product {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-thumb {
    display: block;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--ink);
    background: var(--card);
}

.cart-thumb img, .cart-thumb .image-placeholder {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.cart-name {
    font-family: var(--serif);
    font-size: 19px;
    text-decoration: none;
}

.cart-name:hover {
    text-decoration: underline;
}

.cart-colour, .cart-note {
    display: block;
    color: var(--soft);
    font-size: 14px;
}

.cart-unavailable {
    opacity: 0.6;
}

/* A fabric's matching thread: a box under its name, what it costs, and who picks the colour (Jimmie and Jannike,
   2026-10-21). */
.cart-thread {
    margin: 8px 0 0;
    font-size: 14px;
}

.cart-thread label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cart-thread input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ink);
}

.cart-thread small {
    display: block;
    margin-left: 26px;
    color: var(--soft);
    font-size: 13px;
}

/* Little left of the colour: her notice, in the shade of the product page's amber dot. */
.cart-low {
    max-width: 34em;
    margin-top: 4px;
    padding-left: 10px;
    border-left: 3px solid var(--low-stock);
    color: var(--ink);
}

.cart-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cart-line label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cart-line input {
    width: 64px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    text-align: center;
}

.cart-price {
    color: var(--soft);
}

.cart-total {
    font-family: var(--serif);
    font-size: 20px;
}

.cart-summary {
    flex: 1 1 340px;
    min-width: 0;
}

.spolis-small {
    flex-wrap: nowrap;
}

.spolis-small .bubble {
    flex: 1 1 auto;
    margin-bottom: 16px;
}

/* Towards free shipping: the cart's own <progress>, drawn as a brown bar in an ink frame. */
.free-shipping-progress {
    display: block;
    width: 100%;
    height: 10px;
    margin: 4px 0 24px;
    border: 1px solid var(--ink);
    background: transparent;
    appearance: none;
}

.free-shipping-progress::-webkit-progress-bar {
    background: transparent;
}

.free-shipping-progress::-webkit-progress-value {
    background: var(--brown);
}

.free-shipping-progress::-moz-progress-bar {
    background: var(--brown);
}

.totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 0;
    margin: 0;
    font-size: 16px;
}

.totals dd {
    margin: 0;
    padding-left: 16px;
    text-align: right;
}

.totals dt.totals-sum {
    padding-top: 10px;
    border-top: 1px solid var(--ink);
    font-weight: 600;
}

.totals dd.totals-sum {
    padding-top: 6px;
    border-top: 1px solid var(--ink);
    font-family: var(--serif);
    font-size: 24px;
}

.cart-pickup {
    margin: 18px 0 0;
    color: var(--soft);
    font-size: 14px;
}

.cart-summary .fabric-notice {
    margin-top: 16px;
    padding: 12px 14px;
    font-size: 13.5px;
}

.checkout-link {
    width: 100%;
    margin-top: 22px;
}

.cart-empty {
    margin-top: 30px;
}

.cart-empty > p {
    margin: 26px 0 0;
}

/* Checkout: the summary box on the right; first in the HTML, so first on phones. */
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    align-items: start;
    gap: 48px;
    margin-top: 30px;
}

.checkout-summary {
    grid-row: 1;
    grid-column: 2;
}

.checkout-main {
    grid-row: 1;
    grid-column: 1;
}

.checkout-summary h2 {
    margin: 0 0 14px;
    font-size: 24px;
}

.checkout-lines {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.checkout-lines li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ink);
}

.checkout-lines img, .checkout-lines .image-placeholder {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink);
    object-fit: cover;
}

.checkout-line-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
}

.checkout-line-name span {
    display: block;
    color: var(--soft);
    font-size: 14px;
}

.checkout-line-total {
    white-space: nowrap;
}

/* A fabric's matching thread under it, in line with its name (past the picture's 44 px and the gap). */
.checkout-lines .checkout-thread {
    padding-left: 56px;
}

.checkout-change {
    margin: 18px 0 0;
}

.checkout-errors {
    margin: 0 0 24px;
    padding-left: 32px;
}

.checkout-form fieldset {
    margin: 0 0 30px;
    padding: 0 0 30px;
    border: 0;
    border-bottom: 1px dashed var(--ink);
}

.checkout-form legend {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--serif);
    font-size: 24px;
}

.radio-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--ink);
    cursor: pointer;
}

.radio-card:has(:checked) {
    background: var(--card);
}

.radio-card input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--brown);
}

.field-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.field-pair > .field {
    flex: 1 1 220px;
    min-width: 0;
}

.field-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-end {
    gap: 18px;
}

.field textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
}

.checkout-code {
    max-width: 320px;
}

.checkout-hint {
    margin: 0;
    color: var(--soft);
    font-size: 14px;
}

.checkout-code .checkout-hint {
    margin-top: 6px;
}

/* The payment page (PaymentPage): the checkout's look, with Stripe's fields for the card and Klarna in its fieldset
   (stripe-betalning.js gives them the checkout's borders, labels and colours) and the shop's own button. */
.payment-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.payment-form fieldset {
    margin-bottom: 12px;
}

.payment-form .message {
    margin: 0;
}

.payment-fields {
    min-height: 180px;   /* Stripe's fields take a moment to come; the button waits where it will be */
}

.payment-pay:disabled {
    opacity: 0.6;
    cursor: default;
}

.checkout-end .fabric-notice {
    margin: 0;
}

.checkout-terms {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    cursor: pointer;
}

.checkout-terms input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--brown);
}

/* A field a checkout problem concerns, which Blazor marks "invalid": the alert's red edge and tint, the terms box with a
   red ring and its sentence in red (Jimmie, 2026-10-16). */
.field input.invalid, .field textarea.invalid {
    border-color: var(--alert);
    background: var(--alert-tint);
}

.checkout-terms input.invalid {
    outline: 2px solid var(--alert);
    outline-offset: 2px;
}

.checkout-terms:has(input.invalid) {
    color: var(--alert);
}

/* Three dots that come one at a time, ". .. ...", over and over, so a wait is seen to be going on (Jimmie, 2026-10-16):
   the thank-you page while the payment is confirmed, the pay button while it pays (Dots.razor, stripe-betalning.js).
   Each dot keeps its place, so nothing beside them moves; asked for less motion, they simply stand. */
.dots > span {
    animation: 1.5s steps(1, end) infinite;
}

.dots > span:nth-child(2) {
    animation-name: dot-second;
}

.dots > span:nth-child(3) {
    animation-name: dot-third;
}

@keyframes dot-second {
    0% { opacity: 0; }
    33.333% { opacity: 1; }
}

@keyframes dot-third {
    0% { opacity: 0; }
    66.667% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dots > span {
        animation: none;
    }
}

/* Thank-you page */

.thanks {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 64px;
}

.thanks-text {
    flex: 1 1 520px;
    min-width: 0;
}

.thanks-text .kicker {
    margin-bottom: 12px;
}

.thanks h1, .thanks-note h1, .lost h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
}

.thanks-text > p {
    max-width: 40em;
    margin: 0 0 14px;
    font-size: 17.5px;
}

.receipt {
    max-width: 560px;
    margin: 26px 0 0;
    padding: 0;
    border-top: 1px solid var(--ink);
    list-style: none;
}

.receipt li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--ink);
}

.receipt li > span:last-child {
    white-space: nowrap;
}

.thanks-text > .receipt-sum {
    margin: 16px 0 0;
    font-family: var(--serif);
    font-size: 24px;
}

.receipt-sum span {
    color: var(--soft);
    font-family: var(--sans);
    font-size: 15px;
}

.thanks-text > .thanks-actions, .thanks-note .thanks-actions {
    margin: 32px 0 0;
}

.thanks-spolis {
    flex: 0 1 380px;
    min-width: 0;
    padding-top: 30px;
}

.thanks-spolis .spolis {
    flex-wrap: nowrap;
}

.thanks-spolis .bubble {
    flex: 1 1 auto;
    margin-bottom: 16px;
}

.thanks-note > p {
    max-width: 40em;
    margin: 18px 0 0;
    color: var(--soft);
    font-size: 17.5px;
}

/* Text pages: Om oss, Villkor, Integritetspolicy */

.prose .heading-rule {
    margin: 22px 0 28px;
}

.prose .heading-rule + h2 {
    margin-top: 0;
}

.prose .prose-updated {
    margin: -12px 0 22px;
    color: var(--soft);
    font-size: 14px;
}

.prose h3 {
    margin: 28px 0 12px;
    font-size: 22px;
}

.prose ul, .prose ol:not(.steps) {
    max-width: 40em;
    margin: 0 0 14px;
    padding-left: 22px;
    font-size: 17px;
}

.prose li + li {
    margin-top: 6px;
}

.prose table {
    margin: 4px 0 18px;
    border-collapse: collapse;
    font-size: 15.5px;
}

.prose th, .prose td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px dashed var(--ink);
    text-align: left;
    vertical-align: top;
}

.prose td code {
    overflow-wrap: anywhere;   /* or a phone shows the page zoomed out to fit ".AspNetCore.Identity.Application" */
}

.prose thead th {
    color: var(--soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.prose-photo {
    margin: 0 0 22px;
}

.prose-photo > img {
    object-fit: cover;
}

.prose-photo-wide > img {
    aspect-ratio: 3 / 2;
}

.prose-photo-tall > img {
    aspect-ratio: 4 / 5;
}

.prose .opening-hours {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 24px;
    margin: 0;
    font-size: 16.5px;
}

.opening-hours dt {
    font-weight: 600;
}

.opening-hours dd {
    margin: 0;
}

.opening-hours-lines {
    margin: 0;
}

.on-this-page {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 320px;
    padding: 22px 22px 24px;
    border: 1px solid var(--ink);
    background: var(--card);
}

.on-this-page p {
    margin: 0 0 12px;
    color: var(--soft);
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.on-this-page ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15.5px;
}

/* Account pages: a column for the forms (Spolis beside the login), Mitt konto with a box, an order. */

.account-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 72px;
}

.account-column {
    flex: 0 1 480px;
    min-width: 0;
    max-width: 480px; /* the forms' width also where no .account-layout is around it */
}

/* Ångra köpet has more to read than a form (WithdrawPage). */
.account-column.withdraw {
    flex-basis: 640px;
    max-width: 640px;
}

.account-column h1, .account-page h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
}

.account-column > p {
    margin: 0 0 10px;
}

.account-spolis {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 460px;
    padding-top: 6px;
}

.account-spolis .spolis {
    flex-wrap: nowrap;
}

.account-spolis .bubble {
    flex: 1 1 auto;
}

/* "Nästan klart!" after Skapa konto (Register): the bubble beside Spolis, as at the login; on a phone under him, with its
   tail turned up at him (Jimmie, 2026-10-18: it wrapped under him and pointed at nothing). */
.account-sent .spolis {
    flex-wrap: nowrap;
}

.account-sent .bubble {
    flex: 1 1 auto;
}

@media (max-width: 30rem) {
    .account-sent .spolis {
        flex-wrap: wrap;
    }

    .account-sent .bubble {
        flex-basis: 100%;
        margin-bottom: 0;
    }

    .account-sent .bubble::before {
        top: -9px;
        bottom: auto;
        left: 40px;
        transform: rotate(135deg);
    }
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 24px;
}

.account-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--soft);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.account-form input:not([type="checkbox"]) {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
}

.account-form label.account-check {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: 15.5px;
    letter-spacing: normal;
    text-transform: none;
}

.account-form input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--brown);
}

.account-form textarea {
    min-height: 96px;
    padding: 12px 14px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
    resize: vertical;
}

.account-form fieldset {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

.account-form legend {
    margin-bottom: 4px;
    padding: 0;
    color: var(--soft);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.account-form button[type="submit"] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    background: var(--accent);
    color: var(--cream);
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.account-form button[type="submit"]:hover {
    background: var(--accent-dark);
}

/* A failed login (CustomerLogin): the button shakes, red with "Fel" on it for a moment, then is "Logga in" again. Only the
   colour and the word without motion, for those who ask for less. */
.account-form button.login-wrong {
    position: relative;
    animation: login-shake 0.4s ease-in-out 2, login-red 2.4s steps(1, end);
}

.login-wrong .login-wrong-word {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    animation: login-show 2.4s steps(1, end);
}

.login-wrong .login-word {
    animation: login-hide 2.4s steps(1, end);
}

@keyframes login-shake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-7px);
    }

    40%, 80% {
        transform: translateX(7px);
    }
}

@keyframes login-red {
    0% {
        background: var(--alert);
    }
}

@keyframes login-show {
    0% {
        visibility: visible;
    }
}

@keyframes login-hide {
    0% {
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-form button.login-wrong {
        animation: login-red 2.4s steps(1, end);
    }
}

/* What went wrong with a form: tinted, with a red edge on the left, so that it reads as a message rather than one more
   field to fill in (Jimmie, 2026-10-15). */
.form-error {
    margin: 0 0 18px;
    padding: 12px 16px 12px 14px;
    border-left: 4px solid var(--alert);
    background: var(--alert-tint);
    color: var(--ink);
}

ul.form-error {
    padding-left: 34px;
}

.account-wrong .account-form input:not([type="checkbox"]) {
    border-color: var(--alert);
}

/* A field a storefront form's own check is about (FormChecks): the checkout's red edge and tint (Jimmie, 2026-10-18). */
.account-form input.invalid {
    border-color: var(--alert);
    background: var(--alert-tint);
}

/* A failed login: Spolis says it, his bubble in the alert's colours; above the form once the columns have wrapped. */
.spolis-alert .bubble, .spolis-alert .bubble::before {
    border-color: var(--alert);
    background: var(--alert-tint);
}

.spolis-alert .bubble-first {
    color: var(--alert);
}

.spolis-alert .bubble-second {
    color: var(--ink);
}

@media (max-width: 58.5rem) {
    .account-problem .account-spolis {
        order: -1;
    }
}

.account-note, .account-column > .account-note {
    margin: 10px 0 0;
    color: var(--soft);
    font-size: 14px;
}

/* The return address on Ångra köpet and in the terms: a line each, as on a parcel (Jimmie, 2026-10-15). */
.return-address {
    margin: 0 0 1em;
    padding-left: 16px;
    border-left: 2px solid var(--rule);
    font-style: normal;
    line-height: 1.55;
}

.account-who {
    margin: 10px 0 0;
    color: var(--soft);
}

/* "Adressen är uppdaterad." and the like: the heading rule's room below it too, before what follows. */
.account-page > .message, .account-main > .message {
    margin: 0 0 24px;
}

.account-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

/* An order still waiting for its payment: Betala after its status, back to the payment page. */
.account-pay {
    margin-left: 8px;
    font-weight: 600;
}

/* Mitt konto: the heading and the orders, with the box beside them from the top (Jimmie, 2026-10-18). */
.account-main {
    flex: 999 1 560px;
    min-width: 0;
}

.account-page h2 {
    margin: 0 0 16px;
    font-size: 26px;
}

.account-table {
    width: 100%;
    border-collapse: collapse;
}

.account-table th {
    padding: 0 12px 12px 0;
    color: var(--soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
}

.account-table td {
    padding: 14px 12px 14px 0;
    border-top: 1px dashed var(--ink);
    vertical-align: middle;
}

.account-table .num {
    text-align: right;
    white-space: nowrap;
}

.account-order-link {
    font-weight: 600;
}

.account-sum {
    font-family: var(--serif);
    font-size: 19px;
}

.account-box {
    flex: 1 1 300px;
    min-width: 0;
    padding: 22px 22px 24px;
    border: 1px solid var(--ink);
    background: var(--card);
}

.account-box p {
    margin: 0 0 10px;
}

.account-box-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--ink);
}

.account-box-actions form, .account-box-actions p {
    margin: 0;
}

.account-box-actions .button {
    min-height: 46px;
    padding: 0 20px;
}

.account-back {
    margin: 0 0 18px;
}

.account-order-meta {
    margin: 10px 0 0;
    color: var(--soft);
}

.account-order-meta strong {
    color: var(--ink);
    font-weight: 600;
}

.account-order > p {
    max-width: 40em;
}

.order-lines {
    max-width: 720px;
    margin: 0 0 24px;
}

.account-address {
    display: block;
    max-width: 360px;
    margin: 0 0 18px;
}

/* 404 and the error page */

.lost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 64px;
    padding-top: 20px;
}

.lost > .spolis {
    flex: 0 0 auto;
}

.lost-text {
    flex: 1 1 420px;
    min-width: 0;
}

.lost-text .kicker {
    margin-bottom: 12px;
}

.lost-text > p {
    margin: 0;
    color: var(--soft);
    font-size: 17.5px;
}

.lost-text > .lost-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.lost-text > .lost-id {
    margin-top: 22px;
    font-size: 14px;
}

/* Start page */

.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
    padding-block: 72px 80px;
}

.hero-text {
    flex: 1 1 420px;
    min-width: 0;
}

.hero h1 {
    margin: 0;
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.hero .heading-rule {
    margin-block: 28px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 36px 0 0;
}

.hero-actions .button {
    min-height: 48px;
    padding-inline: 26px;
}

.hero-photo {
    flex: 1 1 460px;
    min-width: 0;
    margin: 0;
}

.hero-photo img {
    height: 440px;
    object-fit: cover;
    filter: sepia(0.15) saturate(0.9);
}

.hero-photo figcaption {
    margin-top: 16px;
    color: var(--soft);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-align: right;
}

.greeting {
    padding-bottom: 72px;
}

/* His bubble stays beside him on a phone too, narrower and taller, rather than dropping under him (Jimmie, 2026-10-20). */
.greeting > .spolis {
    flex-wrap: nowrap;
    padding-top: 32px;
    border-top: 1px dashed var(--ink);
}

.band-inner {
    padding-block: 72px 80px;
}

.category-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-cards > li {
    flex: 1 1 300px;
    min-width: 0;
}

.category-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--ink);
    background: var(--paper);
    text-decoration: none;
}

.category-card > img, .category-card > .image-placeholder {
    display: block;
    width: 100%;
    height: 300px;
    aspect-ratio: auto;
    object-fit: cover;
}

.category-card:hover .plate-name {
    color: var(--dove);
}

.newest {
    padding-block: 80px;
}

.newest > h2 {
    margin: 0 0 40px;
    font-size: 40px;
}

.heritage {
    background: var(--dove);
    color: var(--cream);
}

.heritage a {
    color: var(--cream);
}

.heritage-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 64px;
    padding-block: 88px;
}

.heritage-logo {
    display: flex;
    flex: 1 1 340px;
    justify-content: center;
}

.heritage-logo img {
    display: block;
    width: 280px;
    /* Its own size, as img's height: auto sets the attributes' aside: Chrome flags a lazy picture without one. */
    aspect-ratio: 280 / 230;
}

.heritage-text {
    flex: 1 1 560px;
    min-width: 0;
}

.heritage h2 {
    margin: 0 0 18px;
    font-size: 42px;
}

.heritage-text > p {
    max-width: 36em;
    margin: 0;
    color: #E4DACA;
    font-size: 17.5px;
}

.heritage-text > .google-rating {
    margin: 18px 0 0;
    font-size: 16px;
}

.heritage-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 56px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px dashed #9DB2BD;
    font-size: 15.5px;
}

.heritage-facts h3 {
    margin: 0 0 8px;
    color: #DCE4E8;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.heritage-facts p {
    margin: 0 0 8px;
}

.heritage-facts p > a:only-child {
    font-weight: 600;
    text-underline-offset: 4px;
}

/* Seasons (Claude/design-v1.md, "Seasons"): the season's colours over the whole frame (buttons and the dashed rule), a
   garland hanging from the awning, her message first in the info strip, Spolis's hat, the season box on the start page
   and a band above the footer. Never at the checkout (the shop leaves the season out there). */

.season-jul {
    --accent: #9E2B25;
    --accent-dark: #7E221D;
    --rule: #2F5B3A;
}

.season-nyar {
    --accent: #1F2A44;
    --accent-dark: #141C2E;
    --rule: #B08D3C;
}

.season-pask {
    --accent: #3F6B3A;
    --accent-dark: #2F5229;
    --rule: #E9C53A;
}

/* Staff looking at a season before it's up ("Förhandsgranska butiken" in the admin). */
.season-preview {
    margin: 0;
    padding: 10px var(--gutter);
    background: var(--ink);
    color: var(--cream);
    font-size: 14.5px;
    text-align: center;
}

.season-preview a {
    color: var(--cream);
    font-weight: 600;
}

.info-strip-season {
    font-weight: 600;
}

/* The store's rating on Google (GoogleRating): a star and a line linking to the reviews, in the footer, on the start
   page and on Om oss. The star is brown on paper and gold, as the info strip's, on the dark footer and band. */
.google-rating-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.3em;
}

.google-rating-star {
    flex: none;
    margin-right: 0.15em;
    fill: var(--brown);
}

.site-footer .google-rating-star, .heritage .google-rating-star {
    fill: #E8C35A;
}

/* The line is a box of its own, so the link's underline doesn't reach it: it gets its own, on hover. */
.google-rating a:hover .google-rating-line {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.info-strip-star {
    display: inline-block;
    margin-right: 7px;
    vertical-align: -1px;
    fill: #E8C35A;
}

/* The garland: a tile repeated along the awning, lined up with its 88 px stripes, pulled up to hang from the scallops. */
.season-awning {
    position: relative;
    height: 52px;
    margin-top: -22px;
    background: url("images/seasons/markis-jul.svg") repeat-x 0 0 / 176px 52px;
    filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.2));
    pointer-events: none;
}

.season-awning-nyar {
    height: 50px;
    background-image: url("images/seasons/markis-nyar.svg");
    background-size: 176px 50px;
}

.season-awning-pask {
    background-image: url("images/seasons/markis-pask.svg");
    background-size: 352px 52px;
}

/* Från vår Instagram: her latest posts, square in thin frames, from the shop's own copies (Claude/design-v1.md, "Start"). */
.instagram {
    padding-block: 80px;
}

.instagram h2.ruled {
    margin-bottom: 14px;
}

.instagram-lead {
    margin: 0 0 36px;
    color: var(--soft);
    text-align: center;
}

.instagram-lead a {
    font-weight: 600;
    text-underline-offset: 4px;
}

.instagram-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.instagram-grid li {
    flex: 1 1 150px;
    min-width: 0;
}

.instagram-post {
    display: block;
    padding: 6px;
    border: 1px solid var(--ink);
    background: var(--card);
}

.instagram-post img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* The season box on the start page: between Spolis's greeting and Sortimentet, framed like the summary boxes. */
.season-box-wrap {
    padding-bottom: 80px;
}

.season-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 48px;
    padding: 40px 44px 44px;
    overflow: hidden;
    border: 1px solid var(--ink);
    box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--ink);
}

.season-box-jul {
    background: #9E2B25;
    color: var(--cream);
}

.season-box-nyar {
    background: #1F2A44;
    color: var(--cream);
}

.season-box-pask {
    background: #F6E6A8;
    color: var(--ink);
}

.season-box-art {
    position: absolute;
    pointer-events: none;
}

.season-box-jul .season-box-art {
    top: -34px;
    right: -24px;
    width: 320px;
    height: auto;
    opacity: 0.28;
}

.season-box-nyar .season-box-art {
    top: -8px;
    right: 24px;
    width: 380px;
    height: auto;
    opacity: 0.7;
}

.season-box-pask .season-box-art {
    right: 32px;
    bottom: -12px;
    width: 180px;
    height: auto;
}

.season-box-text {
    position: relative;
    flex: 1 1 300px;
    min-width: 0;
}

.season-box-kicker {
    margin: 0 0 14px;
    font-size: 12.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.season-box-jul .season-box-kicker {
    color: #F3D9A4;
}

.season-box-nyar .season-box-kicker {
    color: #D8B25C;
}

.season-box-pask .season-box-kicker {
    color: var(--soft);
}

.season-box h2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.08;
}

.season-box-rule {
    width: 120px;
    margin: 24px 0;
    border-top: 2px dashed #F3D9A4;
}

.season-box-nyar .season-box-rule {
    border-top-color: #D8B25C;
}

.season-box-pask .season-box-rule {
    border-top-color: #3F6B3A;
}

.season-box-text > p:not(.season-box-kicker) {
    max-width: 30em;
    margin: 0;
    font-size: 17px;
}

.season-box-button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 28px;
    padding: 0 24px;
    background: var(--cream);
    color: #9E2B25;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.season-box-nyar .season-box-button {
    color: #1F2A44;
}

.season-box-pask .season-box-button {
    background: #3F6B3A;
    color: var(--cream);
}

.season-box-button:hover {
    text-decoration: underline;
}

.season-box-fabrics {
    position: relative;
    display: flex;
    flex: 1.4 1 420px;
    gap: 20px;
    min-width: 0;
}

.season-box-pask .season-box-fabrics {
    margin-right: 190px;
}

.season-fabric {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 8px 14px;
    border: 1px solid var(--ink);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
}

.season-fabric:hover .season-fabric-name {
    text-decoration: underline;
}

.season-fabric-image {
    display: block;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--ink);
    background: var(--paper);
}

.season-fabric-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.season-fabric-name {
    display: block;
    margin-top: 10px;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.2;
}

.season-fabric-price {
    display: block;
    margin-top: 4px;
    font-family: var(--serif);
    font-size: 18px;
}

.season-fabric-price small {
    color: var(--soft);
    font-family: var(--sans);
    font-size: 13.5px;
}

/* New Year: three rows from Tygguiden, under the fireworks. */
.season-guide {
    position: relative;
    flex: 1.4 1 420px;
    margin-top: 90px;
    border-collapse: collapse;
    font-size: 17px;
}

.season-guide th, .season-guide td {
    padding: 12px 0;
    border-bottom: 1px dashed #D8B25C;
    font-weight: 400;
    text-align: left;
}

.season-guide td {
    padding-left: 24px;
    color: #D8B25C;
    font-family: var(--serif);
    font-size: 20px;
    text-align: right;
    white-space: nowrap;
}

/* The band above the footer: her greeting between two ornaments. */
.season-band {
    border-top: 1px solid var(--ink);
    color: var(--cream);
}

.season-band-jul {
    background: #2F5B3A;
}

.season-band-nyar {
    background: #1F2A44;
}

.season-band-pask {
    background: #3F6B3A;
}

.season-band p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    box-sizing: border-box;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px var(--gutter);
    font-family: var(--serif);
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-align: center;
}

.season-band img {
    display: block;
    flex: 0 0 auto;
}

/* Text pages with something beside them (Tygguiden; Villkor and Om oss follow). */

.prose-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 72px;
}

.prose {
    flex: 999 1 560px;
    min-width: 0;
    max-width: 760px;
}

.prose h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
}

.prose h2 {
    margin: 40px 0 16px;
    font-size: 30px;
    line-height: 1.2;
    overflow-wrap: break-word;   /* a word wider than the screen breaks, rather than the page scrolling sideways */
}

.prose p {
    max-width: 40em;
    margin: 0 0 14px;
    font-size: 17px;
}

.prose-aside {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 420px;
    padding-top: 1px; /* the bubble's top on the outer line of the box beside it (Tygguiden) */
}

.prose-aside .spolis {
    flex-wrap: nowrap;
}

.prose-aside .bubble {
    flex: 1 1 auto;
    margin-bottom: 16px;
}

.prose .guide-box {
    margin: 8px 0 12px;
    padding-bottom: 18px;
}

.prose .guide-box h2 {
    margin: 0 0 6px;
}

.prose .guide-box-hint {
    margin: 0 0 14px;
    color: var(--soft);
    font-size: 14px;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.guide-table thead th {
    padding: 0 12px 12px;
    color: var(--soft);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
}

.guide-table tbody th, .guide-table td {
    padding: 18px 12px;
    border-top: 1px dashed var(--ink);
    vertical-align: middle;
}

.guide-table tbody th {
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.guide-table td {
    color: var(--soft);
}

.guide-table td.guide-amount {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 20px;
    white-space: nowrap;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 40em;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-size: 17px;
}

.steps > li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    counter-increment: step;
}

.steps > li::before {
    content: counter(step);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--card);
    font-family: var(--serif);
    font-size: 16px;
}

.prose .example {
    max-width: 46em;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--ink);
    color: var(--soft);
    font-size: 15px;
}

/* Smaller screens */

@media (max-width: 64rem) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .checkout-summary, .checkout-main {
        grid-row: auto;
        grid-column: 1;
    }
}

@media (max-width: 48rem) {
    .info-strip p {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    .info-strip-dot {
        display: none;
    }

    /* The wordmark centred with the account and cart icons at the right, the search under them at full width. */
    .site-header-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: ". mark tools" "search search search";
        gap: 12px;
        padding-top: 20px;
    }

    .site-search-column {
        grid-area: search;
    }

    .site-search {
        max-width: none;
    }

    .site-wordmark {
        grid-area: mark;
        gap: 6px;
    }

    .site-wordmark-name {
        height: 34px;
    }

    .site-tools {
        grid-area: tools;
        gap: 0;
    }

    .site-tools a {
        justify-content: center;
        min-width: 44px;
        padding: 0;
    }

    .site-tool-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .site-menu ul {
        gap: 2px 22px;
        padding-block: 12px 10px;
        font-size: 13px;
    }

    main.page {
        padding-block: 32px 64px;
    }

    .hero, .newest, .band-inner, .heritage-inner {
        padding-block: 48px;
    }

    .hero {
        gap: 36px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-photo img {
        height: 300px;
    }

    .greeting {
        padding-bottom: 48px;
    }

    h2.ruled {
        gap: 14px;
        margin-bottom: 32px;
        font-size: 24px;
    }

    .newest > h2, .heritage h2 {
        font-size: 30px;
    }

    .heritage-inner {
        gap: 36px;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }

    .prose h1, .list-head h1, main.page > h1, .product-info h1, .thanks h1, .thanks-note h1, .lost h1,
    .account-column h1, .account-page h1 {
        font-size: 34px;
    }

    /* The smallest phones (320 px): "Integritetspolicy" and "Personuppgiftsansvarig" are wider than the screen at
       the usual sizes. */
    @media (max-width: 22rem) {
        .prose h1, .list-head h1, main.page > h1, .product-info h1, .thanks h1, .thanks-note h1, .lost h1,
        .account-column h1, .account-page h1 {
            font-size: 30px;
        }

        .prose h2 {
            font-size: 26px;
        }
    }

    .product {
        gap: 32px;
        padding-block: 24px 48px;
    }

    .facts-inner, .product-more {
        padding-block: 48px;
    }

    .fact {
        flex-basis: 100%;
    }

    .fact dt {
        flex-basis: 110px;
    }

    /* The cart's table becomes one block per line: the product, the amount, the sums. */
    .cart thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .cart, .cart tbody, .cart tr, .cart td {
        display: block;
    }

    .cart tr {
        padding: 14px 0;
        border-top: 1px dashed var(--ink);
    }

    .cart td {
        padding: 6px 0;
        border: 0;
    }

    .cart .num {
        text-align: left;
    }

    /* The text pages' tables (the privacy policy's): a row at a time, its name first and each value after its own
       heading, rather than three columns too narrow for their words. */
    .prose thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .prose table, .prose tbody, .prose tr, .prose td {
        display: block;
    }

    .prose tr {
        padding: 12px 0;
        border-bottom: 1px dashed var(--ink);
    }

    .prose td {
        padding: 2px 0;
        border: 0;
    }

    .prose td:first-child {
        font-weight: 600;
    }

    .prose td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--soft);
    }

    /* Tygguiden's table: the project and its amount on a line, what to think of under them, rather than three narrow
       columns. */
    .guide-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .guide-table, .guide-table tbody {
        display: block;
    }

    .guide-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 16px;
        padding: 14px 0;
        border-top: 1px dashed var(--ink);
    }

    .guide-table tbody th, .guide-table td {
        padding: 0;
        border: 0;
    }

    .guide-table tbody th {
        white-space: normal;
    }

    .guide-table td:not(.guide-amount) {
        grid-column: 1 / -1;
    }

    /* The season box: the fabrics under the words, two to a row like the product grid (the third keeps their size);
       less room around it, and the fireworks above the words instead of beside them. */
    .season-box {
        padding: 28px 20px 28px;
    }

    .season-box h2 {
        font-size: 32px;
    }

    .season-box-fabrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex-basis: 100%;
    }

    .season-box-nyar .season-box-art {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        max-height: 124px;
        margin-bottom: -12px;
        object-fit: contain;
    }

    .season-box-pask .season-box-fabrics {
        margin-right: 0;
    }

    .season-box-pask .season-box-art {
        width: 110px;
        opacity: 0.6;
    }

    .season-guide {
        flex-basis: 100%;
        margin-top: 0;
    }

    .season-band p {
        font-size: 19px;
    }
}