html,
body {
    padding: 0;
    margin: 0;
    font-family: system-ui;
    background: #fff;
    overflow-x: hidden;
}

.wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

img {
    display: block;
}

.site-title {
    font-size: 48px;
    font-weight: 900;
    margin: 70px 0;
    min-width: 0;
}

.site-title a {
    display: block;
    color: #000;
    text-decoration-color: #ddd;

    &:hover {
        text-decoration-color: #000;
    }
}

.site-title img {
    display: inline-block;
    position: relative;
    top: 5px;
    width: 50px;
    height: 50px;
}

.items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 64px 0;
}

@media (min-width: 1050px) {
    .items {
        gap: 64px;
    }
}

.item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s ease;
}

.item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.item:hover .item-img {
    transform: translateY(-0px) scale(1.02);
}

.item:hover .item-name {
    /*text-decoration: underline;*/
}

.item-img {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.2s ease;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    margin-bottom: 24px;
}

.item-img--scallop {
    -webkit-mask-image: url(/item-mask.svg);
    mask-image: url(/item-mask.svg);
}

.item-img--hex {
    -webkit-mask-image: url(/item-mask-hex.svg);
    mask-image: url(/item-mask-hex.svg);
}

.item-img--arch {
    -webkit-mask-image: url(/item-mask-arch.svg);
    mask-image: url(/item-mask-arch.svg);
}

.item-img--blob {
    -webkit-mask-image: url(/item-mask-blob.svg);
    mask-image: url(/item-mask-blob.svg);
}

.item-img--cut {
    -webkit-mask-image: url(/item-mask-cut.svg);
    mask-image: url(/item-mask-cut.svg);
}

.item-img--round {
    border-radius: 8px;
}

.prod-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 6px;
}

.item-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.item-name {
    font-weight: 500;
    font-size: 1.2rem;
}

.item-category {
    color: #666;
}

.item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
    justify-content: flex-end;
    gap: 12px;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.buy,
button {
    text-decoration: none;
    border-radius: 6px;
    background: #000;
    color: #fff;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 1.5rem;
    display: inline-block;
    border: none;
    cursor: pointer;
    margin-left: 16px;

    &:hover {
        background: #333;
        position: relative;
        top: 1px;
    }
}

.cart-button {
    text-decoration: none;
    border-radius: 10px;
    background: #fff;
    color: #000;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 1.5rem;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    border: 3px solid #000;

    &:hover {
        background: #eee;
    }
}
.cart-button img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: 8px;
}

/* Plays once on the page that follows "add to cart", to draw the eye to the
   updated total. */
.cart-button--added {
    animation: cart-bump 600ms ease-out both;
}

.cart-button--added img {
    animation: cart-nudge 600ms ease-out both;
}

@keyframes cart-bump {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.18) rotate(-3deg);
    }

    55% {
        transform: scale(0.95) rotate(2deg);
    }

    78% {
        transform: scale(1.05) rotate(-1deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes cart-nudge {
    0% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .cart-button--added,
    .cart-button--added img {
        animation: none;
    }
}

.qty {
    font-size: 1.5rem;
    border-radius: 5px;
    padding: 4px 10px;
    border: 1px solid #333;
}

.cart {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.cart-edit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.cart-edit button {
    margin-left: 0;
    padding: 6px 12px;
    font-size: 1rem;
}

.cart-qty {
    width: 6ch;
    font-size: 1.1rem;
    padding: 4px 6px;
}

/* Secondary action, so it reads as lighter than "Päivitä". */
.cart-remove {
    background: #fff;
    color: #000;
    border: 2px solid #000;

    &:hover {
        background: #eee;
    }
}

.cart-prod-price {
    white-space: nowrap;
}

.cart-icon {
    display: inline-block;
    vertical-align: middle;
}

td {
    padding: 8px 20px;
    text-align: right;
}

.cart-prod-name {
    font-weight: 600;
    padding-right: 20px;
    text-align: left;
}

.cart-total {
    font-size: 1.2rem;
    font-weight: 800;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 160px;
    padding: 32px 0;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
}

.footer-links a:hover {
    color: #000;
    text-decoration: underline;
}

.footer-copy {
    margin: 0;
}

/* Which build answered. For whoever runs the shop, so it is there to be looked
   up rather than there to be read. */
.footer-build {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    opacity: 0.7;
}

@media (max-width: 820px) {
    .items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .wrapper {
        padding: 0 8px;
    }

    .head {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* Right-aligned under the shop name rather than lifted above it. Moving
       it up would put the cart before the name to the eye and after it to the
       keyboard, and the header is a linear strip at this width. */
    .cart {
        align-self: flex-end;
    }

    .site-title {
        font-size: 32px;
        margin: 40px 0;
        text-align: center;
    }

    .items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin: 40px 0;
    }

    .item {
        padding: 8px;
    }

    .item-img {
        margin-bottom: 8px;
    }

    .item-name {
        font-size: 1rem;
    }

    .item-actions {
        gap: 8px;
    }

    .price {
        font-size: 1.1rem;
    }

    .buy,
    button {
        padding: 8px 14px;
        font-size: 1.1rem;
    }

    .cart-button {
        padding: 6px 12px;
        font-size: 1rem;
        border-width: 2px;
    }

    .cart-button img {
        height: 20px;
    }

    .footer {
        margin-top: 80px;
        flex-direction: column;
        align-items: flex-start;
    }

    table {
        width: 100%;
    }

    td {
        padding: 8px 10px;
    }
}

@media (max-width: 340px) {
    .site-title {
        font-size: 24px;
    }

    .site-title img {
        width: 32px;
        height: 32px;
    }
}

/* Payment methods on the checkout page. The logos come from Mollie, which is
   why the checkout page's Content-Security-Policy names them in img-src. */
.methods {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 16px 20px 20px;
    margin: 24px 0 0;
    display: grid;
    gap: 4px;
}

.methods legend {
    font-weight: 700;
    padding: 0 8px;
}

.method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
        background: #f4f4f4;
    }

    &:has(input:checked) {
        background: #f0f0f0;
        box-shadow: inset 0 0 0 2px #000;
    }
}

.method-radio {
    width: 20px;
    height: 20px;
    accent-color: #000;
    margin: 0;
    flex-shrink: 0;
}

.method-logo {
    width: 40px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.method-name {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Hidden until the card is the method chosen. The :has() rule does it with no
   script at all; the class is what checkout.js sets, for a browser whose :has()
   cannot. Both are absent when JavaScript is, and then the card is asked for at
   Mollie instead — which is why "hidden" is the right default here. */
.card-fields {
    display: none;
}

.methods:has(.method-radio[value="creditcard"]:checked)+.card-fields,
.checkout--card .card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-top: 16px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.card-fields--broken {
    display: none !important;
}

.card-field--wide {
    grid-column: 1 / -1;
}

.card-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Mollie mounts an iframe in place of each empty div. It sizes itself to the
   height given here, so the boxes have to look like the shop's own inputs. */
.card-field>div {
    border: 1px solid #333;
    border-radius: 5px;
    padding: 8px 10px;
    background: #fff;
    height: 1.6rem;
}

.card-error {
    grid-column: 1 / -1;
    margin: 0;
    color: #b00020;
    font-weight: 600;
    min-height: 1.2rem;
}

/* ---------------------------------------------------------------- headings

   base.html's shop name is a paragraph that looks like a title, so each page
   owns its own h1. These are the styles that used to be on that h1. */

.page-title,
.product-name {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
}

.prose h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 40px 0 12px;
}

.prose h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 28px 0 8px;
}

/* Present for a screen reader, absent to the eye. Used for a heading a page
   needs in its outline but would only repeat on screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Off-screen until focused, so a keyboard can jump the header. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    z-index: 10;

    &:focus {
        left: 0;
    }
}

/* A visible focus ring everywhere, since the shop is navigable by keyboard and
   the default one disappears against some of these backgrounds. */
:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* ----------------------------------------------------------- product page */

.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 24px;
}

.product-media {
    position: sticky;
    top: 24px;
}

.prod-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.product-category {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
    color: #666;
    margin: 0 0 8px;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.product-unit {
    color: #666;
    font-weight: 600;
}

.product-vat {
    color: #666;
    font-size: 0.9rem;
    margin: 4px 0 0;
}

.availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 20px 0 0;

    /* A dot as well as the wording, so availability is not carried by colour
       alone — which is a thing colour cannot do for every reader. */
    &::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: currentColor;
    }
}

.availability--yes {
    color: #0a6b3d;
}

.availability--low {
    color: #8a5200;
}

.availability--none {
    color: #b00020;
}

/* Buyable, but not on the shelf. Deliberately not the green of "Varastossa":
   it is good news with a date attached, and the wording carries the date. */
.availability--coming {
    color: #1f5c8b;
}

.product-description {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 20px 0 0;
}

.product-buy {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

.qty-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.product-buy .qty {
    width: 5.5ch;
}

.product-add {
    margin-left: 0;
}

.product-soldout {
    margin: 28px 0 0;
    padding: 16px 20px;
    border-radius: 10px;
    background: #f4f4f4;
    font-weight: 600;
}

/* The consumer information. A description list because that is what it is:
   each term and what it says for this product. */
.product-terms {
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid #ddd;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 24px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.product-terms dt {
    font-weight: 700;
}

.product-terms dd {
    margin: 0;
    color: #333;
}

/* ------------------------------------------------- information pages */

.prose {
    max-width: 65ch;
    line-height: 1.65;
}

.prose p {
    margin: 0 0 16px;
}

.info-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 24px;
    margin: 0 0 24px;
}

.info-list dt {
    font-weight: 700;
}

.info-list dd {
    margin: 0;
}

.footer-trader {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 800px) {
    .product {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .product-media {
        position: static;
    }

    .product-terms,
    .info-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .product-terms dd,
    .info-list dd {
        margin-bottom: 12px;
    }
}

/* On a narrow screen the buy button takes the width it can get, rather than
   leaving a stub of empty row beside it. */
@media (max-width: 560px) {
    .product-buy {
        gap: 10px;
    }

    .product-add {
        flex: 1 1 auto;
    }
}

/* Long unbroken values — an address, an email, a business ID — must wrap
   rather than push the page wider than the screen. */
.product-terms dd,
.info-list dd,
.footer-trader,
.prose {
    min-width: 0;
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------- cart page */

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 0;
}

.cart-table th {
    text-align: right;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    padding: 0 20px 8px;
    border-bottom: 1px solid #ddd;
}

.cart-table th:first-child {
    text-align: left;
}

.cart-table tbody tr {
    border-bottom: 1px solid #eee;
}

.cart-cell-image {
    width: 72px;
    padding: 12px 0 12px 0;
}

.cart-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.cart-prod-name a {
    color: inherit;
    text-decoration-color: #ccc;

    &:hover {
        text-decoration-color: #000;
    }
}

.cart-stock-warning {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #8a5200;
    margin-top: 4px;
}

/* Part of this row is here and part of it is not. The same weight as the
   over-stock warning beside it, in the blue that means "coming" rather than the
   amber that means "too many". */
.cart-stock-coming {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f5c8b;
    margin-top: 4px;
}

/* When the whole order goes out. One parcel per order, so this is the line that
   explains why a cart holding one back-ordered sticker waits for it. */
.cart-waiting {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    border: 2px solid #1f5c8b;
    color: #1f5c8b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cart-warning {
    margin: 24px 0 0;
    padding: 16px 20px;
    border-radius: 10px;
    border: 2px solid #8a5200;
    color: #8a5200;
    font-weight: 600;
}

/* The totals, and the terms that come with them. Kept to a column so the
   figures line up under one another and the eye can add them. */
.cart-summary {
    margin: 32px 0 0;
    margin-left: auto;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.cart-sums {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px 24px;
    margin: 0;
}

.cart-sums dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.cart-sums-total {
    font-size: 1.3rem;
    font-weight: 800;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.cart-vat {
    color: #666;
    font-size: 0.9rem;
    margin: 4px 0 0;
    text-align: right;
}

.cart-terms {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 16px 0 0;
}

.checkout-link {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    background: #000;
    color: #fff;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 1.3rem;
    margin-top: 20px;

    &:hover {
        background: #333;
    }
}

.cart-continue {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin-top: 12px;
}

.cart-empty {
    font-size: 1.2rem;
    margin: 40px 0;
    max-width: 420px;
}

@media (max-width: 700px) {
    /* A five-column table does not fit a phone. Each row becomes a card, with
       the column headings repeated per cell from data-label — which is why
       those attributes are in the markup. */
    .cart-table thead {
        display: none;
    }

    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td {
        display: block;
        width: auto;
    }

    .cart-table tr {
        position: relative;
        padding: 16px 0 16px 88px;
        min-height: 72px;
    }

    .cart-cell-image {
        position: absolute;
        left: 0;
        top: 16px;
        padding: 0;
    }

    .cart-table td {
        text-align: left;
        padding: 0 0 6px;
    }

    .cart-prod-price::before,
    .cart-prod-total::before {
        content: attr(data-label) ": ";
        color: #666;
    }

    .cart-prod-total {
        font-weight: 700;
    }

    /* The row is a card now, so its controls line up with the rest of it
       rather than staying pinned to a column edge that no longer exists. */
    .cart-edit {
        justify-content: flex-start;
        margin: 4px 0 8px;
    }

    .cart-summary {
        max-width: none;
    }
}

/* ------------------------------------------- model withdrawal form

   The wording is the Consumer Rights Directive's own; this makes it look like
   the form it is, with room to write in on a printout. */
.withdrawal-form {
    margin: 32px 0;
    padding: 28px 32px;
    border: 2px solid #000;
    border-radius: 12px;
}

.withdrawal-form h2 {
    margin-top: 0;
}

.withdrawal-note {
    color: #666;
    font-size: 0.9rem;
}

.withdrawal-fields {
    margin: 24px 0;
}

.withdrawal-fields dt {
    font-weight: 600;
    margin-top: 20px;
}

.withdrawal-fields dd {
    margin: 6px 0 0;
}

/* A line to write on, for anyone who prints this. */
.withdrawal-blank {
    border-bottom: 1px solid #999;
    min-height: 2.2rem;
}

.withdrawal-mark {
    color: #666;
}

.prose ul {
    margin: 0 0 16px;
    padding-left: 22px;
    line-height: 1.65;
}

.prose li {
    margin-bottom: 8px;
}

.prose code {
    background: #f4f4f4;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
}

@media print {

    /* Printing the withdrawal form should give a form, not a web page. */
    .site-title,
    .head,
    .footer,
    .skip-link {
        display: none;
    }

    .withdrawal-form {
        border: none;
        padding: 0;
    }
}

/* ---------------------------------------------------------- checkout page */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 24px;
}

/* The order comes first in the markup and is placed here into the second
   column, rather than the form being lifted past it with `order`. Two columns
   read side by side have no one true sequence; one column does, and that is
   the case the markup is written for. */
.checkout-layout > .checkout {
    grid-column: 1;
    grid-row: 1;
}

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

.checkout-heading {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 32px 0 16px;
}

.checkout-heading:first-child {
    margin-top: 0;
}

/* Where the shop delivers, beside the fields where an address is typed. Sits
   between the heading and the first field, so it is read before anything is
   filled in rather than after. */
.checkout-area {
    margin: -8px 0 18px;
    font-size: 0.9rem;
    font-weight: 600;
}

.field {
    margin-bottom: 18px;
}

.field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 10px 12px;
    border: 1px solid #333;
    border-radius: 5px;
    background: #fff;
}

.field-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 16px;
}

.field-hint {
    color: #666;
    font-size: 0.85rem;
    margin: 6px 0 0;
}

/* An invalid field is marked by its border, its label and its message, not by
   colour alone — and the message is tied to the input with aria-describedby so
   it is read out with it. */
.field--invalid input {
    border-color: #b00020;
    border-width: 2px;
}

.field-error {
    color: #b00020;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 6px 0 0;

    &::before {
        content: "⚠ ";
    }
}

.checkout-error {
    margin: 24px 0 0;
    padding: 16px 20px;
    border-radius: 10px;
    border: 2px solid #b00020;
    color: #b00020;
    font-weight: 600;
}

.checkout-confirm-block {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #ddd;
}

.checkout-obligation {
    margin: 0 0 16px;
    line-height: 1.5;
}

.checkout-confirm {
    width: 100%;
    margin-left: 0;
    font-size: 1.2rem;
    padding: 16px 24px;
}

.checkout-smallprint {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 14px 0 0;
}

/* The order, beside the form rather than above it, so what is being bought and
   what it costs are both in view at the moment of ordering. */
.checkout-summary {
    position: sticky;
    top: 24px;
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
}

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

.checkout-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.checkout-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.checkout-line-text {
    min-width: 0;
    flex: 1 1 auto;
}

.checkout-line-text a {
    color: inherit;
    font-weight: 600;
    text-decoration-color: #ccc;
}

.checkout-line-detail {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-top: 2px;
}

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

.checkout-terms {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 16px 0 0;
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* One column, and the markup is already in the order it should be read:
       the order, then the form. Nothing is moved past anything, so what a
       keyboard visits is what the eye reads. */
    .checkout-layout {
        display: flex;
        flex-direction: column;
    }

    .checkout-summary {
        position: static;
    }
}

@media (max-width: 480px) {
    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The ways of paying, listed on the cart so they are known before the checkout
   asks for anything personal. */
.cart-methods {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.cart-methods-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    margin: 0 0 12px;
}

.cart-methods-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.cart-method {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.cart-methods-note,
.methods-note {
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 12px 0 0;
}

.methods-note {
    margin: 0 0 12px;
}

/* How many of this product are already in the basket. Shown on the front page
   tile and on the product page, because coming back to something and not being
   told you already have three of it is how a fourth gets bought. */
.item-media {
    position: relative;
}

.in-cart-badge {
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.item-media .in-cart-badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

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

.product-in-cart a {
    font-size: 0.95rem;
}

/* The postage line on an order, quieter than the goods above it. */
/* ---- The order page ----------------------------------------------------
   A receipt. It answers, in order: did it work, what did I order, when will it
   come, where is it going. Quieter than the shop's other pages on purpose —
   the buying is over, and what is left is reassurance. */

.order-status {
    border: 1px solid #ddd;
    border-left: 6px solid #666;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 8px 0 40px;
}

/* The state, carried by the stripe. Never by the stripe alone: the heading and
   the message under it say the same thing in words. */
.order-status--paid {
    border-left-color: #0a6b3d;
}

.order-status--waiting {
    border-left-color: #8a5200;
}

.order-status--dead {
    border-left-color: #b00020;
}

.order-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
}

.order-message {
    margin: 8px 0 0;
    font-size: 1.05rem;
}

/* Reference, date and total across the top: the three things somebody quotes
   back at you in an email about this order. */
.order-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 24px 0 0;
}

.order-facts dt {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
}

.order-facts dd {
    margin: 2px 0 0;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Monospaced because it gets read aloud, copied and typed back in. */
.order-reference {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
}

.order-pay .checkout-link {
    max-width: 420px;
}

/* What happens next. One of these at a time, and none at all for an order that
   is not going to happen. */
.order-next {
    border-radius: 12px;
    background: #f6f6f6;
    padding: 20px 24px;
    margin: 0 0 40px;
}

.order-next h2 {
    font-size: 1.1rem;
    margin: 0;
}

.order-next p {
    margin: 6px 0 0;
}

.order-next--sent {
    background: #eef6f1;
}

.order-next--waiting {
    background: #eef3f8;
}

.order-heading {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    margin: 40px 0 0;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 0;
}

.order-table thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    font-weight: 700;
    text-align: right;
    padding: 0 0 8px;
    border-bottom: 1px solid #ddd;
}

.order-table thead th:first-child {
    text-align: left;
}

.order-table tbody tr {
    border-bottom: 1px solid #eee;
}

.order-table th,
.order-table td {
    padding: 14px 0;
}

.order-prod {
    text-align: left;
    font-weight: 600;
}

.order-num {
    text-align: right;
    padding-left: 20px;
}

.order-shipping-row .order-prod {
    font-weight: 400;
    color: #666;
}

.order-total-row th,
.order-total-row td {
    border-top: 2px solid #222;
    padding-top: 16px;
}

.order-total {
    font-size: 1.2rem;
    font-weight: 800;
}

/* The address and the withdrawal right side by side where there is room: two
   short blocks, and stacking them leaves the page trailing off. */
.order-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 48px;
    margin-top: 8px;
}

.order-address {
    margin: 16px 0 0;
    line-height: 1.7;
}

.order-email {
    color: #666;
    font-size: 0.9rem;
}

.order-actions {
    margin-top: 48px;
}

@media (max-width: 700px) {
    /* Four columns do not fit a phone. Each row becomes a card, with the
       column heading repeated per cell from data-label — the same treatment
       the cart's table gets, for the same reason. */
    .order-table thead {
        display: none;
    }

    .order-table,
    .order-table tbody,
    .order-table tfoot,
    .order-table tr,
    .order-table th,
    .order-table td {
        display: block;
        width: auto;
    }

    .order-table tr {
        padding: 12px 0;
    }

    .order-table th,
    .order-table td {
        padding: 0;
        text-align: left;
    }

    .order-num:empty {
        display: none;
    }

    .order-num::before {
        content: attr(data-label) ": ";
        color: #666;
    }

    .order-prod {
        font-size: 1.05rem;
        padding-bottom: 4px;
    }

    .order-status {
        padding: 20px;
    }

    .order-facts {
        gap: 12px 28px;
    }
}

.order-vat {
    color: #666;
    font-size: 0.9rem;
    margin: 4px 0 0;
    text-align: right;
}

/* The category, on the cart and checkout lines as it is on the front page
   tiles: quieter than the name it sits under. */
.cart-prod-category,
.checkout-line-category {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

/* Once a product is in the cart the row is not a call to action any more, it
   is an adjustment — so it takes the cart's own button size rather than the
   large one "Lisää ostoskoriin" gets. It also has to fit two buttons. */
.product-update {
    margin-left: 0;
    padding: 8px 16px;
    font-size: 1.1rem;
}

/* Where the card number goes. Quiet, next to the fields it is about. */
.card-assurance {
    grid-column: 1 / -1;
    margin: 0;
    color: #666;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* The three things a customer wants to know before they open anything: what
   delivery costs, when it comes, and what happens if they change their mind. */
.terms-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 0 8px;
    padding: 14px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 0.95rem;
}

.terms-strip li {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A mark before each, so they read as a list of assurances rather than as a
   run-on sentence. Decorative, so it is not announced. */
.terms-strip li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0a6b3d;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .terms-strip {
        gap: 6px 20px;
        font-size: 0.9rem;
    }
}