/* /Components/Admin/Dashboard.razor.rz.scp.css */
.stat-grid[b-f6lw3yzeud] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-4);
    margin-block-end: var(--oc-space-5);
}

.stat[b-f6lw3yzeud] {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-1);
    padding: var(--oc-space-4);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-block-start: 3px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-lg);
}

/* Something needs doing. */
.stat--action[b-f6lw3yzeud] {
    border-block-start-color: var(--oc-cyan-brand);
}

/* Something needs doing soon. */
.stat--warn[b-f6lw3yzeud] {
    border-block-start-color: var(--oc-amber-brand);
}

.stat__label[b-f6lw3yzeud] {
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-color-text-muted);
}

.stat__value[b-f6lw3yzeud] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-3xl);
    font-weight: var(--oc-weight-bold);
    line-height: var(--oc-leading-tight);
}

.stat__detail[b-f6lw3yzeud] {
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

@media (min-width: 40rem) {
    .stat-grid[b-f6lw3yzeud] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 80rem) {
    .stat-grid[b-f6lw3yzeud] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Components/Admin/Discounts.razor.rz.scp.css */
.field[b-6fvqxjcsh9] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-6fvqxjcsh9] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__hint[b-6fvqxjcsh9] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.field-row[b-6fvqxjcsh9] {
    display: grid;
    gap: var(--oc-space-4);
}

.btn-link-quiet[b-6fvqxjcsh9] {
    padding: 0;
    font-family: inherit;
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-link);
    background: none;
    border: 0;
    cursor: pointer;
}

.btn-link-quiet:hover[b-6fvqxjcsh9] {
    text-decoration: underline;
}

@media (min-width: 40rem) {
    .field-row[b-6fvqxjcsh9] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Admin/GalleryAdmin.razor.rz.scp.css */
.field[b-thipkk16us] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-thipkk16us] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__hint[b-thipkk16us] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

/* Photo-first: a project with no image is the row that needs attention, and leading with
   the thumbnail makes that obvious without reading a column. */
.thumb-cell[b-thipkk16us] {
    inline-size: 6rem;
}

.thumb[b-thipkk16us] {
    inline-size: 5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-gray-050);
}

/* Each arrow is its own form; keep them on one line rather than stacked. */
.order-cell[b-thipkk16us] {
    white-space: nowrap;
}

.order-cell form[b-thipkk16us] {
    display: inline-block;
    margin: 0;
}

.btn-link-quiet[b-thipkk16us] {
    background: none;
    border: 0;
    padding: var(--oc-space-1) var(--oc-space-2);
    color: var(--oc-color-link);
    cursor: pointer;
    font-size: var(--oc-text-sm);
}

.btn-link-quiet:hover[b-thipkk16us] {
    color: var(--oc-color-link-hover);
    text-decoration: underline;
}
/* /Components/Admin/GalleryEditor.razor.rz.scp.css */
/* Shared admin form primitives are duplicated per page by convention here - scoped CSS
   does not cross component boundaries, so each editor carries its own copy. */
.crumb[b-5p0imqtvek] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.detail[b-5p0imqtvek] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: start;
}

.field[b-5p0imqtvek] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-5p0imqtvek] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__hint[b-5p0imqtvek] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.field-row[b-5p0imqtvek] {
    display: grid;
    gap: var(--oc-space-4);
}

.check[b-5p0imqtvek] {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    font-weight: var(--oc-weight-normal);
}

/* The photo is the point of a gallery entry, so it is shown at a workable size rather
   than as a thumbnail - the owner is judging whether it is the right shot. */
.gallery-photo[b-5p0imqtvek] {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 24rem;
    object-fit: contain;
    background: var(--oc-gray-050);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    margin-block-end: var(--oc-space-3);
}

.photo-upload[b-5p0imqtvek] {
    border-block-start: 1px solid var(--oc-color-border);
    padding-block-start: var(--oc-space-4);
    margin-block-start: var(--oc-space-4);
}

@media (min-width: 40rem) {
    .field-row[b-5p0imqtvek] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .detail[b-5p0imqtvek] {
        grid-template-columns: 1.6fr 1fr;
    }
}
/* /Components/Admin/Inventory.razor.rz.scp.css */
.adjust[b-rowy8gryaf] {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    margin: 0;
}

.adjust__input[b-rowy8gryaf] {
    width: 5.5rem;
}

.adjust__note[b-rowy8gryaf] {
    width: 11rem;
}

.low[b-rowy8gryaf] {
    padding: 0 var(--oc-space-2);
    font-weight: var(--oc-weight-bold);
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
    border-radius: var(--oc-radius-sm);
}

.positive[b-rowy8gryaf] {
    color: var(--oc-color-success);
    font-weight: var(--oc-weight-semibold);
}

.negative[b-rowy8gryaf] {
    color: var(--oc-red-ink);
    font-weight: var(--oc-weight-semibold);
}

.btn-link-quiet[b-rowy8gryaf] {
    padding: 0;
    font-family: inherit;
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-link);
    background: none;
    border: 0;
    cursor: pointer;
}

.btn-link-quiet:hover[b-rowy8gryaf] {
    text-decoration: underline;
}
/* /Components/Admin/OrderDetail.razor.rz.scp.css */
.crumb[b-95e3bbv8je] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.detail[b-95e3bbv8je] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: start;
}

.totals[b-95e3bbv8je] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin-block-start: var(--oc-space-4);
    font-size: var(--oc-text-sm);
}

.totals dt[b-95e3bbv8je] {
    color: var(--oc-color-text-muted);
}

.totals dd[b-95e3bbv8je] {
    margin: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.totals__grand[b-95e3bbv8je] {
    padding-block-start: var(--oc-space-2);
    border-block-start: 1px solid var(--oc-color-border);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-lg);
    font-weight: var(--oc-weight-bold);
    color: var(--oc-color-text) !important;
}

.facts[b-95e3bbv8je] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin: 0;
    font-size: var(--oc-text-sm);
}

.facts dt[b-95e3bbv8je] {
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
}

.facts dd[b-95e3bbv8je] {
    margin: 0;
}

.break[b-95e3bbv8je] {
    word-break: break-all;
    font-family: var(--oc-font-mono);
    font-size: var(--oc-text-xs);
}

.side-heading[b-95e3bbv8je] {
    margin-block: var(--oc-space-4) var(--oc-space-2);
    font-size: var(--oc-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-caps);
    color: var(--oc-color-text-muted);
}

.side-label[b-95e3bbv8je] {
    display: block;
    margin-block: var(--oc-space-3) var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

address[b-95e3bbv8je] {
    font-style: normal;
    font-size: var(--oc-text-sm);
    line-height: var(--oc-leading-relaxed);
}

form .btn[b-95e3bbv8je] {
    margin-block-start: var(--oc-space-3);
}

@media (min-width: 64rem) {
    .detail[b-95e3bbv8je] {
        grid-template-columns: 1.8fr 1fr;
    }
}
/* /Components/Admin/ProductEditor.razor.rz.scp.css */
.crumb[b-hn2k67zidq] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.detail[b-hn2k67zidq] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: start;
}

.field[b-hn2k67zidq] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-hn2k67zidq] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__hint[b-hn2k67zidq] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.field-row[b-hn2k67zidq] {
    display: grid;
    gap: var(--oc-space-4);
}

.option-list[b-hn2k67zidq] {
    margin: 0 0 var(--oc-space-3);
    padding: 0;
    list-style: none;
    font-size: var(--oc-text-sm);
}

.option-list > li[b-hn2k67zidq] {
    max-width: none;
    padding-block: var(--oc-space-2);
    border-block-end: 1px solid var(--oc-color-border);
}

.option-list > li:last-child[b-hn2k67zidq] {
    border-block-end: 0;
}

.value-list[b-hn2k67zidq] {
    margin: var(--oc-space-1) 0 0;
    padding-inline-start: var(--oc-space-4);
    list-style: none;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.value-list li[b-hn2k67zidq] {
    max-width: none;
}

.delta[b-hn2k67zidq] {
    margin-inline-start: var(--oc-space-2);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-orange-ink);
}

.facts[b-hn2k67zidq] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin: 0 0 var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.facts dt[b-hn2k67zidq] {
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
}

.facts dd[b-hn2k67zidq] {
    margin: 0;
}

.break[b-hn2k67zidq] {
    word-break: break-all;
    font-family: var(--oc-font-mono);
    font-size: var(--oc-text-xs);
}

form .btn[b-hn2k67zidq] {
    margin-block-start: var(--oc-space-3);
}

@media (min-width: 40rem) {
    .field-row[b-hn2k67zidq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .detail[b-hn2k67zidq] {
        grid-template-columns: 1.6fr 1fr;
    }
}

/* Photos panel. Every selector below matches an element written directly in
   ProductEditor.razor, so scoped CSS reaches it without ::deep. */
.photo-grid[b-hn2k67zidq] {
    list-style: none;
    margin: 0 0 var(--oc-space-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--oc-space-4);
}

.photo[b-hn2k67zidq] {
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    overflow: hidden;
    background: var(--oc-color-surface);
}

/* The primary image is what the shop card and the top of the product page show, so it
   gets a visible marker rather than only the badge - it is the one that matters most. */
.photo--primary[b-hn2k67zidq] {
    border-color: var(--oc-color-action);
    box-shadow: 0 0 0 1px var(--oc-color-action);
}

.photo img[b-hn2k67zidq] {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--oc-gray-050);
}

.photo__body[b-hn2k67zidq] {
    padding: var(--oc-space-3);
}

.photo__alt[b-hn2k67zidq] {
    margin: 0;
    font-size: var(--oc-text-sm);
}

.photo__meta[b-hn2k67zidq] {
    margin: var(--oc-space-1) 0 var(--oc-space-3);
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
}

/* Each control is its own <form> posting to a different endpoint, so they are laid out
   as a row of siblings rather than as one form's buttons. */
.photo__actions[b-hn2k67zidq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
}

.photo__actions form[b-hn2k67zidq] {
    margin: 0;
}

.photo-upload[b-hn2k67zidq] {
    border-block-start: 1px solid var(--oc-color-border);
    padding-block-start: var(--oc-space-4);
}

/* --- options and variants -------------------------------------------------
   Every selector below matches an element written directly in ProductEditor.razor,
   so scoped CSS reaches it without ::deep. The shared admin primitives (.panel,
   .admin-table, .status--*) come from AdminLayout.razor.css, which does use ::deep
   because those elements live in child components. */

.subhead[b-hn2k67zidq] {
    margin-block: var(--oc-space-5) var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--oc-color-text-muted);
}

.option[b-hn2k67zidq] {
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-4);
    margin-block-end: var(--oc-space-4);
    background: var(--oc-color-bg-subtle);
}

.option__head[b-hn2k67zidq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--oc-space-3);
    margin-block-end: var(--oc-space-3);
}

.option__head h3[b-hn2k67zidq] {
    margin: 0;
    font-size: var(--oc-text-base);
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
}

/* Each control is its own <form> posting to a different endpoint, so they lay out as a
   row of siblings rather than as one form's buttons. */
.row-actions[b-hn2k67zidq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oc-space-2);
}

.row-actions form[b-hn2k67zidq] {
    margin: 0;
}

.row-actions .btn[b-hn2k67zidq],
.row-actions form .btn[b-hn2k67zidq] {
    margin-block-start: 0;
}

.option__form[b-hn2k67zidq] {
    background: var(--oc-color-surface);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-3);
}

.values[b-hn2k67zidq] {
    margin-block-start: var(--oc-space-4);
}

.values h4[b-hn2k67zidq] {
    margin: 0 0 var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
}

/* One grid shared by the saved rows and the "add" row, so the new-choice inputs line up
   under the columns they will become. */
.value[b-hn2k67zidq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-2);
    align-items: center;
    padding: var(--oc-space-2);
    background: var(--oc-color-surface);
    border-radius: var(--oc-radius-md);
    margin-block-end: var(--oc-space-1);
}

.value .btn[b-hn2k67zidq] {
    margin-block-start: 0;
    inline-size: 100%;
}

/* An unavailable choice still exists and still prices on carts and orders that hold it,
   so it is dimmed rather than hidden — hiding it is how it gets forgotten. */
.value--off[b-hn2k67zidq] {
    opacity: 0.6;
}

.value--new[b-hn2k67zidq] {
    border: 1px dashed var(--oc-color-border);
    margin-block-start: var(--oc-space-3);
}

.value__flags[b-hn2k67zidq] {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    font-size: var(--oc-text-xs);
}

.value__check[b-hn2k67zidq] {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-1);
    font-size: var(--oc-text-xs);
    white-space: nowrap;
}

.value__extra[b-hn2k67zidq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
    padding: 0 var(--oc-space-2) var(--oc-space-2);
    font-size: var(--oc-text-xs);
}

.value__extra form[b-hn2k67zidq] {
    margin: 0;
}

.option-new[b-hn2k67zidq] {
    border-block-start: 1px solid var(--oc-color-border);
    padding-block-start: var(--oc-space-4);
    margin-block-start: var(--oc-space-5);
}

/* The SKU field is the variant row's form; the other cells join it with form="…", which
   is why this has no visible layout of its own. */
.variant-form[b-hn2k67zidq] {
    margin: 0;
}

.variant-form .form-control[b-hn2k67zidq] {
    min-inline-size: 8rem;
}

/* A deactivated variant is history the options no longer describe. It keeps its SKU, its
   Stripe price and its stock, so it stays visible and merely recedes. */
.row--off[b-hn2k67zidq] {
    opacity: 0.55;
}

/* Red means "something is wrong" on this site, which is exactly what deleting a choice
   with live carts against it is. */
.btn-link-danger[b-hn2k67zidq] {
    color: var(--oc-color-danger);
}

@media (min-width: 48rem) {
    .value[b-hn2k67zidq] {
        grid-template-columns: minmax(0, 2fr) 7rem 7rem minmax(0, 1fr) auto;
    }
}
/* /Components/Admin/Products.razor.rz.scp.css */
/* The create form is a single field and a button, so it reads as one control rather than
   as a form — a full-width stacked layout would imply there is more to fill in. */
.new-product[b-u41tz21xm9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    align-items: center;
    margin-block-end: var(--oc-space-4);
}

.new-product .form-control[b-u41tz21xm9] {
    inline-size: auto;
    flex: 1 1 18rem;
    max-inline-size: 26rem;
}
/* /Components/Admin/QuoteDetail.razor.rz.scp.css */
.crumb[b-v20a0x58c8] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.admin-head[b-v20a0x58c8] {
    margin-block-end: var(--oc-space-5);
}

.admin-head h1[b-v20a0x58c8] {
    margin-block-end: var(--oc-space-1);
    font-family: var(--oc-font-mono);
    font-size: var(--oc-text-2xl);
}

.admin-head__meta[b-v20a0x58c8] {
    margin: 0;
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.detail[b-v20a0x58c8] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: start;
}

.panel[b-v20a0x58c8] {
    padding: var(--oc-space-5);
    margin-block-end: var(--oc-space-5);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.panel:last-child[b-v20a0x58c8] {
    margin-block-end: 0;
}

.panel h2[b-v20a0x58c8] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-lg);
}

.description[b-v20a0x58c8] {
    white-space: pre-wrap;
    padding: var(--oc-space-4);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-md);
}

.facts[b-v20a0x58c8] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin: 0;
    font-size: var(--oc-text-sm);
}

.facts dt[b-v20a0x58c8] {
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
}

.facts dd[b-v20a0x58c8] {
    margin: 0;
}

.files[b-v20a0x58c8] {
    margin: 0 0 var(--oc-space-4);
    padding: 0;
    list-style: none;
}

.file[b-v20a0x58c8] {
    max-width: none;
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-end: var(--oc-space-2);
    background-color: var(--oc-gray-050);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
}

.file__info[b-v20a0x58c8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--oc-space-3);
}

.file__name[b-v20a0x58c8] {
    font-weight: var(--oc-weight-semibold);
    word-break: break-all;
}

.file__meta[b-v20a0x58c8],
.file__hash[b-v20a0x58c8] {
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.file__hash[b-v20a0x58c8] {
    font-family: var(--oc-font-mono);
    margin-inline-start: auto;
}

.tag[b-v20a0x58c8] {
    margin-inline-start: var(--oc-space-1);
    padding: 0 var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-bold);
    border-radius: var(--oc-radius-sm);
}

.tag--auto[b-v20a0x58c8] {
    color: var(--oc-white);
    background-color: var(--oc-cyan-ink);
}

.tag--manual[b-v20a0x58c8] {
    color: var(--oc-black);
    background-color: var(--oc-gray-200);
}

.status[b-v20a0x58c8] {
    padding: var(--oc-space-1) var(--oc-space-3);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    border-radius: var(--oc-radius-sm);
    background-color: var(--oc-gray-100);
}

.status--new[b-v20a0x58c8] {
    color: var(--oc-white);
    background-color: var(--oc-cyan-ink);
}

.status--quoted[b-v20a0x58c8],
.status--accepted[b-v20a0x58c8],
.status--convertedtoorder[b-v20a0x58c8] {
    color: var(--oc-white);
    background-color: var(--oc-color-success);
}

.status--manualreviewrequired[b-v20a0x58c8],
.status--needsinfo[b-v20a0x58c8] {
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
}

.field-label[b-v20a0x58c8] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.panel form .btn[b-v20a0x58c8] {
    margin-block-start: var(--oc-space-3);
}

.muted[b-v20a0x58c8] {
    color: var(--oc-color-text-muted);
}

.small[b-v20a0x58c8] {
    font-size: var(--oc-text-xs);
}

@media (min-width: 64rem) {
    .detail[b-v20a0x58c8] {
        grid-template-columns: 1.8fr 1fr;
    }
}
/* /Components/Admin/QuoteQueue.razor.rz.scp.css */
.admin-head[b-occofuwzym] {
    margin-block-end: var(--oc-space-5);
}

.admin-head h1[b-occofuwzym] {
    margin-block-end: var(--oc-space-1);
    font-size: var(--oc-text-2xl);
}

.admin-head__meta[b-occofuwzym] {
    margin: 0;
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.filters[b-occofuwzym] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin-block-end: var(--oc-space-5);
}

.filters__chip[b-occofuwzym] {
    padding: var(--oc-space-1) var(--oc-space-3);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-text);
    text-decoration: none;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-pill);
}

.filters__chip:hover[b-occofuwzym] {
    border-color: var(--oc-color-border-strong);
}

.filters__chip--active[b-occofuwzym] {
    color: var(--oc-white);
    background-color: var(--oc-gray-900);
    border-color: var(--oc-gray-900);
}

/* Wide tables scroll inside their own container rather than making the page scroll
   horizontally. */
.table-scroll[b-occofuwzym] {
    overflow-x: auto;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.table[b-occofuwzym] {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--oc-text-sm);
}

.table th[b-occofuwzym],
.table td[b-occofuwzym] {
    padding: var(--oc-space-3) var(--oc-space-4);
    text-align: start;
    white-space: nowrap;
    border-block-end: 1px solid var(--oc-color-border);
}

.table th[b-occofuwzym] {
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-xs);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-color-text-muted);
    background-color: var(--oc-gray-050);
}

.table tbody tr:last-child td[b-occofuwzym] {
    border-block-end: 0;
}

.table tbody tr:hover[b-occofuwzym] {
    background-color: var(--oc-gray-050);
}

.ref-link[b-occofuwzym] {
    font-family: var(--oc-font-mono);
    font-weight: var(--oc-weight-semibold);
}

.muted[b-occofuwzym] {
    color: var(--oc-color-text-muted);
}

.tag[b-occofuwzym] {
    margin-inline-start: var(--oc-space-2);
    padding: 0 var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-bold);
    letter-spacing: var(--oc-tracking-wide);
    border-radius: var(--oc-radius-sm);
}

.tag--nda[b-occofuwzym] {
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
}

.tag--auto[b-occofuwzym] {
    color: var(--oc-white);
    background-color: var(--oc-cyan-ink);
}

.status[b-occofuwzym] {
    padding: var(--oc-space-1) var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    border-radius: var(--oc-radius-sm);
    background-color: var(--oc-gray-100);
}

.status--new[b-occofuwzym] {
    color: var(--oc-white);
    background-color: var(--oc-cyan-ink);
}

.status--quoted[b-occofuwzym],
.status--accepted[b-occofuwzym] {
    color: var(--oc-white);
    background-color: var(--oc-color-success);
}

.status--manualreviewrequired[b-occofuwzym],
.status--needsinfo[b-occofuwzym] {
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
}

.empty[b-occofuwzym] {
    padding: var(--oc-space-6);
    text-align: center;
    color: var(--oc-color-text-muted);
    background-color: var(--oc-white);
    border: 1px dashed var(--oc-color-border-strong);
    border-radius: var(--oc-radius-lg);
}
/* /Components/Admin/RateSettings.razor.rz.scp.css */
.rates[b-x1ybm9falb] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: start;
}

.calibration[b-x1ybm9falb] {
    border-inline-start: 4px solid var(--oc-amber-brand);
    background-color: var(--oc-amber-050);
}

.calibration__controls[b-x1ybm9falb] {
    display: grid;
    gap: var(--oc-space-4);
    margin-block-end: var(--oc-space-4);
}

.calibration__result[b-x1ybm9falb] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-2) var(--oc-space-4);
    padding: var(--oc-space-4);
    margin: 0 0 var(--oc-space-3);
    background-color: var(--oc-white);
    border-radius: var(--oc-radius-md);
    font-size: var(--oc-text-sm);
}

.calibration__result dt[b-x1ybm9falb] {
    color: var(--oc-color-text-muted);
}

.calibration__result dd[b-x1ybm9falb] {
    margin: 0;
    text-align: end;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-lg);
    font-weight: var(--oc-weight-bold);
}

.group[b-x1ybm9falb] {
    margin-block: var(--oc-space-5) var(--oc-space-3);
    padding-block-end: var(--oc-space-2);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-sm);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-color-text-muted);
    border-block-end: 1px solid var(--oc-color-border);
}

.group:first-of-type[b-x1ybm9falb] {
    margin-block-start: 0;
}

.field[b-x1ybm9falb] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-x1ybm9falb] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field-row[b-x1ybm9falb] {
    display: grid;
    gap: var(--oc-space-4);
}

.hint[b-x1ybm9falb] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

@media (min-width: 40rem) {
    .field-row[b-x1ybm9falb],
    .calibration__controls[b-x1ybm9falb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .rates[b-x1ybm9falb] {
        grid-template-columns: 2fr 1fr;
    }
}
/* /Components/Admin/UserDetail.razor.rz.scp.css */
.admin-head__back[b-xou95p130m] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
}

.self-tag[b-xou95p130m] {
    margin-inline-start: var(--oc-space-3);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-caps);
}

.field[b-xou95p130m] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-xou95p130m] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field--wide[b-xou95p130m] {
    max-width: 28rem;
}

.field__hint[b-xou95p130m] {
    margin-block-start: var(--oc-space-3);
    margin-block-end: var(--oc-space-4);
    max-width: 60ch;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.check[b-xou95p130m] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-3);
    align-items: start;
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.check input[b-xou95p130m] {
    margin-block-start: 0.2em;
}

/* Read-only account facts. Two columns once there's room, stacked on a phone. */
.facts[b-xou95p130m] {
    display: grid;
    gap: var(--oc-space-4);
    margin: 0;
}

.facts dt[b-xou95p130m] {
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-caps);
}

.facts dd[b-xou95p130m] {
    margin: var(--oc-space-1) 0 0;
    font-size: var(--oc-text-sm);
}

.facts .mono[b-xou95p130m] {
    font-family: var(--oc-font-mono);
    font-size: var(--oc-text-xs);
    overflow-wrap: anywhere;
}

/* Each action is its own form (they post different handlers), so they need laying out
   side by side rather than stacking as block-level forms would. */
.actions[b-xou95p130m] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
}

.panel--danger[b-xou95p130m] {
    border-color: var(--oc-red-100);
}

.panel--danger h2[b-xou95p130m] {
    color: var(--oc-red-ink);
}

@media (min-width: 48rem) {
    .facts[b-xou95p130m] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* /Components/Admin/Users.razor.rz.scp.css */
.panel__lede[b-ylnc6zex62] {
    max-width: 60ch;
    margin-block-end: var(--oc-space-5);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.field[b-ylnc6zex62] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-ylnc6zex62],
.field legend[b-ylnc6zex62] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__hint[b-ylnc6zex62] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.field-row[b-ylnc6zex62] {
    display: grid;
    gap: var(--oc-space-4);
}

fieldset.field[b-ylnc6zex62] {
    min-inline-size: 0;
    padding: 0;
    border: 0;
}

/* Checkbox on its own column so the description wraps under itself, not under the box. */
.check[b-ylnc6zex62] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-3);
    align-items: start;
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-normal);
}

.check input[b-ylnc6zex62] {
    margin-block-start: 0.2em;
}

.filters__search[b-ylnc6zex62] {
    inline-size: auto;
    min-inline-size: 16rem;
}

.role-pill[b-ylnc6zex62] {
    display: inline-block;
    margin-inline-end: var(--oc-space-2);
    padding: var(--oc-space-1) var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-gray-800);
    background-color: var(--oc-gray-100);
    border-radius: var(--oc-radius-sm);
}

@media (min-width: 48rem) {
    .field-row[b-ylnc6zex62] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}
/* /Components/Admin/WebhookLog.razor.rz.scp.css */
.event-id[b-cvtf7pilvr] {
    font-family: var(--oc-font-mono);
    font-size: var(--oc-text-xs);
}

.error[b-cvtf7pilvr] {
    max-width: 28rem;
    white-space: normal;
    font-size: var(--oc-text-xs);
    color: var(--oc-red-800);
}

.field__hint[b-cvtf7pilvr] {
    margin-block-start: var(--oc-space-4);
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.page-shell[b-hf5yai7tt9] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.page-shell__main[b-hf5yai7tt9] {
    flex: 1;
}

.account-main[b-hf5yai7tt9] {
    padding-block: var(--oc-space-7) var(--oc-space-8);
}

/* The Identity pages open with an <h2>Use a local account to log in.</h2> style
   subheading under an <h1>. Tighten that pairing up. */
.account-main[b-hf5yai7tt9]  h1 {
    margin-block-end: var(--oc-space-5);
}

.account-main[b-hf5yai7tt9]  h2 {
    font-size: var(--oc-text-xl);
}

/* Scaffolded forms use `form-floating` stacked with no gap. */
.account-main[b-hf5yai7tt9]  .form-floating {
    margin-block-end: var(--oc-space-4);
}

.account-main[b-hf5yai7tt9]  hr {
    margin-block: var(--oc-space-5);
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin[b-0v8809xuj5] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--oc-gray-050);
}

.admin__sidebar[b-0v8809xuj5] {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-4);
    padding: var(--oc-space-4);
    color: var(--oc-gray-200);
    background-color: var(--oc-gray-900);
}

.admin__brand[b-0v8809xuj5] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    font-weight: var(--oc-weight-bold);
    color: var(--oc-white);
    text-decoration: none;
}

.admin__brand-mark[b-0v8809xuj5] {
    color: var(--oc-orange-brand);
}

.admin__brand-tag[b-0v8809xuj5] {
    margin-inline-start: var(--oc-space-2);
    padding: 0 var(--oc-space-2);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-xs);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
    border-radius: var(--oc-radius-sm);
    vertical-align: middle;
}

.admin__nav[b-0v8809xuj5] {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-1);
}

.admin__nav[b-0v8809xuj5]  .admin__link,
.admin__footer[b-0v8809xuj5]  .admin__link {
    display: block;
    padding: var(--oc-space-2) var(--oc-space-3);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-gray-200);
    text-decoration: none;
    border-radius: var(--oc-radius-md);
}

.admin__nav[b-0v8809xuj5]  .admin__link:hover,
.admin__footer[b-0v8809xuj5]  .admin__link:hover {
    color: var(--oc-white);
    background-color: rgb(255 255 255 / 0.08);
}

.admin__nav[b-0v8809xuj5]  .admin__link.active {
    color: var(--oc-white);
    background-color: rgb(255 255 255 / 0.16);
}

.admin__footer[b-0v8809xuj5]  .admin__link--quiet {
    color: var(--oc-gray-400);
}

.admin__footer[b-0v8809xuj5] {
    margin-block-start: auto;
    padding-block-start: var(--oc-space-4);
    border-block-start: 1px solid var(--oc-gray-800);
}

.admin__nav-heading[b-0v8809xuj5] {
    margin-block-start: var(--oc-space-4);
    padding-inline: var(--oc-space-3);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-xs);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-gray-400);
}

.admin__main[b-0v8809xuj5] {
    flex: 1;
    padding: var(--oc-space-5) var(--oc-space-4);
    min-width: 0;
}

/* ===========================================================================
   Shared admin styling.

   Lives here rather than being repeated in every admin page's scoped CSS. All
   admin pages render inside this layout, so ::deep reaches their markup while
   still keeping these rules out of the public site.
   =========================================================================== */

.admin__main[b-0v8809xuj5]  .admin-head {
    margin-block-end: var(--oc-space-5);
}

.admin__main[b-0v8809xuj5]  .admin-head h1 {
    margin-block-end: var(--oc-space-1);
    font-size: var(--oc-text-2xl);
}

.admin__main[b-0v8809xuj5]  .admin-head__meta {
    margin: 0;
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.admin__main[b-0v8809xuj5]  .panel {
    padding: var(--oc-space-5);
    margin-block-end: var(--oc-space-5);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.admin__main[b-0v8809xuj5]  .panel h2 {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-lg);
}

/* Wide tables scroll inside their own container so the page never scrolls sideways. */
.admin__main[b-0v8809xuj5]  .table-scroll {
    overflow-x: auto;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.admin__main[b-0v8809xuj5]  table.admin-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--oc-text-sm);
}

.admin__main[b-0v8809xuj5]  .admin-table th,
.admin__main[b-0v8809xuj5]  .admin-table td {
    padding: var(--oc-space-3) var(--oc-space-4);
    text-align: start;
    white-space: nowrap;
    border-block-end: 1px solid var(--oc-color-border);
}

.admin__main[b-0v8809xuj5]  .admin-table th {
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-xs);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-color-text-muted);
    background-color: var(--oc-gray-050);
}

.admin__main[b-0v8809xuj5]  .admin-table tbody tr:last-child td {
    border-block-end: 0;
}

.admin__main[b-0v8809xuj5]  .admin-table tbody tr:hover {
    background-color: var(--oc-gray-050);
}

.admin__main[b-0v8809xuj5]  .numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.admin__main[b-0v8809xuj5]  .mono {
    font-family: var(--oc-font-mono);
    font-weight: var(--oc-weight-semibold);
}

.admin__main[b-0v8809xuj5]  .muted {
    color: var(--oc-color-text-muted);
}

.admin__main[b-0v8809xuj5]  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin-block-end: var(--oc-space-5);
}

.admin__main[b-0v8809xuj5]  .filters__chip {
    padding: var(--oc-space-1) var(--oc-space-3);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-text);
    text-decoration: none;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-pill);
}

.admin__main[b-0v8809xuj5]  .filters__chip--active {
    color: var(--oc-white);
    background-color: var(--oc-gray-900);
    border-color: var(--oc-gray-900);
}

.admin__main[b-0v8809xuj5]  .empty {
    padding: var(--oc-space-6);
    text-align: center;
    color: var(--oc-color-text-muted);
    background-color: var(--oc-white);
    border: 1px dashed var(--oc-color-border-strong);
    border-radius: var(--oc-radius-lg);
}

/* --- status pills. Shared vocabulary across orders and quotes. ----------- */

.admin__main[b-0v8809xuj5]  .status {
    display: inline-block;
    padding: var(--oc-space-1) var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    border-radius: var(--oc-radius-sm);
    background-color: var(--oc-gray-100);
}

.admin__main[b-0v8809xuj5]  .status--new,
.admin__main[b-0v8809xuj5]  .status--awaitingpayment {
    color: var(--oc-white);
    background-color: var(--oc-cyan-ink);
}

.admin__main[b-0v8809xuj5]  .status--paid,
.admin__main[b-0v8809xuj5]  .status--completed,
.admin__main[b-0v8809xuj5]  .status--shipped,
.admin__main[b-0v8809xuj5]  .status--quoted,
.admin__main[b-0v8809xuj5]  .status--accepted,
.admin__main[b-0v8809xuj5]  .status--convertedtoorder,
.admin__main[b-0v8809xuj5]  .status--active {
    color: var(--oc-white);
    background-color: var(--oc-color-success);
}

.admin__main[b-0v8809xuj5]  .status--inproduction,
.admin__main[b-0v8809xuj5]  .status--readyforpickup,
.admin__main[b-0v8809xuj5]  .status--manualreviewrequired,
.admin__main[b-0v8809xuj5]  .status--needsinfo,
.admin__main[b-0v8809xuj5]  .status--invited {
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
}

.admin__main[b-0v8809xuj5]  .status--paymentfailed,
.admin__main[b-0v8809xuj5]  .status--cancelled,
.admin__main[b-0v8809xuj5]  .status--expired,
.admin__main[b-0v8809xuj5]  .status--refunded,
.admin__main[b-0v8809xuj5]  .status--partiallyrefunded,
.admin__main[b-0v8809xuj5]  .status--locked {
    color: var(--oc-white);
    background-color: var(--oc-red-ink);
}

@media (min-width: 64rem) {
    .admin[b-0v8809xuj5] {
        flex-direction: row;
    }

    .admin__sidebar[b-0v8809xuj5] {
        position: sticky;
        top: 0;
        width: 15rem;
        height: 100dvh;
        flex-shrink: 0;
    }

    .admin__main[b-0v8809xuj5] {
        padding: var(--oc-space-6);
    }
}
/* /Components/Layout/MarketingLayout.razor.rz.scp.css */
/* Sticky footer: shell fills the viewport, main takes the slack, footer sits at
   the bottom even on short pages. */
.page-shell[b-gzt1m6svll] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.page-shell__main[b-gzt1m6svll] {
    flex: 1;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-mc62lgv389],
.components-reconnect-repeated-attempt-visible[b-mc62lgv389],
.components-reconnect-failed-visible[b-mc62lgv389],
.components-pause-visible[b-mc62lgv389],
.components-resume-failed-visible[b-mc62lgv389],
.components-rejoining-animation[b-mc62lgv389] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-retrying[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-failed[b-mc62lgv389],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-mc62lgv389] {
    display: block;
}


#components-reconnect-modal[b-mc62lgv389] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mc62lgv389 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-mc62lgv389 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-mc62lgv389 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-mc62lgv389]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-mc62lgv389 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-mc62lgv389 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-mc62lgv389 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-mc62lgv389 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-mc62lgv389] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-mc62lgv389] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-mc62lgv389] {
    border: 0;
    background-color: var(--oc-cyan-ink);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-mc62lgv389] {
        background-color: var(--oc-cyan-800);
    }

    #components-reconnect-modal button:active[b-mc62lgv389] {
        background-color: var(--oc-cyan-ink);
    }

.components-rejoining-animation[b-mc62lgv389] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-mc62lgv389] {
        position: absolute;
        border: 3px solid var(--oc-cyan-brand);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-mc62lgv389 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-mc62lgv389] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-mc62lgv389 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/Shared/SiteFooter.razor.rz.scp.css */
.site-footer[b-o1qcjw1fua] {
    margin-block-start: auto;
    padding-block: var(--oc-space-8) var(--oc-space-5);
    color: var(--oc-gray-200);
    background-color: var(--oc-gray-900);
}

.site-footer__grid[b-o1qcjw1fua] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-6);
}

/* --- brand block -------------------------------------------------------- */

.site-footer .brand[b-o1qcjw1fua] {
    display: inline-flex;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-2xl);
    font-weight: var(--oc-weight-bold);
    letter-spacing: var(--oc-tracking-tight);
    color: var(--oc-white);
}

.site-footer .brand__mark[b-o1qcjw1fua] {
    /* Brand red on the near-black footer measures ~4.6:1, and at 28px display
       weight it clears AA comfortably. */
    color: var(--oc-orange-brand);
}

.site-footer__tagline[b-o1qcjw1fua] {
    margin-block: var(--oc-space-2) var(--oc-space-3);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-lg);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    color: var(--oc-amber-brand);
}

.site-footer__blurb[b-o1qcjw1fua] {
    max-width: 34ch;
    font-size: var(--oc-text-sm);
    line-height: var(--oc-leading-relaxed);
    color: var(--oc-gray-300);
}

/* --- columns ------------------------------------------------------------ */

.site-footer__heading[b-o1qcjw1fua] {
    margin-block: 0 var(--oc-space-3);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-white);
}

.site-footer__list[b-o1qcjw1fua] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-2);
}

.site-footer__list--spaced[b-o1qcjw1fua] {
    margin-block-start: var(--oc-space-4);
}

.site-footer__list li[b-o1qcjw1fua] {
    max-width: none;
}

.site-footer a[b-o1qcjw1fua] {
    font-size: var(--oc-text-sm);
    color: var(--oc-gray-200);
    text-decoration: none;
}

.site-footer a:hover[b-o1qcjw1fua] {
    color: var(--oc-white);
    text-decoration: underline;
}

.site-footer__address[b-o1qcjw1fua] {
    margin-block: 0 var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-style: normal;
    line-height: var(--oc-leading-relaxed);
    color: var(--oc-gray-300);
}

.site-footer__contact[b-o1qcjw1fua],
.site-footer__hours[b-o1qcjw1fua] {
    margin-block: 0 var(--oc-space-2);
    font-size: var(--oc-text-sm);
    color: var(--oc-gray-300);
}

/* --- bottom bar --------------------------------------------------------- */

.site-footer__bottom[b-o1qcjw1fua] {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-3);
    margin-block-start: var(--oc-space-7);
    padding-block-start: var(--oc-space-5);
    border-block-start: 1px solid var(--oc-gray-800);
}

.site-footer__copyright[b-o1qcjw1fua] {
    margin: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-gray-400);
}

.site-footer__legal[b-o1qcjw1fua] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__legal li[b-o1qcjw1fua] {
    max-width: none;
}

.site-footer__legal a[b-o1qcjw1fua] {
    font-size: var(--oc-text-xs);
}

/* --- responsive --------------------------------------------------------- */

@media (min-width: 40rem) {
    .site-footer__grid[b-o1qcjw1fua] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .site-footer__grid[b-o1qcjw1fua] {
        /* Brand block gets extra room; the three link columns share the rest. */
        grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
        gap: var(--oc-space-7);
    }

    .site-footer__bottom[b-o1qcjw1fua] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
/* /Components/Layout/Shared/SiteHeader.razor.rz.scp.css */
/* ===========================================================================
   Site header.

   ::deep IS LOAD-BEARING HERE, NOT DECORATION.

   Blazor scoped CSS stamps its b-xxxxx attribute only onto elements written
   directly in THIS component's markup. <NavLink> renders its <a> from inside
   the NavLink component, so that anchor never receives this component's scope —
   which meant every plain `.primary-nav__link { … }` rule silently matched
   nothing and the nav rendered as unstyled default links.

   Any selector targeting NavLink output must therefore be written as
   `<local-element> ::deep <selector>`, where the left-hand side IS in this
   file's markup. Plain elements (.header-cta, .nav-toggle) don't need it.
   =========================================================================== */

.site-header[b-klknqav666] {
    position: sticky;
    top: 0;
    z-index: var(--oc-z-header);
    background-color: var(--oc-white);
    box-shadow: 0 1px 0 var(--oc-color-border);
}

/* Two-tone hairline in the brand colors. */
.site-header[b-klknqav666]::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(to right,
        var(--oc-orange-brand) 0 50%,
        var(--oc-cyan-brand) 50% 100%);
}

.site-header__inner[b-klknqav666] {
    display: flex;
    align-items: center;
    gap: var(--oc-space-5);
    min-height: var(--oc-header-height);
}

/* --- brand -------------------------------------------------------------- */

.brand[b-klknqav666] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

.brand__fallback[b-klknqav666] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-2xl);
    font-weight: var(--oc-weight-bold);
    letter-spacing: var(--oc-tracking-tight);
    line-height: 1;
}

.brand__o[b-klknqav666] {
    color: var(--oc-orange-brand);
}

.brand__word[b-klknqav666] {
    color: var(--oc-cyan-brand);
}

/* --- mobile toggle ------------------------------------------------------ */

.nav-toggle[b-klknqav666] {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    margin-inline-start: auto;
    padding: 0 0.6rem;
    background: none;
    border: 1px solid var(--oc-color-border-strong);
    border-radius: var(--oc-radius-md);
    cursor: pointer;
}

.nav-toggle__bar[b-klknqav666] {
    display: block;
    height: 2px;
    background-color: var(--oc-color-text);
    transition: transform var(--oc-duration-fast) var(--oc-ease-out),
                opacity var(--oc-duration-fast) var(--oc-ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1)[b-klknqav666] {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2)[b-klknqav666] {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3)[b-klknqav666] {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- navigation --------------------------------------------------------- */

.primary-nav[b-klknqav666] {
    display: none;
    flex: 1;
}

.primary-nav[data-open="true"][b-klknqav666] {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding: var(--oc-space-3) var(--oc-container-pad) var(--oc-space-5);
    background-color: var(--oc-white);
    border-bottom: 1px solid var(--oc-color-border);
    box-shadow: var(--oc-shadow-lg);
}

.primary-nav__list[b-klknqav666] {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__list li[b-klknqav666] {
    max-width: none;
}

/* ::deep — see the file header. Without it these rules match nothing. */
.primary-nav__list[b-klknqav666]  .primary-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--oc-space-3) var(--oc-space-3);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-lg);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    color: var(--oc-color-text);
    text-decoration: none;
    border-radius: var(--oc-radius-md);
    transition: color var(--oc-duration-fast) var(--oc-ease-out),
                background-color var(--oc-duration-fast) var(--oc-ease-out);
}

.primary-nav__list[b-klknqav666]  .primary-nav__link:hover {
    color: var(--oc-orange-ink);
    background-color: var(--oc-orange-050);
}

/* On mobile the active item gets a solid leading bar — clearer than an
   underline at this size. NavLink adds `active` server-side from the URI. */
.primary-nav__list[b-klknqav666]  .primary-nav__link.active {
    color: var(--oc-orange-ink);
    background-color: var(--oc-orange-050);
    box-shadow: inset 3px 0 0 var(--oc-orange-brand);
}

/* --- account + CTA ------------------------------------------------------ */

.site-header__actions[b-klknqav666] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oc-space-4);
    margin-block-start: var(--oc-space-4);
    padding-block-start: var(--oc-space-4);
    border-block-start: 1px solid var(--oc-color-border);
}

.account-group[b-klknqav666] {
    display: flex;
    align-items: center;
    gap: var(--oc-space-3);
}

.account-group[b-klknqav666]  .account-link,
.account-group[b-klknqav666]  .admin-link {
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-text-muted);
    text-decoration: none;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-group[b-klknqav666]  .account-link:hover {
    color: var(--oc-color-link);
    text-decoration: underline;
}

/* Staff shortcut into the admin console. Visually distinct from the customer
   account links so it reads as a tool, not a profile. */
.account-group[b-klknqav666]  .admin-link {
    padding: var(--oc-space-1) var(--oc-space-3);
    font-family: var(--oc-font-nav);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    color: var(--oc-cyan-ink);
    background-color: var(--oc-cyan-050);
    border: 1px solid var(--oc-cyan-100);
    border-radius: var(--oc-radius-pill);
}

.account-group[b-klknqav666]  .admin-link:hover {
    color: var(--oc-white);
    background-color: var(--oc-cyan-ink);
    border-color: var(--oc-cyan-ink);
}

.logout-form[b-klknqav666] {
    margin: 0;
}

/* A submit button that has to look like a link, because logging out must be a
   POST (a GET logout link is CSRF-able and gets prefetched by browsers). */
.btn-link-plain[b-klknqav666] {
    padding: 0;
    font-family: inherit;
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.btn-link-plain:hover[b-klknqav666] {
    color: var(--oc-color-link);
    text-decoration: underline;
}

/* The single most important control in the header. Deliberately the only solid
   fill up here, so nothing competes with it. */
.header-cta[b-klknqav666] {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-2);
    padding: var(--oc-space-3) var(--oc-space-5);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-base);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    /* White on orange ink is 5.18:1 — passes AA. The brand orange would be
       3.39:1 and fail for a label this size. */
    color: var(--oc-white);
    background-color: var(--oc-orange-ink);
    border-radius: var(--oc-radius-pill);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--oc-shadow-sm);
    transition: background-color var(--oc-duration-fast) var(--oc-ease-out),
                box-shadow var(--oc-duration-fast) var(--oc-ease-out);
}

.header-cta:hover[b-klknqav666] {
    color: var(--oc-white);
    background-color: var(--oc-orange-800);
    box-shadow: var(--oc-shadow-md);
}

.header-cta__arrow[b-klknqav666] {
    transition: transform var(--oc-duration-base) var(--oc-ease-out);
}

.header-cta:hover .header-cta__arrow[b-klknqav666] {
    transform: translateX(3px);
}

/* --- desktop ------------------------------------------------------------ */

@media (min-width: 64rem) {
    .nav-toggle[b-klknqav666] {
        display: none;
    }

    .primary-nav[b-klknqav666],
    .primary-nav[data-open="true"][b-klknqav666] {
        display: flex;
        position: static;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .primary-nav__list[b-klknqav666] {
        flex-direction: row;
        align-items: center;
        gap: var(--oc-space-1);
    }

    .primary-nav__list[b-klknqav666]  .primary-nav__link {
        padding: var(--oc-space-2) var(--oc-space-3);
        font-size: var(--oc-text-sm);
        background: none;
        box-shadow: none;
    }

    /* Animated underline growing from the center. Transform-only, so it runs on
       the compositor instead of triggering layout. */
    .primary-nav__list[b-klknqav666]  .primary-nav__link::after {
        content: "";
        position: absolute;
        inset-inline: var(--oc-space-3);
        bottom: 0.2rem;
        height: 2px;
        border-radius: 2px;
        background-color: var(--oc-orange-brand);
        transform: scaleX(0);
        transition: transform var(--oc-duration-base) var(--oc-ease-out);
    }

    .primary-nav__list[b-klknqav666]  .primary-nav__link:hover {
        color: var(--oc-orange-ink);
        background: none;
    }

    .primary-nav__list[b-klknqav666]  .primary-nav__link.active {
        color: var(--oc-orange-ink);
        background: none;
        box-shadow: none;
    }

    .primary-nav__list[b-klknqav666]  .primary-nav__link:hover::after,
    .primary-nav__list[b-klknqav666]  .primary-nav__link.active::after {
        transform: scaleX(1);
    }

    .site-header__actions[b-klknqav666] {
        margin-block-start: 0;
        padding-block-start: 0;
        border-block-start: 0;
        flex-wrap: nowrap;
    }
}

/* The underline animation is decorative; honor a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .primary-nav__list[b-klknqav666]  .primary-nav__link::after {
        transition: none;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.page-head[b-uk67962ykx] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-7);
}

.about[b-uk67962ykx] {
    display: grid;
    gap: var(--oc-space-7);
    align-items: start;
}

.about__body h2[b-uk67962ykx] {
    margin-block-start: var(--oc-space-6);
    font-size: var(--oc-text-2xl);
}

.about__body h2:first-child[b-uk67962ykx] {
    margin-block-start: 0;
}

.brands[b-uk67962ykx] {
    display: grid;
    gap: var(--oc-space-4);
    margin-block-start: var(--oc-space-5);
}

.brand-card[b-uk67962ykx] {
    padding: var(--oc-space-5);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-lg);
}

.brand-card h3[b-uk67962ykx] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-lg);
}

.brand-card:nth-child(1)[b-uk67962ykx] {
    border-inline-start: 4px solid var(--oc-cyan-brand);
}

.brand-card:nth-child(2)[b-uk67962ykx] {
    border-inline-start: 4px solid var(--oc-amber-brand);
}

.fact-card[b-uk67962ykx] {
    padding: var(--oc-space-5);
    margin-block-end: var(--oc-space-4);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.fact-card--accent[b-uk67962ykx] {
    background-color: var(--oc-orange-050);
    border-block-start: 4px solid var(--oc-orange-brand);
}

.fact-card h2[b-uk67962ykx] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-lg);
}

.fact-card ul[b-uk67962ykx] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--oc-text-sm);
}

.fact-card li[b-uk67962ykx] {
    max-width: none;
    padding-block: var(--oc-space-2);
    border-block-end: 1px solid var(--oc-color-border);
}

.fact-card li:last-child[b-uk67962ykx] {
    border-block-end: 0;
}

@media (min-width: 40rem) {
    .brands[b-uk67962ykx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .about[b-uk67962ykx] {
        grid-template-columns: 1.8fr 1fr;
    }
}
/* /Components/Pages/CartPage.razor.rz.scp.css */
.cart[b-91p36a53zq] {
    display: grid;
    gap: var(--oc-space-6);
    align-items: start;
    margin-block-start: var(--oc-space-5);
}

.cart-empty[b-91p36a53zq] {
    padding: var(--oc-space-8) var(--oc-space-5);
    text-align: center;
    background-color: var(--oc-gray-050);
    border: 1px dashed var(--oc-color-border-strong);
    border-radius: var(--oc-radius-lg);
}

.cart-empty h2[b-91p36a53zq] {
    font-size: var(--oc-text-xl);
}

.cart-empty .btn[b-91p36a53zq] {
    margin: var(--oc-space-2) var(--oc-space-1) 0;
}

/* --- lines -------------------------------------------------------------- */

.cart-line[b-91p36a53zq] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--oc-space-3);
    padding: var(--oc-space-4);
    margin-block-end: var(--oc-space-3);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.cart-line__name[b-91p36a53zq] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-lg);
}

.cart-line__name a[b-91p36a53zq] {
    color: var(--oc-color-text);
    text-decoration: none;
}

.cart-line__name a:hover[b-91p36a53zq] {
    color: var(--oc-orange-ink);
}

.cart-line__options[b-91p36a53zq] {
    margin: 0 0 var(--oc-space-2);
    padding: 0;
    list-style: none;
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.cart-line__options li[b-91p36a53zq] {
    max-width: none;
}

.cart-line__unit[b-91p36a53zq] {
    margin: 0;
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.cart-line__actions[b-91p36a53zq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--oc-space-3);
    grid-column: 1 / -1;
    padding-block-start: var(--oc-space-3);
    border-block-start: 1px solid var(--oc-color-border);
}

.cart-line__actions form[b-91p36a53zq] {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    margin: 0;
}

.cart-line__qty[b-91p36a53zq] {
    width: 5rem;
}

.cart-line__total[b-91p36a53zq] {
    margin: 0;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    font-weight: var(--oc-weight-bold);
    text-align: end;
    white-space: nowrap;
}

.btn-link-quiet[b-91p36a53zq] {
    padding: 0;
    font-family: inherit;
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-medium);
    color: var(--oc-color-link);
    background: none;
    border: 0;
    cursor: pointer;
}

.btn-link-quiet:hover[b-91p36a53zq] {
    text-decoration: underline;
}

.btn-link-quiet--danger[b-91p36a53zq] {
    color: var(--oc-color-danger);
}

/* --- summary ------------------------------------------------------------ */

.cart__summary[b-91p36a53zq] {
    padding: var(--oc-space-5);
    background-color: var(--oc-gray-050);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.cart__summary h2[b-91p36a53zq] {
    font-size: var(--oc-text-lg);
}

.cart-totals[b-91p36a53zq] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin-block-end: var(--oc-space-5);
    padding-block-end: var(--oc-space-4);
    font-size: var(--oc-text-sm);
    border-block-end: 1px solid var(--oc-color-border);
}

.cart-totals dt[b-91p36a53zq] {
    color: var(--oc-color-text-muted);
}

.cart-totals dd[b-91p36a53zq] {
    margin: 0;
    text-align: end;
    font-weight: var(--oc-weight-semibold);
}

.cart-totals__muted[b-91p36a53zq] {
    font-weight: var(--oc-weight-normal) !important;
    color: var(--oc-color-text-muted);
}

.cart-field[b-91p36a53zq] {
    margin-block-end: var(--oc-space-4);
}

.cart-field label[b-91p36a53zq],
.cart-field__label[b-91p36a53zq] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.cart-field__hint[b-91p36a53zq] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.cart__checkout[b-91p36a53zq] {
    width: 100%;
}

.cart__secure[b-91p36a53zq] {
    margin-block-start: var(--oc-space-3);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    text-align: center;
    color: var(--oc-color-text-muted);
}

@media (min-width: 64rem) {
    .cart[b-91p36a53zq] {
        grid-template-columns: 1.7fr 1fr;
    }

    .cart-line__actions[b-91p36a53zq] {
        grid-column: auto;
        padding-block-start: 0;
        border-block-start: 0;
    }
}
/* /Components/Pages/CheckoutThankYou.razor.rz.scp.css */
.thanks[b-eiww7e7hei] {
    padding-block: var(--oc-space-6);
}

.thanks__reference[b-eiww7e7hei] {
    display: inline-block;
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-end: var(--oc-space-5);
    font-size: var(--oc-text-lg);
    background-color: var(--oc-amber-050);
    border-inline-start: 4px solid var(--oc-amber-brand);
    border-radius: var(--oc-radius-md);
}

.thanks__lines[b-eiww7e7hei] {
    margin: 0 0 var(--oc-space-5);
    padding: 0;
    list-style: none;
}

.thanks__lines li[b-eiww7e7hei] {
    display: flex;
    align-items: baseline;
    gap: var(--oc-space-3);
    max-width: none;
    padding-block: var(--oc-space-3);
    border-block-end: 1px solid var(--oc-color-border);
}

.thanks__qty[b-eiww7e7hei] {
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
}

.thanks__amount[b-eiww7e7hei] {
    margin-inline-start: auto;
    font-weight: var(--oc-weight-semibold);
    white-space: nowrap;
}

.thanks__totals[b-eiww7e7hei] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin-block-end: var(--oc-space-6);
}

.thanks__totals dt[b-eiww7e7hei] {
    color: var(--oc-color-text-muted);
}

.thanks__totals dd[b-eiww7e7hei] {
    margin: 0;
    text-align: end;
    font-weight: var(--oc-weight-semibold);
}

.thanks__grand[b-eiww7e7hei] {
    padding-block-start: var(--oc-space-3);
    border-block-start: 1px solid var(--oc-color-border);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    color: var(--oc-color-text) !important;
}

.thanks__action[b-eiww7e7hei] {
    padding: var(--oc-space-5);
    margin-block-end: var(--oc-space-5);
    background-color: var(--oc-cyan-050);
    border-inline-start: 4px solid var(--oc-cyan-brand);
    border-radius: var(--oc-radius-lg);
}

.thanks__action h2[b-eiww7e7hei] {
    font-size: var(--oc-text-lg);
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.page-head[b-aatptha9em] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-7);
}

.contact-grid[b-aatptha9em] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-5);
}

.contact-card[b-aatptha9em] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--oc-space-5);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.contact-card--primary[b-aatptha9em] {
    border-block-start: 4px solid var(--oc-orange-brand);
    background-color: var(--oc-orange-050);
}

.contact-card h2[b-aatptha9em] {
    font-size: var(--oc-text-xl);
}

.contact-card address[b-aatptha9em] {
    margin-block-end: var(--oc-space-3);
    font-style: normal;
    line-height: var(--oc-leading-relaxed);
}

.contact-card__meta[b-aatptha9em] {
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.contact-card .btn[b-aatptha9em] {
    margin-block-start: auto;
}

@media (min-width: 64rem) {
    .contact-grid[b-aatptha9em] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Components/Pages/Dtf.razor.rz.scp.css */
.page-head[b-pjlda5d4vd] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-7);
}

/* The single most important sentence on the page: people arrive expecting the 22" gang
   sheets other suppliers advertise. Give it enough weight to be read. */
.press-limit[b-pjlda5d4vd] {
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-start: var(--oc-space-4);
    font-size: var(--oc-text-sm);
    background-color: var(--oc-orange-050);
    border-inline-start: 4px solid var(--oc-orange-brand);
    border-radius: var(--oc-radius-md);
}

.quote-layout[b-pjlda5d4vd] {
    display: grid;
    gap: var(--oc-space-7);
    align-items: start;
}

/* --- form --------------------------------------------------------------- */

.quote-form fieldset[b-pjlda5d4vd] {
    margin-block-end: var(--oc-space-6);
    padding: 0;
    border: 0;
}

.quote-form legend[b-pjlda5d4vd] {
    width: 100%;
    margin-block-end: var(--oc-space-4);
    padding-block-end: var(--oc-space-2);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    font-weight: var(--oc-weight-semibold);
    border-block-end: 1px solid var(--oc-color-border);
}

.field[b-pjlda5d4vd] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-pjlda5d4vd],
.field__label[b-pjlda5d4vd] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__optional[b-pjlda5d4vd] {
    font-weight: var(--oc-weight-normal);
    color: var(--oc-color-text-muted);
}

.field__hint[b-pjlda5d4vd] {
    margin-block: var(--oc-space-2) var(--oc-space-4);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.field-row[b-pjlda5d4vd] {
    display: grid;
    gap: var(--oc-space-4);
}

/* --- radio and checkbox choices ----------------------------------------- */

/* Bigger than a bare .form-check because these carry a hint line and are the primary
   decision on the page. The whole block is a label, so the hit area is the full row. */
.choice[b-pjlda5d4vd] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-3);
    align-items: start;
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-end: var(--oc-space-2);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    cursor: pointer;
}

.choice:hover[b-pjlda5d4vd] {
    border-color: var(--oc-color-border-strong);
    background-color: var(--oc-gray-050);
}

.choice:focus-within[b-pjlda5d4vd] {
    border-color: var(--oc-color-focus);
}

.choice--compact[b-pjlda5d4vd] {
    padding: var(--oc-space-2) var(--oc-space-3);
}

.choice input[b-pjlda5d4vd] {
    margin-block-start: 0.15em;
}

/* Overrides .field label, which is block-level and bold with a bottom margin. */
.choice__label[b-pjlda5d4vd] {
    display: block;
    margin-block-end: 0;
    font-weight: var(--oc-weight-normal);
    cursor: pointer;
}

.choice__title[b-pjlda5d4vd] {
    display: block;
    font-size: var(--oc-text-base);
    font-weight: var(--oc-weight-semibold);
}

.choice__hint[b-pjlda5d4vd] {
    display: block;
    margin-block-start: var(--oc-space-1);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

/* --- carried-over uploads ----------------------------------------------- */

.upload-carried[b-pjlda5d4vd] {
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
    background-color: var(--oc-cyan-050);
    border-inline-start: 4px solid var(--oc-cyan-brand);
    border-radius: var(--oc-radius-md);
}

/* .upload-list and .upload-row* live in site.css - shared with /quote and /estimate, and
   unscoped so they reach the rows uploader.js creates at runtime. */

/* --- honeypot ----------------------------------------------------------- */

/* Off-screen rather than display:none - some bots skip hidden fields, and this still
   keeps it away from sighted users. */
.honeypot[b-pjlda5d4vd] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- aside -------------------------------------------------------------- */

.quote-aside[b-pjlda5d4vd] {
    padding: var(--oc-space-5);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-lg);
}

.quote-aside__title[b-pjlda5d4vd] {
    margin-block: 0 var(--oc-space-3);
    font-size: var(--oc-text-lg);
}

.quote-aside__title + *[b-pjlda5d4vd] {
    margin-block-end: var(--oc-space-5);
}

.quote-aside__steps[b-pjlda5d4vd],
.quote-aside__specs[b-pjlda5d4vd] {
    padding-inline-start: var(--oc-space-5);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.quote-aside__steps li[b-pjlda5d4vd],
.quote-aside__specs li[b-pjlda5d4vd] {
    margin-block-end: var(--oc-space-2);
}

.quote-aside__note[b-pjlda5d4vd] {
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

@media (min-width: 40rem) {
    .field-row[b-pjlda5d4vd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .quote-layout[b-pjlda5d4vd] {
        grid-template-columns: 1.7fr 1fr;
    }
}

/* Shown only when "Ship to me" is selected. delivery-form.js toggles the [hidden]
   attribute; the server renders it visible so the form still works without JavaScript. */
.ship-to[b-pjlda5d4vd] {
    padding: var(--oc-space-4);
    margin-block-end: var(--oc-space-4);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-md);
}

.ship-to > .field__label[b-pjlda5d4vd] {
    margin-block-end: var(--oc-space-3);
}
/* /Components/Pages/Estimate.razor.rz.scp.css */
.page-head[b-2vvr18z4yd] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-6);
}

.estimator[b-2vvr18z4yd] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: start;
}

.panel[b-2vvr18z4yd] {
    padding: var(--oc-space-5);
    margin-block-end: var(--oc-space-4);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.panel h2[b-2vvr18z4yd] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-lg);
}

.hint[b-2vvr18z4yd] {
    margin-block-start: var(--oc-space-3);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

/* --- per-file rows ------------------------------------------------------ */

/* These rows are rendered by Blazor, so ordinary scoped rules reach them. The
   uploader's progress rows on this same page are created by JavaScript and carry no
   b-xxxxx attribute, so they are styled unscoped from site.css instead. Two row
   systems, two rules — do not merge them. */

.job-files[b-2vvr18z4yd] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.job-file[b-2vvr18z4yd] {
    padding: var(--oc-space-4);
    margin-block-end: var(--oc-space-3);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-md);
}

.job-file__head[b-2vvr18z4yd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--oc-space-3);
    margin-block-end: var(--oc-space-3);
}

.job-file__name[b-2vvr18z4yd] {
    font-weight: var(--oc-weight-semibold);
    overflow-wrap: anywhere;
}

.job-file__remove[b-2vvr18z4yd] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--oc-color-text-muted);
    font-size: var(--oc-text-xs);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.job-file__remove:hover[b-2vvr18z4yd],
.job-file__remove:focus-visible[b-2vvr18z4yd] {
    color: var(--oc-color-danger);
}

.job-file__remove:focus-visible[b-2vvr18z4yd] {
    outline: 2px solid var(--oc-color-danger);
    outline-offset: 2px;
    border-radius: var(--oc-radius-sm);
}

.job-file__grid[b-2vvr18z4yd] {
    display: grid;
    gap: var(--oc-space-4);
}

.job-file__size[b-2vvr18z4yd] {
    margin-block-end: var(--oc-space-1);
    font-size: var(--oc-text-lg);
}

.job-file__detail[b-2vvr18z4yd] {
    margin-block-end: var(--oc-space-1);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.job-file__status[b-2vvr18z4yd] {
    margin: 0;
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

/* Amber, not red: a file we quote by hand is a normal outcome, not a failure. */
.job-file__status--manual[b-2vvr18z4yd] {
    padding: var(--oc-space-3);
    background-color: var(--oc-amber-050);
    border-inline-start: 4px solid var(--oc-amber-brand);
    border-radius: var(--oc-radius-sm);
    color: var(--oc-color-text);
}

.job-file__status--error[b-2vvr18z4yd] {
    color: var(--oc-color-danger);
}

.job-file__controls[b-2vvr18z4yd] {
    display: grid;
    gap: var(--oc-space-3);
}

.field-label[b-2vvr18z4yd],
.field label[b-2vvr18z4yd] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__hint[b-2vvr18z4yd] {
    margin-block-start: var(--oc-space-2);
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.warnings[b-2vvr18z4yd] {
    margin-block-start: var(--oc-space-4);
    margin-block-end: 0;
    padding-inline-start: var(--oc-space-5);
    font-size: var(--oc-text-sm);
    color: var(--oc-amber-ink);
}

.warnings li[b-2vvr18z4yd] {
    max-width: none;
}

/* --- settings ----------------------------------------------------------- */

.settings[b-2vvr18z4yd] {
    display: grid;
    gap: var(--oc-space-4);
    margin-block-end: var(--oc-space-3);
}

.field[b-2vvr18z4yd] {
    margin: 0;
}

/* --- quote -------------------------------------------------------------- */

.quote[b-2vvr18z4yd] {
    position: sticky;
    top: calc(var(--oc-header-height) + var(--oc-space-4));
}

.quote--empty[b-2vvr18z4yd] {
    background-color: var(--oc-gray-050);
    border-style: dashed;
}

.quote__range[b-2vvr18z4yd] {
    margin-block-end: var(--oc-space-1);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-3xl);
    font-weight: var(--oc-weight-bold);
    line-height: var(--oc-leading-tight);
}

.quote__basis[b-2vvr18z4yd] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.quote__breakdown[b-2vvr18z4yd] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-2) var(--oc-space-4);
    padding-block: var(--oc-space-4);
    margin: 0 0 var(--oc-space-4);
    font-size: var(--oc-text-sm);
    border-block: 1px solid var(--oc-color-border);
}

.quote__breakdown dt[b-2vvr18z4yd] {
    color: var(--oc-color-text-muted);
}

.quote__breakdown dd[b-2vvr18z4yd] {
    margin: 0;
    text-align: end;
    font-weight: var(--oc-weight-semibold);
}

.quote__notes[b-2vvr18z4yd] {
    margin-block-end: var(--oc-space-4);
    padding-inline-start: var(--oc-space-5);
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.quote__notes li[b-2vvr18z4yd] {
    max-width: none;
}

.quote__disclaimer[b-2vvr18z4yd] {
    padding: var(--oc-space-3);
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-xs);
    color: var(--oc-cyan-800);
    background-color: var(--oc-cyan-050);
    border-radius: var(--oc-radius-md);
}

.quote__cta[b-2vvr18z4yd] {
    width: 100%;
}

.muted[b-2vvr18z4yd] {
    color: var(--oc-color-text-muted);
}

/* .upload-list and .upload-row* live in site.css - shared with /quote and /dtf, and
   unscoped so they reach the rows uploader.js creates at runtime. */

@media (min-width: 40rem) {
    .settings[b-2vvr18z4yd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .estimator[b-2vvr18z4yd] {
        grid-template-columns: 1.7fr 1fr;
    }
}

/* Allowances are secondary to the filament figure they sit under: the printed weight is
   what the customer checks against their slicer, and these two explain the gap between
   it and what they are billed for. */
.quote__breakdown .quote__allowance[b-2vvr18z4yd] {
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-normal);
    color: var(--oc-color-text-muted);
}

@media (min-width: 40rem) {
    .job-file__grid[b-2vvr18z4yd] {
        grid-template-columns: 1fr 1fr;
    }

    .job-file__controls[b-2vvr18z4yd] {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
}
/* /Components/Pages/Gallery.razor.rz.scp.css */
.page-head[b-7e6l7lp3np] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-6);
}

.filters[b-7e6l7lp3np] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin-block-end: var(--oc-space-5);
}

.filters__chip[b-7e6l7lp3np] {
    padding: var(--oc-space-2) var(--oc-space-4);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    color: var(--oc-color-text);
    text-decoration: none;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-pill);
}

.filters__chip--active[b-7e6l7lp3np] {
    color: var(--oc-white);
    background-color: var(--oc-gray-900);
    border-color: var(--oc-gray-900);
}

.gallery-grid[b-7e6l7lp3np] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-4);
}

.project[b-7e6l7lp3np] {
    overflow: hidden;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.project__media[b-7e6l7lp3np] {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: var(--oc-space-5);
    text-align: center;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    font-weight: var(--oc-weight-bold);
    color: var(--oc-gray-300);
    background:
        repeating-linear-gradient(45deg,
            var(--oc-gray-050) 0 14px,
            var(--oc-white) 14px 28px);
    border-block-end: 1px solid var(--oc-color-border);
}

.project__body[b-7e6l7lp3np] {
    padding: var(--oc-space-4);
}

.project__kind[b-7e6l7lp3np] {
    display: inline-block;
    margin-block-end: var(--oc-space-2);
    padding: var(--oc-space-1) var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    color: var(--oc-cyan-800);
    background-color: var(--oc-cyan-050);
    border-radius: var(--oc-radius-sm);
}

.project__title[b-7e6l7lp3np] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-lg);
}

.project__summary[b-7e6l7lp3np] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.project__materials[b-7e6l7lp3np] {
    margin: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-gray-400);
}

.empty-state[b-7e6l7lp3np] {
    padding: var(--oc-space-8) var(--oc-space-5);
    text-align: center;
    background-color: var(--oc-gray-050);
    border: 1px dashed var(--oc-color-border-strong);
    border-radius: var(--oc-radius-lg);
}

.empty-state h2[b-7e6l7lp3np] {
    font-size: var(--oc-text-xl);
}

.empty-state p[b-7e6l7lp3np] {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--oc-color-text-muted);
}

.empty-state .btn[b-7e6l7lp3np] {
    margin: var(--oc-space-2) var(--oc-space-1) 0;
}

@media (min-width: 40rem) {
    .gallery-grid[b-7e6l7lp3np] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .gallery-grid[b-7e6l7lp3np] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--oc-space-5);
    }
}

/* A real photo fills the media box entirely, overriding the placeholder's padding and
   centring. The 4:3 aspect-ratio on .project__media still governs the card's height, so
   the grid keeps its rhythm no matter what shape the photo is. */
.project__image[b-7e6l7lp3np] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* The placeholder's padding would inset the photo; a cell containing an image should be
   edge to edge. */
.project__media:has(.project__image)[b-7e6l7lp3np] {
    padding: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* --- hero --------------------------------------------------------------- */

.hero[b-pifhn8806c] {
    padding-block: var(--oc-space-8) var(--oc-space-7);
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%, var(--oc-orange-050) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 95% 20%, var(--oc-cyan-050) 0%, transparent 60%),
        var(--oc-white);
    border-block-end: 1px solid var(--oc-color-border);
}

.hero__inner[b-pifhn8806c] {
    display: grid;
    gap: var(--oc-space-7);
}

.hero__title[b-pifhn8806c] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-5xl);
    font-weight: var(--oc-weight-bold);
    text-transform: uppercase;
}

.hero__actions[b-pifhn8806c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
    margin-block-start: var(--oc-space-6);
}

.hero__stats[b-pifhn8806c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--oc-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero__stats li[b-pifhn8806c] {
    max-width: none;
    padding: var(--oc-space-4);
    text-align: center;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-sm);
}

/* Each stat card gets one of the three brand colors as a top rule. */
.hero__stats li:nth-child(1)[b-pifhn8806c] { border-block-start: 3px solid var(--oc-orange-brand); }
.hero__stats li:nth-child(2)[b-pifhn8806c] { border-block-start: 3px solid var(--oc-amber-brand); }
.hero__stats li:nth-child(3)[b-pifhn8806c] { border-block-start: 3px solid var(--oc-cyan-brand); }

.hero__stat-value[b-pifhn8806c] {
    display: block;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-2xl);
    font-weight: var(--oc-weight-bold);
    line-height: var(--oc-leading-tight);
    text-transform: uppercase;
}

.hero__stat-label[b-pifhn8806c] {
    display: block;
    margin-block-start: var(--oc-space-1);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

/* --- section heading ---------------------------------------------------- */

.section-head[b-pifhn8806c] {
    max-width: 44rem;
    margin-block-end: var(--oc-space-6);
}

/* --- cards -------------------------------------------------------------- */

.card-grid[b-pifhn8806c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-5);
}

.service-card[b-pifhn8806c] {
    display: flex;
    flex-direction: column;
    padding: var(--oc-space-5);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
    transition: box-shadow var(--oc-duration-base) var(--oc-ease-out),
                transform var(--oc-duration-base) var(--oc-ease-out);
}

.service-card:hover[b-pifhn8806c] {
    transform: translateY(-2px);
    box-shadow: var(--oc-shadow-md);
}

.service-card__title[b-pifhn8806c] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-xl);
}

.service-card__link[b-pifhn8806c] {
    margin-block-start: auto;
    padding-block-start: var(--oc-space-3);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-action);
    text-decoration: none;
}

.service-card__link:hover[b-pifhn8806c] {
    color: var(--oc-color-action-hover);
    text-decoration: underline;
}

/* --- feature split ------------------------------------------------------ */

.feature-split[b-pifhn8806c] {
    display: grid;
    gap: var(--oc-space-6);
    align-items: center;
}

.feature-split__aside[b-pifhn8806c] {
    padding: var(--oc-space-5);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-inline-start: 4px solid var(--oc-cyan-brand);
    border-radius: var(--oc-radius-lg);
}

.feature-split__note[b-pifhn8806c] {
    margin: 0;
    font-size: var(--oc-text-sm);
    line-height: var(--oc-leading-relaxed);
    color: var(--oc-color-text-muted);
}

/* --- inverse section ---------------------------------------------------- */

/* The default eyebrow uses orange INK, which is too dark against the inverse
   band. The full brand orange measures 4.82:1 there — comfortably AA, and it
   keeps the accent on-brand rather than borrowing the warning color. */
.oc-eyebrow--light[b-pifhn8806c] {
    color: var(--oc-orange-brand);
}

.link-light[b-pifhn8806c] {
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-white);
}

.link-light:hover[b-pifhn8806c] {
    color: var(--oc-amber-brand);
}

/* --- responsive --------------------------------------------------------- */

@media (min-width: 40rem) {
    .card-grid[b-pifhn8806c] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .hero[b-pifhn8806c] {
        padding-block: var(--oc-space-9) var(--oc-space-8);
    }

    .hero__inner[b-pifhn8806c] {
        grid-template-columns: 1.4fr 1fr;
        align-items: center;
    }

    .hero__stats[b-pifhn8806c] {
        grid-template-columns: 1fr;
    }

    .card-grid[b-pifhn8806c] {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid--two[b-pifhn8806c] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--oc-space-7);
    }

    .feature-split[b-pifhn8806c] {
        grid-template-columns: 1.5fr 1fr;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound[b-c7hv2jl765] {
    padding-block: var(--oc-space-6);
}

.notfound__links[b-c7hv2jl765] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-5);
    margin-block-start: var(--oc-space-6);
    padding: 0;
    list-style: none;
}

.notfound__links li[b-c7hv2jl765] {
    max-width: none;
}

.notfound__links a[b-c7hv2jl765] {
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-lg);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
}
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
.breadcrumbs[b-hxa9h22ecg] {
    padding-block: var(--oc-space-3);
    background-color: var(--oc-gray-050);
    border-block-end: 1px solid var(--oc-color-border);
}

.breadcrumbs ol[b-hxa9h22ecg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin: 0;
    padding: 0;
    font-size: var(--oc-text-sm);
    list-style: none;
}

.breadcrumbs li[b-hxa9h22ecg] {
    max-width: none;
    color: var(--oc-color-text-muted);
}

.breadcrumbs li + li[b-hxa9h22ecg]::before {
    content: "/";
    margin-inline-end: var(--oc-space-2);
    color: var(--oc-gray-300);
}

.product[b-hxa9h22ecg] {
    display: grid;
    gap: var(--oc-space-6);
    align-items: start;
}

/* --- media -------------------------------------------------------------- */

.product__image-placeholder[b-hxa9h22ecg] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: var(--oc-space-6);
    text-align: center;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-2xl);
    font-weight: var(--oc-weight-bold);
    color: var(--oc-gray-300);
    background:
        repeating-linear-gradient(45deg,
            var(--oc-gray-050) 0 16px,
            var(--oc-white) 16px 32px);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.product__media-note[b-hxa9h22ecg] {
    margin-block-start: var(--oc-space-3);
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

/* --- info --------------------------------------------------------------- */

.product__meta[b-hxa9h22ecg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin-block-end: var(--oc-space-4);
}

.product__tag[b-hxa9h22ecg] {
    padding: var(--oc-space-1) var(--oc-space-3);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
    background-color: var(--oc-gray-100);
    border-radius: var(--oc-radius-pill);
}

.product__tag--info[b-hxa9h22ecg] {
    color: var(--oc-cyan-800);
    background-color: var(--oc-cyan-050);
}

.product__base-price[b-hxa9h22ecg] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-3xl);
    font-weight: var(--oc-weight-bold);
    margin-block-end: var(--oc-space-5);
}

.product__art-note[b-hxa9h22ecg] {
    padding: var(--oc-space-4);
    margin-block-start: var(--oc-space-5);
    font-size: var(--oc-text-sm);
    background-color: var(--oc-amber-050);
    border-inline-start: 4px solid var(--oc-amber-brand);
    border-radius: var(--oc-radius-md);
}

.product__description p[b-hxa9h22ecg] {
    margin-block-end: var(--oc-space-4);
}

/* --- related ------------------------------------------------------------ */

.product-grid[b-hxa9h22ecg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-4);
}

@media (min-width: 40rem) {
    .product-grid[b-hxa9h22ecg] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .product[b-hxa9h22ecg] {
        grid-template-columns: 1fr 1fr;
        gap: var(--oc-space-7);
    }

    .product-grid[b-hxa9h22ecg] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Gallery. The lead image is unconstrained in aspect so a tall part is not cropped —
   this is the page where the customer is actually inspecting the thing. */
.product__image[b-hxa9h22ecg] {
    inline-size: 100%;
    block-size: auto;
    display: block;
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-color-surface);
}

.product__thumbs[b-hxa9h22ecg] {
    list-style: none;
    margin: var(--oc-space-3) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: var(--oc-space-2);
}

.product__thumbs img[b-hxa9h22ecg] {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-sm);
}
/* /Components/Pages/Quote.razor.rz.scp.css */
.page-head[b-txzwv9d921] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-7);
}

.quote-layout[b-txzwv9d921] {
    display: grid;
    gap: var(--oc-space-7);
    align-items: start;
}

/* --- form --------------------------------------------------------------- */

.quote-form fieldset[b-txzwv9d921] {
    margin-block-end: var(--oc-space-6);
    padding: 0;
    border: 0;
}

.quote-form legend[b-txzwv9d921] {
    width: 100%;
    margin-block-end: var(--oc-space-4);
    padding-block-end: var(--oc-space-2);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    font-weight: var(--oc-weight-semibold);
    border-block-end: 1px solid var(--oc-color-border);
}

.field[b-txzwv9d921] {
    margin-block-end: var(--oc-space-4);
}

.field label[b-txzwv9d921],
.field__label[b-txzwv9d921] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.field__optional[b-txzwv9d921] {
    font-weight: var(--oc-weight-normal);
    color: var(--oc-color-text-muted);
}

.field__hint[b-txzwv9d921] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.field-row[b-txzwv9d921] {
    display: grid;
    gap: var(--oc-space-4);
}

/* --- carried-over estimate ----------------------------------------------- */

.carried-estimate[b-txzwv9d921] {
    padding: var(--oc-space-4);
    margin-block-end: var(--oc-space-4);
    background-color: var(--oc-cyan-050);
    border-inline-start: 4px solid var(--oc-cyan-brand);
    border-radius: var(--oc-radius-md);
}

.carried-estimate__title[b-txzwv9d921] {
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-wide);
    color: var(--oc-cyan-ink);
}

.carried-estimate__list[b-txzwv9d921] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--oc-space-1) var(--oc-space-4);
    margin: 0 0 var(--oc-space-3);
    font-size: var(--oc-text-sm);
}

.carried-estimate__list dt[b-txzwv9d921] {
    color: var(--oc-color-text-muted);
}

.carried-estimate__list dd[b-txzwv9d921] {
    margin: 0;
    font-weight: var(--oc-weight-semibold);
    overflow-wrap: anywhere;
}

.carried-estimate__note[b-txzwv9d921] {
    margin: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

/* --- carried-over uploads ----------------------------------------------- */

.upload-carried[b-txzwv9d921] {
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-end: var(--oc-space-3);
    font-size: var(--oc-text-sm);
    background-color: var(--oc-cyan-050);
    border-inline-start: 4px solid var(--oc-cyan-brand);
    border-radius: var(--oc-radius-md);
}

/* .upload-list and .upload-row* live in site.css - they're shared with /estimate and
   /dtf, and being unscoped is what lets them reach rows uploader.js creates at runtime
   without a ::deep on every selector. */

/* --- honeypot ----------------------------------------------------------- */

/* Off-screen rather than display:none - some bots skip hidden fields, and this
   still keeps it away from sighted users. aria-hidden and tabindex="-1" in the
   markup keep it away from assistive tech and keyboard navigation. */
.honeypot[b-txzwv9d921] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- aside -------------------------------------------------------------- */

.quote-aside[b-txzwv9d921] {
    padding: var(--oc-space-5);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-lg);
}

.quote-aside__title[b-txzwv9d921] {
    margin-block: 0 var(--oc-space-3);
    font-size: var(--oc-text-lg);
}

.quote-aside__title + *[b-txzwv9d921] {
    margin-block-end: var(--oc-space-5);
}

.quote-aside__steps[b-txzwv9d921] {
    padding-inline-start: var(--oc-space-5);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.quote-aside__steps li[b-txzwv9d921] {
    margin-block-end: var(--oc-space-2);
}

.quote-aside__note[b-txzwv9d921] {
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

@media (min-width: 40rem) {
    .field-row[b-txzwv9d921] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .quote-layout[b-txzwv9d921] {
        grid-template-columns: 1.7fr 1fr;
    }
}

/* Shown only when "Ship to me" is selected. delivery-form.js toggles the [hidden]
   attribute; the server renders it visible so the form still works without JavaScript. */
.ship-to[b-txzwv9d921] {
    padding: var(--oc-space-4);
    margin-block-end: var(--oc-space-4);
    background-color: var(--oc-gray-050);
    border-radius: var(--oc-radius-md);
}

.ship-to > .field__label[b-txzwv9d921] {
    margin-block-end: var(--oc-space-3);
}
/* /Components/Pages/QuoteSubmitted.razor.rz.scp.css */
.submitted[b-i001w6kub6] {
    padding-block: var(--oc-space-6);
}

.submitted__reference[b-i001w6kub6] {
    display: inline-block;
    padding: var(--oc-space-3) var(--oc-space-4);
    margin-block-end: var(--oc-space-5);
    font-size: var(--oc-text-lg);
    background-color: var(--oc-amber-050);
    border-inline-start: 4px solid var(--oc-amber-brand);
    border-radius: var(--oc-radius-md);
}

.submitted__actions[b-i001w6kub6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
    margin-block-start: var(--oc-space-6);
}
/* /Components/Pages/Services/ServiceDetail.razor.rz.scp.css */
/* --- breadcrumbs -------------------------------------------------------- */

.breadcrumbs[b-vfa9aa4ly1] {
    padding-block: var(--oc-space-3);
    background-color: var(--oc-gray-050);
    border-block-end: 1px solid var(--oc-color-border);
}

.breadcrumbs ol[b-vfa9aa4ly1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin: 0;
    padding: 0;
    font-size: var(--oc-text-sm);
    list-style: none;
}

.breadcrumbs li[b-vfa9aa4ly1] {
    max-width: none;
    color: var(--oc-color-text-muted);
}

.breadcrumbs li + li[b-vfa9aa4ly1]::before {
    content: "/";
    margin-inline-end: var(--oc-space-2);
    color: var(--oc-gray-300);
}

/* --- hero --------------------------------------------------------------- */

.service-hero[b-vfa9aa4ly1] {
    padding-block: var(--oc-space-7);
    background:
        radial-gradient(ellipse 70% 60% at 10% 0%, var(--oc-cyan-050) 0%, transparent 65%),
        var(--oc-white);
    border-block-end: 1px solid var(--oc-color-border);
}

.service-hero__intro[b-vfa9aa4ly1] {
    max-width: 62ch;
    font-size: var(--oc-text-lg);
    line-height: var(--oc-leading-relaxed);
    color: var(--oc-color-text-muted);
}

.service-hero__actions[b-vfa9aa4ly1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
    margin-block-start: var(--oc-space-5);
}

/* --- body --------------------------------------------------------------- */

.service-body[b-vfa9aa4ly1] {
    display: grid;
    gap: var(--oc-space-7);
}

.capabilities[b-vfa9aa4ly1] {
    align-self: start;
    padding: var(--oc-space-5);
    background-color: var(--oc-gray-050);
    border-inline-start: 4px solid var(--oc-cyan-brand);
    border-radius: var(--oc-radius-lg);
}

.capabilities__title[b-vfa9aa4ly1] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-lg);
}

.capabilities__list[b-vfa9aa4ly1] {
    display: grid;
    gap: var(--oc-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.capabilities__list li[b-vfa9aa4ly1] {
    position: relative;
    max-width: none;
    padding-inline-start: var(--oc-space-5);
    font-size: var(--oc-text-sm);
}

.capabilities__list li[b-vfa9aa4ly1]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.5em;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--oc-orange-brand);
    border-radius: var(--oc-radius-pill);
}

/* --- related ------------------------------------------------------------ */

.related[b-vfa9aa4ly1] {
    display: grid;
    gap: var(--oc-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.related li[b-vfa9aa4ly1] {
    max-width: none;
}

.related a[b-vfa9aa4ly1] {
    display: block;
    padding: var(--oc-space-4);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-md);
    text-decoration: none;
}

.related a:hover[b-vfa9aa4ly1] {
    border-color: var(--oc-orange-100);
    box-shadow: var(--oc-shadow-sm);
}

.related strong[b-vfa9aa4ly1] {
    display: block;
    margin-block-end: var(--oc-space-1);
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-lg);
    color: var(--oc-color-text);
}

.related span[b-vfa9aa4ly1] {
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

@media (min-width: 40rem) {
    .related[b-vfa9aa4ly1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .service-body[b-vfa9aa4ly1] {
        grid-template-columns: 1.6fr 1fr;
    }

    .related[b-vfa9aa4ly1] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Components/Pages/Services/ServicesIndex.razor.rz.scp.css */
.page-head[b-6mny0mgidn] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-7);
}

.services-grid[b-6mny0mgidn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-4);
}

.service-tile[b-6mny0mgidn] {
    display: flex;
    flex-direction: column;
    padding: var(--oc-space-5);
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
    transition: box-shadow var(--oc-duration-base) var(--oc-ease-out),
                border-color var(--oc-duration-base) var(--oc-ease-out);
}

.service-tile:hover[b-6mny0mgidn] {
    border-color: var(--oc-orange-100);
    box-shadow: var(--oc-shadow-md);
}

.service-tile__title[b-6mny0mgidn] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-xl);
}

.service-tile__title a[b-6mny0mgidn] {
    color: var(--oc-color-text);
    text-decoration: none;
}

/* Stretch the heading link across the whole card so the entire tile is one
   click target, without nesting interactive elements. */
.service-tile__title a[b-6mny0mgidn]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.service-tile[b-6mny0mgidn] {
    position: relative;
}

.service-tile:hover .service-tile__title a[b-6mny0mgidn] {
    color: var(--oc-orange-ink);
}

.service-tile__badge[b-6mny0mgidn] {
    align-self: flex-start;
    margin-block-end: var(--oc-space-3);
    padding: var(--oc-space-1) var(--oc-space-3);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
    border-radius: var(--oc-radius-pill);
}

.service-tile__summary[b-6mny0mgidn] {
    margin-block-end: var(--oc-space-4);
    color: var(--oc-color-text-muted);
}

.service-tile__cue[b-6mny0mgidn] {
    margin-block-start: auto;
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-action);
}

@media (min-width: 40rem) {
    .services-grid[b-6mny0mgidn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .services-grid[b-6mny0mgidn] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--oc-space-5);
    }
}
/* /Components/Pages/Shop.razor.rz.scp.css */
.page-head[b-qs6tg4a3en] {
    max-width: 46rem;
    margin-block-end: var(--oc-space-5);
}

.category-rail[b-qs6tg4a3en] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-2);
    margin-block-end: var(--oc-space-5);
}

.category-rail__chip[b-qs6tg4a3en] {
    padding: var(--oc-space-2) var(--oc-space-4);
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-wide);
    text-transform: uppercase;
    color: var(--oc-color-text);
    text-decoration: none;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-pill);
}

.category-rail__chip:hover[b-qs6tg4a3en] {
    color: var(--oc-orange-ink);
    border-color: var(--oc-orange-100);
}

.category-rail__chip--active[b-qs6tg4a3en] {
    color: var(--oc-white);
    background-color: var(--oc-gray-900);
    border-color: var(--oc-gray-900);
}

.result-count[b-qs6tg4a3en] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.product-grid[b-qs6tg4a3en] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--oc-space-4);
}

.empty-state[b-qs6tg4a3en] {
    padding: var(--oc-space-8) var(--oc-space-5);
    text-align: center;
    background-color: var(--oc-gray-050);
    border: 1px dashed var(--oc-color-border-strong);
    border-radius: var(--oc-radius-lg);
}

.empty-state h2[b-qs6tg4a3en] {
    font-size: var(--oc-text-xl);
}

.empty-state p[b-qs6tg4a3en] {
    max-width: 40ch;
    margin-inline: auto;
    color: var(--oc-color-text-muted);
}

.empty-state .btn[b-qs6tg4a3en] {
    margin: var(--oc-space-2) var(--oc-space-1) 0;
}

@media (min-width: 40rem) {
    .product-grid[b-qs6tg4a3en] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .product-grid[b-qs6tg4a3en] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--oc-space-5);
    }
}
/* /Components/Shared/AddToCartButton.razor.rz.scp.css */
.add-to-cart[b-j7im5xfnxp] {
    margin-block-start: var(--oc-space-4);
}

.add-to-cart__button[b-j7im5xfnxp] {
    width: 100%;
}

.add-to-cart__confirm[b-j7im5xfnxp] {
    margin-block-start: var(--oc-space-3);
    margin-block-end: 0;
    padding: var(--oc-space-3);
    font-size: var(--oc-text-sm);
    text-align: center;
    background-color: var(--oc-green-050);
    border-inline-start: 4px solid var(--oc-color-success);
    border-radius: var(--oc-radius-md);
}

.add-to-cart__error[b-j7im5xfnxp] {
    margin-block-end: var(--oc-space-3);
    padding: var(--oc-space-3);
    font-size: var(--oc-text-sm);
    color: var(--oc-red-800);
    background-color: var(--oc-red-050);
    border-inline-start: 4px solid var(--oc-red-ink);
    border-radius: var(--oc-radius-md);
}
/* /Components/Shared/ProcessSteps.razor.rz.scp.css */
.process[b-yy6kmovr1i] {
    display: grid;
    gap: var(--oc-space-5);
    margin: 0;
    padding: 0;
    /* Drive the visible numbers from a counter so the markup stays a plain <ol>
       and reordering steps can't desynchronize the numbering. */
    counter-reset: process-step;
    list-style: none;
}

.process__step[b-yy6kmovr1i] {
    position: relative;
    max-width: none;
    padding-inline-start: 3.5rem;
    counter-increment: process-step;
}

.process__step[b-yy6kmovr1i]::before {
    content: counter(process-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-lg);
    font-weight: var(--oc-weight-bold);
    /* Black on brand yellow measures 13.8:1 — the fully accessible use of it. */
    color: var(--oc-black);
    background-color: var(--oc-amber-brand);
    border-radius: var(--oc-radius-pill);
}

/* Connecting line between steps. */
.process__step:not(:last-child)[b-yy6kmovr1i]::after {
    content: "";
    position: absolute;
    inset-inline-start: 1.25rem;
    top: 2.75rem;
    bottom: calc(var(--oc-space-5) * -1);
    width: 2px;
    background-color: var(--oc-color-border);
}

.process__title[b-yy6kmovr1i] {
    margin-block: 0 var(--oc-space-2);
    font-size: var(--oc-text-lg);
    line-height: 2.5rem;
}

.process__description[b-yy6kmovr1i] {
    margin: 0;
    color: var(--oc-color-text-muted);
}

@media (min-width: 64rem) {
    .process[b-yy6kmovr1i] {
        gap: var(--oc-space-6);
    }

    .process__step:not(:last-child)[b-yy6kmovr1i]::after {
        bottom: calc(var(--oc-space-6) * -1);
    }
}
/* /Components/Shared/ProductCard.razor.rz.scp.css */
.product-card[b-plfn2l5wne] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--oc-white);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
    transition: box-shadow var(--oc-duration-base) var(--oc-ease-out),
                border-color var(--oc-duration-base) var(--oc-ease-out);
}

.product-card:hover[b-plfn2l5wne] {
    border-color: var(--oc-orange-100);
    box-shadow: var(--oc-shadow-md);
}

.product-card__media[b-plfn2l5wne] {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(45deg,
            var(--oc-gray-050) 0 12px,
            var(--oc-white) 12px 24px);
    border-block-end: 1px solid var(--oc-color-border);
}

.product-card__placeholder[b-plfn2l5wne] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-4xl);
    font-weight: var(--oc-weight-bold);
    color: var(--oc-gray-300);
}

.product-card__body[b-plfn2l5wne] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--oc-space-4);
}

.product-card__title[b-plfn2l5wne] {
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-lg);
}

.product-card__title a[b-plfn2l5wne] {
    color: var(--oc-color-text);
    text-decoration: none;
}

/* Whole card is one click target without nesting interactive elements. */
.product-card__title a[b-plfn2l5wne]::after {
    content: "";
    position: absolute;
    inset: 0;
}

.product-card:hover .product-card__title a[b-plfn2l5wne] {
    color: var(--oc-orange-ink);
}

.product-card__summary[b-plfn2l5wne] {
    margin-block-end: var(--oc-space-4);
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}

.product-card__foot[b-plfn2l5wne] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--oc-space-3);
    margin-block-start: auto;
}

.product-card__price[b-plfn2l5wne] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-xl);
    font-weight: var(--oc-weight-bold);
}

.product-card__from[b-plfn2l5wne] {
    font-family: var(--oc-font-body);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-normal);
    text-transform: uppercase;
    letter-spacing: var(--oc-tracking-caps);
    color: var(--oc-color-text-muted);
}

.product-card__badge[b-plfn2l5wne] {
    padding: var(--oc-space-1) var(--oc-space-2);
    font-size: var(--oc-text-xs);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-color-text-muted);
    background-color: var(--oc-gray-100);
    border-radius: var(--oc-radius-sm);
    white-space: nowrap;
}

/* Photography fills the same 4:3 box the placeholder occupies, so a grid of cards keeps
   its rhythm whether or not a given product has a photo yet. object-fit prevents a
   portrait phone shot from distorting; the stored width/height on the tag reserve the
   space so nothing reflows as images arrive. */
.product-card__image[b-plfn2l5wne] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}
/* /Components/Shared/ProductConfigurator.razor.rz.scp.css */
.configurator[b-9v0le3mff3] {
    padding: var(--oc-space-5);
    background-color: var(--oc-gray-050);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.configurator__loading[b-9v0le3mff3] {
    padding: var(--oc-space-5);
    color: var(--oc-color-text-muted);
    background-color: var(--oc-gray-050);
    border: 1px solid var(--oc-color-border);
    border-radius: var(--oc-radius-lg);
}

.configurator__option[b-9v0le3mff3] {
    margin-block-end: var(--oc-space-4);
}

.configurator__label[b-9v0le3mff3] {
    display: block;
    margin-block-end: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
}

.configurator__optional[b-9v0le3mff3] {
    font-weight: var(--oc-weight-normal);
    color: var(--oc-color-text-muted);
}

.configurator__delta[b-9v0le3mff3] {
    margin-inline-start: var(--oc-space-2);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    color: var(--oc-orange-ink);
}

.configurator__help[b-9v0le3mff3],
.configurator__note[b-9v0le3mff3] {
    margin-block-start: var(--oc-space-2);
    margin-block-end: 0;
    font-size: var(--oc-text-xs);
    color: var(--oc-color-text-muted);
}

.configurator__quantity[b-9v0le3mff3] {
    max-width: 8rem;
    margin-block-end: var(--oc-space-5);
}

.configurator__total[b-9v0le3mff3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--oc-space-3);
    padding-block-start: var(--oc-space-4);
    border-block-start: 1px solid var(--oc-color-border);
}

.configurator__total-label[b-9v0le3mff3] {
    font-family: var(--oc-font-nav);
    font-size: var(--oc-text-sm);
    font-weight: var(--oc-weight-semibold);
    letter-spacing: var(--oc-tracking-caps);
    text-transform: uppercase;
    color: var(--oc-color-text-muted);
}

.configurator__total-value[b-9v0le3mff3] {
    font-family: var(--oc-font-display);
    font-size: var(--oc-text-2xl);
    font-weight: var(--oc-weight-bold);
}

.configurator__unit[b-9v0le3mff3] {
    font-size: var(--oc-text-sm);
    color: var(--oc-color-text-muted);
}
/* /Components/Shared/QuoteCta.razor.rz.scp.css */
.quote-cta[b-mucq48lzp3] {
    padding-block: var(--oc-space-7);
    background-color: var(--oc-gray-900);
    color: var(--oc-gray-200);
}

.quote-cta__inner[b-mucq48lzp3] {
    display: grid;
    gap: var(--oc-space-5);
    align-items: center;
}

.quote-cta__title[b-mucq48lzp3] {
    margin-block-end: var(--oc-space-2);
    color: var(--oc-white);
}

.quote-cta__body[b-mucq48lzp3] {
    margin: 0;
    max-width: 52ch;
    color: var(--oc-gray-300);
}

.quote-cta__actions[b-mucq48lzp3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
}

/* On the dark band the outline button's red border and text drop below AA, so
   invert it to white rather than restating the brand color. */
.quote-cta__actions[b-mucq48lzp3]  .btn-outline-primary {
    --bs-btn-color: var(--oc-white);
    --bs-btn-border-color: var(--oc-gray-400);
    --bs-btn-hover-color: var(--oc-gray-900);
    --bs-btn-hover-bg: var(--oc-white);
    --bs-btn-hover-border-color: var(--oc-white);
}

@media (min-width: 64rem) {
    .quote-cta__inner[b-mucq48lzp3] {
        grid-template-columns: 1fr auto;
        gap: var(--oc-space-7);
    }
}