.shop-intro { margin-bottom: 1rem; }

.shop-category {
    margin: 1.75rem 0 .75rem;
    color: var(--bottle-700);
    font-size: 1.15rem;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.shop-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.shop-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.shop-card-placeholder {
    height: 180px;
    background: linear-gradient(135deg, var(--bottle-100), var(--cream));
}

.shop-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.shop-card-body h3 {
    font-size: 1rem;
    color: var(--bottle-800);
}

.shop-card-body p {
    font-size: .9rem;
    color: var(--muted);
    flex: 1;
}

/* Scoped under .shop-card-body so it outweighs the `.shop-card-body p`
   muted style without !important. */
.shop-card-body .shop-price {
    font-weight: 700;
    color: var(--bottle-800);
    font-size: 1.05rem;
}

.shop-card--out {
    opacity: .75;
}

.shop-card--out img {
    filter: grayscale(.4);
}

/* ── Ordering ────────────────────────────────────────────────────────────
   Only rendered when shop_orders_enabled is on. Everything above still
   describes the catalogue-only shop, which is what most visitors see. */

.shop-basket-bar { margin: .5rem 0 1rem; }

/* The add control sits in .shop-card-body BELOW the image anchor — never
   inside it, which would swallow the lightbox link and the no-JS route to
   the full photo. */
.shop-add {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .25rem;
}

/* Same engraved-plate role as .form-group label, scoped here because a shop
   card is not a form layout and should not inherit its 1rem bottom margin. */
.shop-add-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
}

.shop-add select { width: 100%; }

.shop-add-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* Wide enough for two digits plus the spinner, so the button keeps the rest. */
.shop-add-row input[type="number"] { width: 4.5rem; }
.shop-add-row .btn { flex: 1; }

/* ── Basket ──────────────────────────────────────────────────────────── */

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

/* Money and quantities line up column-wise; proportional digits make a
   right-aligned column of prices look ragged. */
.cart-num, .cart-qty input { font-variant-numeric: tabular-nums; }

.cart-qty {
    display: flex;
    gap: .4rem;
    align-items: center;
}
.cart-qty input { width: 4.5rem; }

.cart-line-total { font-weight: 700; color: var(--ink); }

.cart-total-label,
.cart-total {
    font-family: var(--font-display);
    color: var(--ink);
}
.cart-total { font-size: 1.25rem; }

.cart-note {
    margin-top: .75rem;
    font-size: .85rem;
    color: var(--muted);
    max-width: 68ch;
}

.cart-collect {
    margin-top: 2rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
    max-width: 46rem;
}
.cart-collect h2 { font-size: 1.15rem; margin-bottom: .25rem; }
.cart-collect p { font-size: .92rem; color: var(--muted); }

.cart-who {
    margin-top: 1rem;
    font-size: .93rem;
    color: var(--muted);
}
.cart-who strong { color: var(--ink); }

/* ── Checkout ────────────────────────────────────────────────────────── */

.checkout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}
.checkout-col { display: flex; flex-direction: column; gap: 1.25rem; }

.checkout-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}
.checkout-card h2 { font-size: 1.15rem; color: var(--primary); margin-bottom: .75rem; }

.checkout-signed {
    padding: .7rem .85rem;
    background: var(--green-pale);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .93rem;
    color: var(--ink);
}

.checkout-steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; font-size: .93rem; }

.checkout-lines { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.checkout-lines li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .95rem; }
.checkout-qty { color: var(--muted); }
.checkout-money { white-space: nowrap; font-variant-numeric: tabular-nums; }

.checkout-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
}
.checkout-total-value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* Amber, not --jack: jack means a game is live right now and may not be
   borrowed for anything else. This is the existing .chip--soon amber. */
.checkout-deadline {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    margin-top: 1rem;
    padding: .7rem .85rem;
    background: #fff3cd;
    color: #856404;
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

.checkout-place { width: 100%; margin-top: 1.25rem; }
.checkout-note { margin-top: .6rem; font-size: .85rem; color: var(--muted); text-align: center; }
.checkout-back { text-align: center; font-size: .9rem; }

/* ── One order ───────────────────────────────────────────────────────── */

.container-order { max-width: 44rem; }
.order-kicker { color: var(--muted); margin-top: 1.5rem; }

/* The one dark object on the page: a thing handed to you, not a section of a
   page. NO BRASS anywhere here — brass means "this person won". */
.order-slip {
    background: var(--board);
    color: var(--cream);
    border-radius: var(--radius);
    padding: 1.35rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1rem 0;
}
.order-slip .label { color: rgba(var(--cream-rgb), .62); display: block; margin-bottom: .3rem; }
.order-slip-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.order-slip-field--right { text-align: right; }

.order-ref {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}
.order-amount {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.order-card, .order-collect {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
}
.order-card h2, .order-collect h2 { font-size: 1.1rem; color: var(--primary); margin-bottom: .6rem; }
.order-bank { font-size: .95rem; }
.order-bank-note, .order-placed { margin-top: .7rem; font-size: .9rem; color: var(--muted); }
.order-collect { background: var(--cream); box-shadow: none; }
.order-cancel { margin: 1.5rem 0; }

.order-number { font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.order-due { display: block; font-size: .82rem; color: var(--muted); margin-top: .2rem; }

/* Cancelled: the existing closed-badge red. Its own chip rather than reusing
   .badge-closed so the order states all read from one row of tokens. */
.chip--cancelled { background: #f8d7da; color: #721c24; }