/* ==========================================================================
   QPIX — Kassa bundle
   Loaded only on /kassa/ via $includeKassa in head.php.
   Email-first checkout step 1 (Uppgifter), with pending Leverans/Betalning.
   ========================================================================== */

/* Neutralize global button margins/padding leaking into kassa buttons. */
.kassa-page button { margin: 0; }

/* The shared .shop-feedback toast has zero height when closed (grid-row
   collapse). When open on the kassa page it needs to breathe above the
   step cards below — otherwise it butts right into the #1 Uppgifter card. */
#kassaFeedback.is-open { margin-bottom: 1.3rem; }

/* Two-column layout */
.kassa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 3rem;
    align-items: start;
}
.kassa-grid__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kassa-grid__aside { position: sticky; top: calc(32px + 60px); }

/* Step cards */
.kassa-step {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.kassa-step--active {
    border-color: var(--text);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.kassa-step__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.4rem;
}
.kassa-step--active .kassa-step__head {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border-light);
}
.kassa-step__num {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.kassa-step--active .kassa-step__num {
    background: var(--text);
    color: var(--text-inverse);
    border-color: var(--text);
}
.kassa-step__title {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text);
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
}
.kassa-step--pending .kassa-step__title { color: var(--text-faint); }
.kassa-step--pending .kassa-step__body { display: none; }
.kassa-step__hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0; /* cancel global h2+* margin so flex align-items:center actually centers it */
}
.kassa-step__body { padding: 1.6rem 1.4rem 1.8rem; }

/* Done state — completed step stays expanded, just swaps the digit for a
   checkmark and keeps the title in normal text colour so it scans as
   "already handled" rather than "upcoming". */
.kassa-step--done .kassa-step__num {
    background: var(--text);
    color: var(--text-inverse);
    border-color: var(--text);
}
.kassa-step--done .kassa-step__num svg {
    width: 14px; height: 14px;
}
.kassa-step--done .kassa-step__title { color: var(--text); }

/* Collapse the active controls once the step is done — only the
   captured-email strip (with its Ändra button) stays visible inside the
   step body. The guest and login forms keep their values in the DOM so
   the user's input isn't lost if they click Ändra, they're just hidden. */
.kassa-step--done .kassa-substage { display: none; }
/* Both guest and login substages get the same breathing room below the email chip. */
.kassa-substage { margin-top: 0.5rem; }
/* Guest form's trailing .kassa-collapsible adds an implicit ~14px flex-gap
   above its alert; match that visual distance in the login form. */
.kassa-substage[data-substage="login"] .kassa-alert { margin-top: 24px; }
.kassa-substage[data-substage="forgot"] .kassa-alert { margin-top: 16px; margin-bottom: 20px; }

/* Delivery method picker — stacked radio cards. Checked state uses an
   inset box-shadow instead of a wider border so the layout doesn't jump. */
.kassa-delivery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.kassa-delivery__opt {
    display: block;
    position: relative;
    cursor: pointer;
}
.kassa-delivery__opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.kassa-delivery__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.kassa-delivery__opt:hover .kassa-delivery__card {
    border-color: var(--text-muted);
}
.kassa-delivery__opt input:checked + .kassa-delivery__card {
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text);
}
.kassa-delivery__opt input:focus-visible + .kassa-delivery__card {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.kassa-delivery__card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.kassa-delivery__title {
    font-weight: 600;
    color: var(--text);
}
.kassa-delivery__price {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kassa-delivery__sub {
    font-size: 0.86rem;
    color: var(--text-muted);
}

/* Panel containers below the picker — only the selected method's panel
   is [hidden]-toggled by JS. */
.kassa-delivery-panel { margin-top: 16px; }
.kassa-delivery-panel[hidden] { display: none; }

/* Step 3 Betalning — Stripe Payment Element container + status lines.
   The loading/error sit outside the form so they can show while the
   Payment Element is still being prepared. */
.kassa-payment-loading {
    font-size: 0.92rem;
    color: var(--text-muted);
    padding: 1rem 0;
}
.kassa-payment-loading[hidden] { display: none; }
.kassa-payment-element { margin-bottom: 1rem; }
.kassa-payment-error {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--accent-subtle);
    border: 1px solid rgba(139, 26, 26, 0.16);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.88rem;
}
.kassa-payment-error[hidden] { display: none; }

/* "Betala i butik" — calm three-line info block paired with a total
   label beside the Beställ button. Only rendered when delivery is
   pickup and the customer picks the in-butik option. */
.kassa-ibutik {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    padding: 18px 20px;
}
.kassa-ibutik__title {
    margin: 0 0 10px;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.kassa-ibutik__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kassa-ibutik__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.45;
}
.kassa-ibutik__list svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    margin-top: 3px;
}

/* Quiet total label that sits opposite the Beställ button on the
   in-butik formbar — distinct from the sidebar total which is the
   page's main number. */
.kassa-formbar__total {
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.kassa-formbar__total strong {
    color: var(--text);
    font-weight: 800;
    margin-left: 0.25rem;
}

/* Form primitives */
.kassa-fields { display: flex; flex-direction: column; gap: 0.9rem; }
.kassa-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.kassa-field-row--postort { grid-template-columns: 140px 1fr; }
.kassa-field { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.kassa-field[hidden] { display: none; }
.kassa-field__label {
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.kassa-field__input {
    height: 44px;
    padding: 0 0.9rem;
    font-family: "Familjen Grotesk", "Familjen Grotesk Fallback", sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.kassa-field__input::placeholder { color: var(--text-faint); }
.kassa-field__input:focus { border-color: var(--text); outline: none; }
/* Secondary utility helper — unified primitive for step-1 helpers ("Glömt
   lösenord?", "Fel e-post? Ändra", "Har du redan konto? Ändra e-post").
   Reuses the .kassa-detected__change typographic vocabulary so the two
   back-to-email actions share a visual language with the email-chip Ändra. */
.kassa-helper {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.kassa-helper__text {
    font-family: "Familjen Grotesk", "Familjen Grotesk Fallback", sans-serif;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.kassa-helper__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kassa-helper__action:hover {
    background: var(--bg-light);
    color: var(--text);
    border-color: var(--border);
}
.kassa-helper__action:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.kassa-helper--standalone { margin-top: 10px; }

/* Hero email field */
.kassa-email-hero { display: flex; flex-direction: column; gap: 0.7rem; }
.kassa-email-hero__label {
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.kassa-email-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: stretch;
}
.kassa-email-hero__input {
    height: 56px;
    padding: 0 1rem;
    font-family: "Familjen Grotesk", "Familjen Grotesk Fallback", sans-serif;
    font-size: 1.05rem;
    color: var(--text);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s;
    box-sizing: border-box;
    min-width: 0;
}
.kassa-email-hero__input::placeholder { color: var(--text-faint); }
.kassa-email-hero__input:focus { border-color: var(--text); outline: none; }
.kassa-email-hero__input.is-invalid { border-color: var(--accent-color); }

/* Inline validation — red border matching the email-hero's is-invalid pattern. */
.kassa-field__input.is-invalid { border-color: var(--accent-color); }

/* Inline alert — sits at the bottom of a form block, companion to is-invalid
   borders. One base class, optional --compact for tight slots (email hero). */
.kassa-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    margin-top: 12px;
    background: var(--accent-subtle);
    border: 1px solid rgba(139, 26, 26, 0.16);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.45;
    animation: kassaAlertIn 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.kassa-alert[hidden] { display: none; }
.kassa-alert__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--accent-color);
    margin-top: 1px;
}
.kassa-alert__body { min-width: 0; flex: 1; }
.kassa-alert__title {
    display: block;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    overflow-wrap: break-word;
}
.kassa-alert__detail {
    display: block;
    margin-top: 2px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}
.kassa-alert__detail a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kassa-alert--compact {
    padding: 0.65rem 0.85rem;
    margin-top: 6px;
    font-size: 0.86rem;
}
.kassa-alert--compact .kassa-alert__icon { width: 16px; height: 16px; }

@keyframes kassaAlertIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .kassa-alert { animation: none; }
}
.kassa-email-hero__submit {
    height: 56px;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent-color);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.kassa-email-hero__submit:hover { background: var(--accent-light); }
.kassa-email-hero__submit svg { width: 16px; height: 16px; }
.kassa-email-hero__intro {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}
/* "Har du redan ett konto?" prompt above the form */
.kassa-login-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.kassa-login-prompt__action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent-color);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.kassa-login-prompt__action:hover { color: var(--accent-light); }

/* Email chip — shows captured email above the form */
.kassa-detected {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}
.kassa-detected[hidden] { display: none; }
.kassa-detected__icon {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: var(--text-inverse);
    border-radius: 50%;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;
}
.kassa-detected__text { flex: 1; min-width: 0; font-size: 0.92rem; }
.kassa-detected__text strong {
    display: block;
    color: var(--text);
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}
.kassa-detected__text span {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.kassa-detected__change {
    background: none;
    border: none;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.kassa-detected__change:hover { background: var(--bg-light); color: var(--text); }

/* Segmented (Privatperson / Företag) */
.kassa-seg {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}
.kassa-seg__opt {
    flex: 1;
    margin: 0;
    padding: 0 0.9rem;
    height: 44px;
    background: var(--bg);
    border: none;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.kassa-seg__opt:last-child { border-right: none; }
.kassa-seg__opt:hover { background: var(--bg-light); color: var(--text); }
.kassa-seg__opt[aria-pressed="true"] {
    background: var(--bg-light);
    color: var(--text);
    font-weight: 800;
}
.kassa-seg__opt:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

/* Checkbox card (save-as-account) */
.kassa-check {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    margin-top: 0.7rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.kassa-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.kassa-check input[type="checkbox"]:checked {
    background: var(--text);
    border-color: var(--text);
}
.kassa-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.kassa-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.kassa-check__body { min-width: 0; }
.kassa-check__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}
.kassa-check__desc {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Collapsible (password reveal under the checkbox) */
.kassa-collapsible {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms cubic-bezier(0.25, 1, 0.5, 1);
}
.kassa-collapsible.is-open { grid-template-rows: 1fr; }
.kassa-collapsible__inner { overflow: hidden; min-height: 0; }
.kassa-collapsible__pad { padding-top: 0.9rem; }

/* Stage transitions (email → guest / login swap) */
.kassa-stage {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    opacity: 1;
    transition: opacity 200ms ease-out;
}
.kassa-stage[hidden] { display: none; }
.kassa-stage.is-entering { opacity: 0; }

/* Primary button (form submits other than the email hero) */
.kassa-btn-primary {
    height: 48px;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent-color);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.kassa-btn-primary:hover { background: var(--accent-light); }
.kassa-btn-primary svg { width: 16px; height: 16px; }
.kassa-btn-primary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.kassa-formbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
}
.kassa-formbar[hidden] { display: none; }
/* Inline notice — shown after a stub submit, "Kommer i nästa steg" */
.kassa-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-top: 1rem;
}
.kassa-notice[hidden] { display: none; }
.kassa-notice svg {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Order summary */
.kassa-summary {
    background: var(--bg-light);
    padding: 1.5rem 1.6rem 1.8rem;
    border-radius: var(--radius-md);
}
.kassa-summary__title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin: 0 0 1rem;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
}
.kassa-summary__items {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.kassa-summary__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
}
.kassa-summary__item-thumb {
    width: 48px; height: 48px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    position: relative;
    flex-shrink: 0;
}
.kassa-summary__item-thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}
.kassa-summary__item-thumb svg { width: 22px; height: 22px; opacity: 0.7; }
.kassa-summary__item-qty {
    position: absolute;
    top: -6px; right: -6px;
    width: 20px; height: 20px;
    padding: 0;
    background: var(--text);
    color: var(--text-inverse);
    border-radius: 50%;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    text-indent: -1px;
}
.kassa-summary__item-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.kassa-summary__item-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.kassa-summary__item-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kassa-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.92rem;
}
.kassa-summary__row[hidden] { display: none; }
.kassa-summary__row:first-of-type {
    font-size: 0.92rem;
    color: var(--text-secondary);
}
.kassa-summary__row-value {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 600;
}
.kassa-summary__row-note {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-muted);
    font-weight: 500;
}
.kassa-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    margin-top: 0.7rem;
    border-top: 1px solid var(--border);
}
.kassa-summary__total-label {
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.kassa-summary__total-value {
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kassa-summary__vat {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 0.3rem;
}
.kassa-summary__secure {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    width: 100%;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.kassa-summary__secure svg {
    width: 14px; height: 14px;
    color: var(--text-tertiary);
}

/* Mobile */
@media (max-width: 900px) {
    .kassa-page { padding: 24px 16px 60px; }
    .kassa-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .kassa-grid__aside { position: static; order: -1; }
    .kassa-summary { padding: 1.2rem 1.2rem 1.4rem; }
    .kassa-summary__total-value { font-size: 1.5rem; }
    .kassa-field-row { grid-template-columns: 1fr; }
    .kassa-field-row--postort { grid-template-columns: 140px 1fr; }
    .kassa-formbar { flex-direction: column-reverse; align-items: stretch; }
    .kassa-btn-primary { width: 100%; }
    .kassa-email-hero__row { grid-template-columns: 1fr; }
    .kassa-email-hero__submit { height: 48px; }
}

@media (max-width: 480px) {
    .kassa-field-row--postort { grid-template-columns: 1fr; }
    .kassa-step__head { padding: 0.9rem 1.1rem; gap: 0.75rem; }
    .kassa-step__body { padding: 1.3rem 1.1rem 1.5rem; }
    .kassa-email-hero__input { height: 52px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kassa-stage, .kassa-collapsible { transition: none; }
}

/* ==========================================================================
   /kassa/tack/ — archive-header framed thank-you (success + failure states)
   ========================================================================== */

.tack-col { max-width: 640px; }

.arkiv-stack {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

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

.tack-support-line {
    margin-top: 1.6rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}
.tack-support-line a {
    color: var(--accent-color);
    font-weight: 600;
    text-underline-offset: 2px;
}