/*
 * The Shop.
 *
 * 🚨 This lives HERE, not in core's convoro.css. An extension is installed on
 * top of a core release that shipped before it existed, so styles left in core
 * would arrive with the NEXT core update — which means every customer who
 * installs the shop first sees an unstyled shop, and the operator has no way to
 * tell that from a broken install. `StylesheetContractTest` says the same thing
 * from the other side: extensions/ is deliberately not scanned because an
 * extension is expected to paint its own classes.
 *
 * Served through Controllers/Front/AssetController from a filename allowlist —
 * `extensions/` sits above the document root, so there is no static route to it.
 */

/*
 * A page title with one action beside it. The action sits on the baseline of
 * the title rather than above it, so the heading still reads as the heading.
 */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-head .page-title { margin-bottom: 1rem; }

/* ---- the shop ------------------------------------------------------------ */

/*
 * A shop laid out like the rest of the site rather than like a shop: the same
 * panels, the same type. A storefront that arrives looking like a different
 * product is a storefront people are wary of typing a card into.
 */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.9rem;
}

.shop-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg);
}

.shop-card-title { font-weight: 600; }
.shop-card-price { font-size: 1.05rem; }
.shop-card-kind { margin: 0; font-size: 0.8rem; color: var(--c-text-muted); }

.shop-price { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.8rem; }

.shop-add { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }

/* ---- the basket ---- */

.cart-lines { display: flex; flex-direction: column; }

/*
 * 🚨 The name takes the slack and the money holds its column. A total that
 * moves left and right as titles change length is a total people re-read to be
 * sure of.
 */
.cart-line {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--c-border);
}

.cart-line:last-child { border-bottom: 0; }
.cart-line-title { flex: 1; min-width: 0; }
.cart-line-total { margin-left: auto; font-weight: 600; white-space: nowrap; }

.cart-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.cart-total { margin-left: auto; font-size: 1.05rem; white-space: nowrap; }

.checkout-form { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; }

.checkout-address {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.checkout-address legend { padding: 0 0.4rem; font-weight: 600; }

/* A note that is a refusal rather than an aside. */
.panel-note.is-problem { color: var(--c-danger); }

/*
 * 🚨 Work to do is not a problem. A seller with a parcel to post has nothing
 * wrong with their account, and painting that red trains people to ignore the
 * colour that means something actually broke.
 */
/* Something went right, and worth saying once. */
.panel-note.is-good { color: var(--c-success); }

.panel-note.is-action {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius);
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary-border);
    color: var(--c-text);
    font-weight: 600;
}

@media (max-width: 640px) {
    /* The money goes under the name rather than squeezing it to three words. */
    .cart-line { flex-wrap: wrap; }
    .cart-line-title { flex: 1 1 100%; }
}

/* The confirmation before paying: what is being charged, and where it goes. */
.checkout-summary {
    margin: 1.2rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.checkout-address-shown { margin: 0; line-height: 1.6; }
.checkout-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------------------------------------------------- the seller's side ---- */

/*
 * A sale is a card rather than a table row: the thing a seller acts on is an
 * address and a button, and neither fits a column. The ones still owed a parcel
 * carry a rail so the list can be scanned for work without reading it.
 */
.sales-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }

.sale {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sale.is-awaiting { border-left: 3px solid var(--c-primary); }

.sale-head { display: flex; align-items: baseline; gap: 0.8rem; }
.sale-title { font-weight: 600; flex: 1; min-width: 0; }
.sale-total { margin-left: auto; font-weight: 600; white-space: nowrap; }

.sale-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

.sale-address {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius);
    background: var(--c-hover);
    font-size: 0.92rem;
    line-height: 1.5;
}

.sale-address-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    margin-bottom: 0.25rem;
}

.sale-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.sale-posted { font-size: 0.85rem; color: var(--c-text-muted); }

/*
 * What an order is doing, as a word rather than a column value. Paid and
 * refunded are the two a reader looks for, so they are the two that carry
 * colour; the rest stay quiet on purpose.
 */
.order-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: var(--c-hover);
    color: var(--c-text-muted);
    white-space: nowrap;
}

.order-status.is-paid,
.order-status.is-fulfilled,
.order-status.is-shipped { color: var(--c-success); }

.order-status.is-refunded,
.order-status.is-cancelled { color: var(--c-danger); }

.order-status.is-placed { color: var(--c-text-muted); }

@media (max-width: 640px) {
    .sale-head { flex-wrap: wrap; }
    .sale-title { flex: 1 1 100%; }
}