/* The public shop's own pages (cart, checkout, product not found) — the frame around the server-priced summary and the
   checkout form. Colours come from the active theme's published tokens (MainLayout), so the pages follow the website's theme.
   Every class starts with "shop-page" / "shop-btn" / "shop-note" / "shop-toast"; nothing outside these pages is styled. */

.shop-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(6rem, 4vw + 5rem, 7.5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 4rem);
    min-width: 0;
    color: var(--navr-theme-text, inherit);
}

.shop-page__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 3vw + .5rem, 2.25rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

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

.shop-page__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; min-width: 0; }
.shop-page__main, .shop-page__aside { min-width: 0; display: grid; gap: 1rem; }

.shop-page__card {
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    background: color-mix(in srgb, currentColor 2%, transparent);
    min-width: 0;
}

.shop-page__card > h2 { margin: 0 0 .9rem; font-size: 1.15rem; }

@media (min-width: 900px) {
    .shop-page__grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); }
    .shop-page__aside { position: sticky; top: 6.5rem; }
}

/* Stacked (phone / tablet): the checkout shows what is being paid for before the form. */
@media (max-width: 899.98px) {
    .shop-page__grid--checkout .shop-page__aside { order: -1; }
}

.shop-page--center { display: grid; justify-items: center; text-align: center; gap: .9rem; }
.shop-page--center p { margin: 0; max-width: 52ch; opacity: .8; line-height: 1.6; }
.shop-page--loading { display: flex; align-items: center; justify-content: center; min-height: 50vh; }

.shop-page__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--navr-theme-primary, #1f5130) 20%, transparent);
    border-top-color: var(--navr-theme-primary, #1f5130);
    animation: shop-page-spin .8s linear infinite;
}

@keyframes shop-page-spin { to { transform: rotate(360deg); } }

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

.shop-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 1.25rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--navr-theme-primary, #1f5130);
    color: var(--navr-theme-on-primary, #fff);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.shop-btn:hover { filter: brightness(1.07); }
.shop-btn:disabled, .shop-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
.shop-btn:focus-visible { outline: 3px solid var(--navr-gold, #c9a54a); outline-offset: 2px; }
.shop-btn--block { width: 100%; }
.shop-page__fine { margin: .75rem 0; font-size: .84rem; opacity: .7; line-height: 1.5; }
.shop-page__card > .shop-note { margin-bottom: .9rem; }
.shop-btn--ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }

.shop-note {
    margin: 0;
    padding: .7rem .9rem;
    border-radius: 12px;
    font-size: .92rem;
    line-height: 1.55;
    border: 1px solid color-mix(in srgb, var(--navr-theme-primary, #1f5130) 30%, transparent);
    background: color-mix(in srgb, var(--navr-theme-primary, #1f5130) 7%, transparent);
}

.shop-note--error { border-color: color-mix(in srgb, #b3261e 45%, transparent); background: color-mix(in srgb, #b3261e 8%, transparent); }

/* The "added to your cart" confirmation, announced politely and shown for a few seconds. */
.shop-toast {
    position: fixed;
    z-index: 1200;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .7rem .8rem .7rem 1rem;
    border-radius: 14px;
    background: var(--navr-theme-text, #1d2a22);
    color: var(--navr-theme-surface, #fff);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45);
    font-size: .92rem;
}

.shop-toast a { color: inherit; font-weight: 800; white-space: nowrap; }
.shop-toast:empty { display: none; }

.shop-done { display: grid; gap: .6rem; justify-items: center; text-align: center; }
.shop-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--navr-theme-primary, #1f5130);
    color: var(--navr-theme-on-primary, #fff);
    font-size: 1.5rem;
}

.shop-done__number { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: .03em; overflow-wrap: anywhere; }
.shop-done dl { display: grid; gap: .4rem; margin: .4rem 0; width: min(420px, 100%); }
.shop-done dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.shop-done dd { margin: 0; font-weight: 700; }

/* The shared checkout (ShopCheckout) — on the /checkout page and inside the checkout dialog. In the dialog the summary does not
   stick below the site header (the dialog body is its own scroll area) and the loading state is shorter. */
.shop-co { min-width: 0; }
.shop-co *, .shop-co *::before, .shop-co *::after { box-sizing: border-box; }
.shop-co--dialog .shop-page--loading { min-height: 30vh; }
.shop-co--dialog .shop-page__aside { position: static; top: auto; }
.shop-co--dialog .shop-done { padding-block: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    .shop-page__spinner { animation-duration: 2.4s; }
}

/* ── Order confirmation: Download PDF / Print (shop checkout and header Order Now; both use the same PDF) ── */
.navr-receipt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }