/* ==================================================================
   SHOP — the wholesale catalogue (Phase 8A)

   Reuses the site's tokens (--c-gold, --c-ink, --c-grey-line, --radius…)
   rather than inventing a second palette. A wholesale page that looks like a
   different website is a wholesale page nobody trusts.
   ================================================================== */

/* ---------- Layout: filters beside results ---------- */
.shop {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.shop__filters {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

/* A grid item's default min-width is `auto`, which means it REFUSES to shrink
   below the intrinsic width of its widest child — a long product name, a wide
   table. The column then bulges out of its track and over its neighbour. This
   one line is what keeps the results inside their column. */
.shop__results {
    min-width: 0;
}

/* The media query must come AFTER the base rule it overrides. Written above
   it, `position: static` lost to `position: sticky` on equal specificity and
   the filters stayed pinned on a phone. */
@media (max-width: 900px) {
    .shop { grid-template-columns: 1fr; }

    /* On a phone the filters collapse to a single disclosure so the products
       are the first thing on screen. A shopper who has to scroll past nine
       filter groups to reach a product leaves. */
    .shop__filters {
        position: static;
        border: 1px solid var(--c-grey-line);
        border-radius: var(--radius);
        padding: 1rem;
    }
}

/* ---------- Search ----------
   The site styles inputs through `.field input`; a bare <input> inherits only
   its font and is otherwise the browser's raw widget — no border, no padding,
   no height. The search box needs the site's field look without the site's
   field markup. */
.shop__search {
    display: flex;
    gap: .5rem;
    min-width: 0;
}

.shop__search input {
    flex: 1 1 0;
    min-width: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius-sm);
    background: var(--c-ivory);
    color: var(--c-ink);
    font-size: .9rem;
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.shop__search input:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px var(--c-gold-glow);
}

.shop__search .btn {
    flex: 0 0 auto;
}

/* The sort control sits opposite the result count. */
.shop__sort {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.shop__sort select {
    padding: .55rem .8rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    color: var(--c-ink);
    font-size: .85rem;
    cursor: pointer;
}

.filtergroup {
    border-bottom: 1px solid var(--c-grey-line);
    padding-bottom: .75rem;
}

.filtergroup > summary {
    cursor: pointer;
    font-weight: 600;
    padding: .5rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filtergroup > summary::-webkit-details-marker { display: none; }

.filtergroup > summary::after {
    content: '+';
    font-weight: 400;
    opacity: .5;
}

.filtergroup[open] > summary::after { content: '–'; }

.filterlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .125rem;
    max-height: 18rem;
    overflow-y: auto;
}

.filterlist li { padding-left: calc(var(--depth, 0) * .75rem); }

.filterlist a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    border-radius: calc(var(--radius) / 2);
    color: inherit;
    text-decoration: none;
    font-size: .9375rem;
}

.filterlist a:hover { background: rgba(0, 0, 0, .04); }

.filterlist a.is-active {
    background: var(--c-gold);
    color: #fff;
    font-weight: 600;
}

.filterlist__n {
    margin-left: auto;
    font-size: .75rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.filterlist a.is-active .filterlist__n { opacity: .9; }

/* A checkable filter reads as a checkbox even though it is a link — because
   it has to survive with JavaScript switched off, and a link does. */
.filterlist--check a::before {
    content: '';
    width: .875rem;
    height: .875rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: .4;
}

.filterlist--check a.is-active::before {
    content: '✓';
    display: grid;
    place-items: center;
    font-size: .625rem;
    opacity: 1;
    background: #fff;
    color: var(--c-gold);
}

.shop__clear { justify-self: start; }

/* ---------- Results ---------- */
.shop__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-grey-line);
}

.shop__count { margin: 0; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f6f4f0;
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__flag {
    position: absolute;
    top: .625rem;
    left: .625rem;
    padding: .25rem .5rem;
    border-radius: 3px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--c-gold);
    color: #fff;
}

.product-card__flag--out {
    background: #6b7280;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .875rem 1rem 1rem;
    flex: 1;
}

.product-card__body h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.product-card__body h3 a {
    color: inherit;
    text-decoration: none;
}

.product-card__body h3 a:hover { color: var(--c-gold); }

.product-card__body p {
    margin: 0;
    font-size: .8125rem;
    opacity: .7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.product-card__foot {
    margin-top: auto;
    padding-top: .625rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.product-card__price {
    font-weight: 700;
    font-size: 1.0625rem;
}

.product-card__price small {
    font-weight: 400;
    font-size: .8125rem;
    opacity: .6;
}

.product-card__price--hidden a {
    font-size: .875rem;
    font-weight: 600;
}

.product-card__variants {
    font-size: .75rem;
    opacity: .6;
    white-space: nowrap;
}

/* ---------- Variant picker ---------- */
.variants {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.variant {
    display: grid;
    gap: .125rem;
    padding: .625rem .875rem;
    min-height: 44px;                 /* a real tap target, not a decorative one */
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color .2s ease, background .2s ease;
}

.variant:hover { border-color: var(--c-gold); }

.variant.is-selected {
    border-color: var(--c-gold);
    background: rgba(201, 162, 39, .07);
    box-shadow: inset 0 0 0 1px var(--c-gold);
}

.variant:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

/* Out of stock is DIMMED, not hidden. A shopper looking for the 80cm white
   needs to learn that it exists and is unavailable — silently removing it
   makes them think you do not sell it. */
.variant.is-out { opacity: .55; }

.variant__label { font-weight: 600; font-size: .875rem; }
.variant__price { font-size: .8125rem; opacity: .75; }

.variant__out {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
}

/* ---------- The quantity ladder ---------- */
.ladder {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.ladder th,
.ladder td {
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--c-grey-line);
    text-align: left;
}

.ladder th {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .6;
}

.ladder .num { text-align: right; font-variant-numeric: tabular-nums; }
.ladder tbody tr:last-child td { border-bottom: 0; }

/* ---------- Spec table ---------- */
.spec-table dl { margin: 0; }

.spec-table__row {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--c-grey-line);
}

.spec-table dt { font-weight: 600; margin: 0; }
.spec-table dd { margin: 0; opacity: .85; }

.doclist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.doclist a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.doclist a:hover { border-color: var(--c-gold); }

.price__was {
    text-decoration: line-through;
    opacity: .5;
    font-size: .875rem;
    margin-left: .5rem;
}

.detail__hint {
    font-size: .875rem;
    opacity: .75;
    margin: -.5rem 0 1rem;
}

/* ---------- Dark mode: inherit, do not reinvent ---------- */

/* ==================================================================
   CART & CHECKOUT  (Phase 8B)
   ================================================================== */
.cart {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.checkout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

@media (max-width: 860px) {
    .cart, .checkout { grid-template-columns: 1fr; }

    /* The summary goes FIRST on a phone: the total is the thing the shopper is
       actually looking for, and making them scroll past nine line items to
       reach it is how a basket gets abandoned. */
    .cart__summary, .checkout__summary { order: -1; }
}

.cart-line {
    display: grid;
    grid-template-columns: 88px 1fr 6rem 7rem;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-grey-line);
}

@media (max-width: 640px) {
    .cart-line { grid-template-columns: 72px 1fr; }
    .cart-line__qty, .cart-line__money { grid-column: 2; }
}

.cart-line--problem {
    background: rgba(220, 80, 60, .05);
    border-left: 3px solid #c0392b;
    padding-left: .75rem;
}

.cart-line__media img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
}

.cart-line__body h3 { margin: 0 0 .25rem; font-size: 1rem; }
.cart-line__body h3 a { color: inherit; text-decoration: none; }

.cart-line__problem {
    margin: .375rem 0 0;
    color: #c0392b;
    font-size: .8125rem;
    font-weight: 600;
}

.cart-line__saving {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--c-gold);
}

.cart-line__qty input {
    width: 100%;
    min-height: 44px;
    text-align: center;
}

.cart-line__money {
    text-align: right;
    display: grid;
    gap: .125rem;
}

.cart__actions {
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.cart__summary,
.checkout__summary {
    position: sticky;
    top: 6rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    background: #fff;
}

.cart__summary h2,
.checkout__summary h2 { margin-top: 0; font-size: 1.125rem; }

.summary { margin: 0 0 1rem; }

.summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .375rem 0;
}

.summary dt { margin: 0; opacity: .75; }
.summary dd { margin: 0; font-variant-numeric: tabular-nums; }

.summary__note dd { opacity: .6; font-style: italic; }

.summary__total {
    border-top: 1px solid var(--c-grey-line);
    margin-top: .5rem;
    padding-top: .75rem !important;
    font-size: 1.125rem;
    font-weight: 700;
}

.cart__gstnote {
    font-size: .8125rem;
    opacity: .7;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.checkout__lines {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--c-grey-line);
    display: grid;
    gap: .625rem;
}

.checkout__lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .875rem;
}

.checkout__lines small {
    display: block;
    opacity: .6;
    font-size: .75rem;
}


.btn.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Add to basket */
.addtocart {
    display: flex;
    gap: .5rem;
    width: 100%;
}

.addtocart__qty {
    width: 5.5rem;
    min-height: 48px;
    text-align: center;
}

.addtocart button { flex: 1; }

/* The header cart badge */
.cartlink { position: relative; }

.cartlink__n {
    position: absolute;
    top: -.375rem;
    right: -.625rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--c-gold);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Order confirmation */
.order-done { text-align: center; margin-bottom: 2.5rem; }

.order-done__tick {
    display: inline-grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(46, 160, 90, .12);
    color: #2ea05a;
    margin-bottom: 1rem;
}

.order-done__tick svg { width: 2rem; height: 2rem; }

.table__total td { border-top: 2px solid var(--c-grey-line); }

/* ==================================================================
   DEALER PORTAL, REVIEWS & QUESTIONS  (Phase 8C)
   ================================================================== */
.dealer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dealer-stat {
    padding: 1.25rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
}

.dealer-stat strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.dealer-stat span {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .6;
}

/* Tabs — used by the dealer portal, the reviews screen and the reports. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    border-bottom: 1px solid var(--c-grey-line);
    margin-bottom: 1.5rem;
}

.tabs__tab {
    padding: .625rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    text-decoration: none;
    color: inherit;
    font-size: .9375rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tabs__tab:hover { color: var(--c-gold); }

.tabs__tab.is-active {
    border-bottom-color: var(--c-gold);
    font-weight: 600;
    color: var(--c-gold);
}

.tabs__out { margin-left: auto; }

.token {
    display: block;
    padding: .75rem 1rem;
    background: #1a1a18;
    color: #f4d97b;
    border-radius: var(--radius);
    word-break: break-all;
    font-size: .875rem;
    user-select: all;
}

/* ---------- Reviews ---------- */
.rating-summary {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    font-size: 1.0625rem;
    margin-bottom: 1.25rem;
}

.rating-summary strong { font-size: 1.75rem; }

.stars { color: var(--c-gold); letter-spacing: .1em; }
.stars__off { opacity: .25; }

.reviews {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.review {
    padding: 1.25rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    background: #fff;
}

.review__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    margin: 0 0 .5rem;
}

.review__body { margin: 0 0 .5rem; line-height: 1.6; }
.review__by   { margin: 0; }

.review__photos {
    display: flex;
    gap: .5rem;
    margin: .5rem 0;
}

.review__photos img {
    border-radius: calc(var(--radius) / 2);
    object-fit: cover;
}

.chip--ok {
    background: rgba(46, 160, 90, .12);
    color: #2ea05a;
}

/* A disclosure, not a form sitting open. A review box permanently expanded on
   every product page is nine tenths of the page nobody asked for. */
.writebox {
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    background: #fff;
}

.writebox > summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.writebox[open] > summary { margin-bottom: 1rem; }

.qa { margin: 0 0 1.5rem; }

.qa__pair {
    padding: 1rem 0;
    border-bottom: 1px solid var(--c-grey-line);
}

.qa dt { font-weight: 600; margin: 0 0 .375rem; }
.qa dd { margin: 0; opacity: .85; line-height: 1.6; }

.wishform { margin-top: .75rem; }

.form--narrow { max-width: 24rem; margin: 0 auto; }


/* ==================================================================
   THE PIECES THE SHOP PAGES ASK FOR BUT NOBODY HAD DEFINED

   Every selector below was already being USED in the Phase 8 markup and
   matched nothing, so the element rendered as raw browser default: notices
   as bare paragraphs, muted captions at full ink, "chips" as plain words.
   ================================================================== */

/* ---------- Notices ----------
   Said once, in the shop's own voice: a tinted rule down the left, no shouting.
   Colour is never the only signal — the wording carries the meaning for anyone
   who cannot separate a red box from a green one. */
.alert {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--c-grey-line);
    border-left: 3px solid var(--c-muted);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    color: var(--c-body);
    font-size: .9rem;
    line-height: 1.55;
}

.alert--success {
    border-left-color: #2ea05a;
    background: rgba(46, 160, 90, .06);
}

.alert--error {
    border-left-color: #c2452f;
    background: rgba(194, 69, 47, .06);
    color: #8f2f1f;
}

.alert--warning {
    border-left-color: var(--c-gold-deep);
    background: rgba(192, 160, 98, .09);
}

.alert p:last-child { margin-bottom: 0; }

/* ---------- Chips ----------
   `.chip--ok` existed with no `.chip` under it, so "Verified purchase" was a
   green word floating in the page rather than a badge. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--c-grey);
    color: var(--c-body);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ---------- Text utilities ---------- */
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-small); line-height: 1.5; }

/* A plain inline link, underlined — inside a table or a cart line there is no
   room for a button and no colour cue to spare. */
.link {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--c-gold);
}
.link:hover { color: var(--c-gold-deep); }

/* A <button> that must READ as a link — "Sign out", "Order again", "Remove".
   These are POSTs, because they change something, and a GET link that changes
   something is a link a crawler will happily click. So: button semantics,
   link appearance. */
.linkbtn {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--c-ink);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--c-gold);
    transition: color var(--t-fast) var(--ease);
}
.linkbtn:hover { color: var(--c-gold-deep); }

.linkbtn--danger { text-decoration-color: #c2452f; }
.linkbtn--danger:hover { color: #c2452f; }

/* ---------- Grid children that must be allowed to shrink ----------
   Same `min-width: auto` trap as .shop__results: a wide cart table or a long
   address line would otherwise push its column past the edge of the page. */
.cart__lines,
.checkout__main {
    min-width: 0;
}

/* ---------- A checkbox and its label, on one line ----------
   `.field` is a stacked label-over-input; a checkbox is the one case where the
   label belongs BESIDE the control, and the control must not stretch to the
   full width `.field input` gives it. */
.field--check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.field--check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin-top: .2rem;
    accent-color: var(--c-gold);
}

.field--check label {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--c-body);
}

/* ==================================================================
   THE DEALER PORTAL — panels, tables, status pills

   These were written against the ADMIN stylesheet's vocabulary (.panel,
   .table, .pill--on), which the public pages do not load. The portal is a
   PUBLIC page — a dealer signs in on the front of the site, not in /admin —
   so it needs its own copy, in the public palette. Same names, so the markup
   reads the same in both halves of the app; public tokens, so it looks like
   the shop and not like a back office.
   ================================================================== */

.panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
}

.panel > :last-child { margin-bottom: 0; }

.panel > h2,
.panel > h3 {
    margin-bottom: 1rem;
    font-size: var(--fs-h3);
}

/* ---------- Tables ----------
   A table is the one element that will not be argued out of its natural width,
   so it gets its own scroll container rather than dragging the page sideways
   on a phone. */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.table th,
.table td {
    padding: .7rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--c-grey-line);
    vertical-align: top;
}

.table th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted);
    white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-green-soft); }

/* Money lines up on the decimal point or it cannot be read down a column. */
.table td:last-child,
.table th:last-child { text-align: right; }
.table .num,
.table td:last-child { font-variant-numeric: tabular-nums; }

.table__total td {
    border-top: 2px solid var(--c-ink);
    border-bottom: 0;
    font-weight: 700;
    color: var(--c-ink);
}

.table__total:hover { background: none; }

/* A table will not shrink below its content, so on a narrow screen it scrolls
   INSIDE its panel rather than dragging the whole page sideways. Every table
   on the portal already sits in a .panel, so the rule needs no new markup. */
@media (max-width: 700px) {
    .panel { overflow-x: auto; }
    .table { min-width: 32rem; }
}

/* ---------- Status pills ---------- */
.pill {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    background: var(--c-grey);
    color: var(--c-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

.pill--on   { background: rgba(46, 160, 90, .13);  color: #1f7a44; }
.pill--off  { background: var(--c-grey);           color: var(--c-muted); }
.pill--warn { background: rgba(192, 160, 98, .18); color: var(--c-gold-deep); }
.pill--err  { background: rgba(194, 69, 47, .12);  color: #a5321f; }
.pill--gold { background: var(--c-gold-glow);      color: var(--c-gold-deep); }

/* ---------- A list that is a list, not a bulleted one ---------- */
.plainlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.plainlist li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--c-grey-line);
}

.plainlist li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ==================================================================
   SHOP BY STYLE  (Phase 9)

   The panel on a style page that turns a decoration idea into a flower order:
   the flowers behind the set, the bulk tiers, and the "add N sets" control.
   ================================================================== */

/* The flowers that compose one set. */
.stylelist {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
    display: grid;
    gap: .1rem;
}

.stylelist__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--c-grey-line);
}
.stylelist__row:last-child { border-bottom: 0; }

.stylelist__name {
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 500;
}
.stylelist__name:hover { color: var(--c-gold-deep); text-decoration: underline; }

.stylelist__qty {
    flex: 0 0 auto;
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
}

.stylelist__note {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--c-muted);
}

/* The bulk-tier ladder — advertised so a B2B buyer sees the reason to scale. */
.slablist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}
.slablist li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--c-gold-glow);
    font-size: .88rem;
}
.slablist strong { color: var(--c-gold-deep); }
.slablist span { color: var(--c-body); }

/* The "add N sets" control: a quantity beside a full-width primary button. */
.setform {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    width: 100%;
}
.setform__qty {
    display: grid;
    gap: .25rem;
    flex: 0 0 auto;
}
.setform__qty span {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.setform__qty input {
    width: 5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius-sm);
    background: var(--c-ivory);
    color: var(--c-ink);
    font-size: 1rem;
    text-align: center;
}
.setform__qty input:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px var(--c-gold-glow);
}
.setform .btn { flex: 1; }

/* ---------- Style spec: Flowers Used + Customise It (Phase 9) ----------
   Replaces the old "Available Sizes" (ft) block on a style page. */
.flowertags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.flowertag {
    display: inline-flex;
    align-items: center;
    padding: .35rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--c-gold-glow);
    color: var(--c-gold-deep);
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
}

.customiselist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.customiselist li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--c-body);
}
.customiselist svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: .15rem;
    color: var(--c-gold);
}

/* ==================================================================
   SHOP THESE FLOWERS — buyable product cards on a style page (Phase 9)
   ================================================================== */
.styleshop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.styleshop-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-white);
    transition: transform .25s ease, box-shadow .25s ease;
}
.styleshop-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }

.styleshop-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--c-grey);
}
.styleshop-card__media img { width: 100%; height: 100%; object-fit: cover; }

.styleshop-card__flag {
    position: absolute;
    top: .5rem; left: .5rem;
    padding: .2rem .5rem;
    border-radius: 3px;
    background: #6b7280;
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.styleshop-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem .9rem 1rem;
    flex: 1;
}
.styleshop-card__body h3 { margin: 0; font-size: .95rem; line-height: 1.3; }
.styleshop-card__body h3 a { color: inherit; text-decoration: none; }
.styleshop-card__body h3 a:hover { color: var(--c-gold-deep); }

.styleshop-card__price { margin: 0; font-weight: 700; font-size: 1.05rem; }
.styleshop-card__price span { font-weight: 400; font-size: .8rem; color: var(--c-muted); }

.styleshop-add {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    flex-wrap: wrap;
}

/* The −/+ quantity stepper. */
.qtystep {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.qtystep__btn {
    width: 2rem;
    border: 0;
    background: var(--c-ivory);
    color: var(--c-ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.qtystep__btn:hover { background: var(--c-gold-glow); color: var(--c-gold-deep); }
.qtystep__input {
    width: 3rem;
    border: 0;
    border-left: 1px solid var(--c-grey-line);
    border-right: 1px solid var(--c-grey-line);
    text-align: center;
    font-size: .9rem;
    color: var(--c-ink);
    background: var(--c-white);
    -moz-appearance: textfield;
}
.qtystep__input::-webkit-outer-spin-button,
.qtystep__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.styleshop-add .btn { flex: 1; }

/* ==================================================================
   THE EDITABLE SET BUILDER + selectable colours (Phase 9)
   ================================================================== */

/* Colour swatches are now radio labels — clickable, with a selected state. */
.swatch { cursor: pointer; }
.swatch:has(input:checked) {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 2px var(--c-gold-glow);
}
.swatches__note {
    margin: .6rem 0 0;
    font-size: .78rem;
    color: var(--c-muted);
}

/* The builder. */
.setbuilder { display: block; }
.setbuilder > h3 {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: .75rem;
}

.setbuilder__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.setrow {
    display: grid;
    gap: .5rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--c-grey-line);
    transition: opacity var(--t-fast) var(--ease);
}
.setrow:last-child { border-bottom: 0; }
.setrow.is-removed { opacity: .4; }
.setrow.is-removed .qtystep { pointer-events: none; opacity: .5; }

.setrow__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}
.setrow__name {
    color: var(--c-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
}
.setrow__name:hover { color: var(--c-gold-deep); text-decoration: underline; }

.setrow__remove {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--c-grey-line);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.setrow__remove:hover { border-color: #c2452f; color: #c2452f; }

.setrow__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.setrow__price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
}

.setbuilder__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: .5rem;
}
.setbuilder__sets {
    display: grid;
    gap: .25rem;
}
.setbuilder__sets span {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.setbuilder__sets input {
    width: 5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius-sm);
    background: var(--c-ivory);
    color: var(--c-ink);
    font-size: 1rem;
    text-align: center;
}
.setbuilder__sets input:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px var(--c-gold-glow);
}
.setbuilder__total { text-align: right; }
.setbuilder__total span {
    display: block;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.setbuilder__total strong {
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
}

.setbuilder__note {
    margin: .75rem 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--c-muted);
}