/* Shared Avangardi components. Loaded after styles.css, before page styles.
   Bootstrap remains the layout/interaction foundation; page-specific rules
   belong in the owning app. Status meanings are independent of brand colors. */
:root {
    --bs-primary: #88501b;
    --bs-primary-rgb: 136, 80, 27;
    --bs-primary-bg-subtle: #fbf0df;
    --bs-primary-text-emphasis: #714014;
    --bs-primary-border-subtle: #e8c99e;
    --bs-secondary-bg-subtle: #eeefed;
    --bs-secondary-text-emphasis: #464c48;
    --bs-secondary-border-subtle: #d6dad5;
    --bs-success-bg-subtle: #e8f3eb;
    --bs-success-text-emphasis: #205938;
    --bs-success-border-subtle: #bad8c3;
    --bs-warning-bg-subtle: #fff4d8;
    --bs-warning-text-emphasis: #795516;
    --bs-warning-border-subtle: #e9d4a0;
    --bs-danger-bg-subtle: #fbecea;
    --bs-danger-text-emphasis: #9a302b;
    --bs-danger-border-subtle: #eac0bc;
    --bs-info-bg-subtle: #e8f2f7;
    --bs-info-text-emphasis: #23566e;
    --bs-info-border-subtle: #b8d5e3;
    --bs-dark-border-subtle: #b8bbb7;
    --bs-tertiary-bg: #f5f5f1;
    --bs-secondary-color: var(--color-muted);
}

/* Explicit compatibility utilities: 5.2 does not generate the 5.3 classes. */
.bg-primary-subtle { background-color: var(--bs-primary-bg-subtle) !important; }
.bg-secondary-subtle { background-color: var(--bs-secondary-bg-subtle) !important; }
.bg-success-subtle { background-color: var(--bs-success-bg-subtle) !important; }
.bg-warning-subtle { background-color: var(--bs-warning-bg-subtle) !important; }
.bg-danger-subtle { background-color: var(--bs-danger-bg-subtle) !important; }
.bg-info-subtle { background-color: var(--bs-info-bg-subtle) !important; }
.text-primary-emphasis { color: var(--bs-primary-text-emphasis) !important; }
.text-secondary-emphasis { color: var(--bs-secondary-text-emphasis) !important; }
.text-success-emphasis { color: var(--bs-success-text-emphasis) !important; }
.text-warning-emphasis { color: var(--bs-warning-text-emphasis) !important; }
.text-danger-emphasis { color: var(--bs-danger-text-emphasis) !important; }
.text-info-emphasis { color: var(--bs-info-text-emphasis) !important; }
.border-primary-subtle { border-color: var(--bs-primary-border-subtle) !important; }
.border-secondary-subtle { border-color: var(--bs-secondary-border-subtle) !important; }
.border-success-subtle { border-color: var(--bs-success-border-subtle) !important; }
.border-warning-subtle { border-color: var(--bs-warning-border-subtle) !important; }
.border-danger-subtle { border-color: var(--bs-danger-border-subtle) !important; }
.border-info-subtle { border-color: var(--bs-info-border-subtle) !important; }
.border-dark-subtle { border-color: var(--bs-dark-border-subtle) !important; }

/* The primary brand treatment is shared by filled and outlined buttons,
   including hover, active, focus and disabled states. */
.btn {
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(136, 80, 27, 0.24);
}
.btn-sm { --bs-btn-font-size: 0.8125rem; --bs-btn-padding-y: 0.35rem; --bs-btn-padding-x: 0.65rem; }
.btn-primary {
    --bs-btn-color: #27272a; --bs-btn-bg: #e19f4e; --bs-btn-border-color: #e19f4e;
    --bs-btn-hover-color: #27272a; --bs-btn-hover-bg: #d8913e; --bs-btn-hover-border-color: #d8913e;
    --bs-btn-active-color: #27272a; --bs-btn-active-bg: #ce8937; --bs-btn-active-border-color: #ce8937;
    --bs-btn-disabled-color: #27272a; --bs-btn-disabled-bg: #e19f4e; --bs-btn-disabled-border-color: #e19f4e;
}
.btn-outline-primary {
    --bs-btn-color: #88501b; --bs-btn-border-color: #c79a67;
    --bs-btn-hover-color: #27272a; --bs-btn-hover-bg: #fbf0df; --bs-btn-hover-border-color: #88501b;
    --bs-btn-active-color: #27272a; --bs-btn-active-bg: #e19f4e; --bs-btn-active-border-color: #e19f4e;
    --bs-btn-disabled-color: #88501b; --bs-btn-disabled-border-color: #c79a67;
}
.btn-secondary {
    --bs-btn-bg: #4b5150; --bs-btn-border-color: #4b5150;
    --bs-btn-hover-bg: #353b3a; --bs-btn-hover-border-color: #353b3a;
    --bs-btn-active-bg: #292c2c; --bs-btn-active-border-color: #292c2c;
}
.btn-outline-secondary { --bs-btn-color: #525753; --bs-btn-border-color: #c4c8c1; }
.btn-outline-warning { --bs-btn-color: #795516; --bs-btn-border-color: #cdb368; }
.btn-link { --bs-btn-color: var(--color-primary-dark); --bs-btn-hover-color: #623710; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 3px;
}
.navbar :focus-visible { outline-color: var(--color-primary); }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 1100; padding: 0.75rem 1rem; background: #fff; border-radius: 0.5rem; }
.skip-link:focus { top: 0.5rem; }

.site-main > :is(.container, .container-fluid) { padding-top: 2rem !important; padding-bottom: 2.5rem !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.site-main > .container { max-width: 1320px; }
.site-main > .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
.site-main :is(h1, h2, h3, h4, h5, h6) { color: var(--color-text); line-height: 1.35; font-weight: 600; }
/* Every page title in capitals (owner, 2026-10-20), shop and console alike;
   georgian_capitals.js makes the Georgian ones Mtavruli. The hero's own h1
   rule in storefront.css already did this. */
.site-main h1 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); text-transform: uppercase; letter-spacing: .02em; }
/* And the section headings under them (owner, 2026-10-20: "all three", then
   "the h5 ones too"): h2 to h5 -- sidebar card headers, the About and
   Holidays sections, the designer's Shapes / Dimensions / Cuts & holes, the
   console's page, card and group headings, the cart's and the order page's
   card headers. Modal titles and h6 stay as they are, and a colour code in
   a heading keeps its case (see .cfg-colour-name, .catalog-card-title). */
.site-main :is(h2, h3, h4, h5):not(.modal-title) { text-transform: uppercase; letter-spacing: .02em; }
/* Same specificity as the rule above and declared after it, so it wins. */
.site-main :is(h2, h3, h4, h5):is(.cfg-colour-name, .catalog-card-title) { text-transform: none; letter-spacing: 0; }
.site-main h2 { font-size: 1.5rem; }
.site-main h3 { font-size: 1.5rem; }
.site-main h4 { font-size: 1.25rem; }
.site-main h5 { font-size: 1.0625rem; }
.page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.page-header h1 { margin-bottom: 0; }
.page-header p { margin: 0.5rem 0 0; color: var(--color-muted); max-width: 48rem; }
.page-workspace .site-main > :is(.container, .container-fluid) > :is(.mb-3, .mb-4, .d-flex) :is(h1, h3, h4) { font-size: 1.5rem; }
.page-workspace .site-footer { font-size: 0.875rem; }
.eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: 0.75rem; }
.breadcrumb { font-size: 0.8125rem; gap: 0.15rem; margin-bottom: 1rem; }
.breadcrumb a { text-decoration: none; }
.text-muted { color: var(--color-muted) !important; }
.card-header { background: #fbfbf9; padding: 0.875rem 1.25rem; border-bottom-color: var(--color-border-secondary); }
.card-header:first-child { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.card-body { padding: 1.25rem; }
.card-footer { background: #fbfbf9; border-top-color: var(--color-border-secondary); }
.form-control, .form-select { border-color: #c9cdc5; border-radius: 0.5rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.form-control-sm, .form-select-sm { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.form-select:focus { border-color: var(--color-primary-dark); box-shadow: var(--shadow-focus); }
.form-label { color: #454b46; font-weight: 500; }
.form-text, .invalid-feedback { line-height: 1.5; }
.form-control::placeholder { color: #757970; opacity: 1; }
.input-group > .btn { display: inline-flex; align-items: center; justify-content: center; }
/* Tags in capitals, generally (owner, 2026-10-20): every badge, the colour tags
   and availability tags on the shop cards, the tag filter chips. Numbers,
   which most badges hold, are unmoved. */
.badge { font-weight: 600; line-height: 1.35; padding: 0.3em 0.6em; border-radius: 0.375rem; text-transform: uppercase; letter-spacing: .03em; }
.badge.bg-warning, .badge.bg-info { color: #27272a; }
.badge.bg-info-subtle { color: var(--bs-info-text-emphasis) !important; }
.badge.bg-warning-subtle { color: var(--bs-warning-text-emphasis) !important; }
.alert { border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.site-messages { width: 100%; max-width: 1680px; padding: 1rem 1.5rem 0; margin: 0 auto; }
.site-messages .alert:last-child { margin-bottom: 0; }
.nav-tabs { --bs-nav-tabs-border-color: var(--color-border); gap: 0.25rem; }
.nav-tabs .nav-link { color: var(--color-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.65rem 0.85rem; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--color-primary-dark); background: transparent; border-color: var(--color-primary-dark); font-weight: 600; }
.nav-tabs .nav-link:hover { background: var(--color-primary-light); }
.dropdown-menu { border: 1px solid var(--color-border-secondary); border-radius: 0.625rem; padding: 0.4rem; box-shadow: var(--shadow-lg); }
.dropdown-item { border-radius: 0.35rem; padding: 0.5rem 0.7rem; font-size: 0.875rem; }
.dropdown-item .bi { margin-right: 0.35rem; }
.modal-content { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { padding: 1rem 1.25rem; border-color: var(--color-border-secondary); }
.modal-body { padding: 1.25rem; }
.modal-title { font-size: 1.125rem; font-weight: 600; }
.table { --bs-table-hover-bg: #f7f5ef; --bs-table-border-color: var(--color-border-secondary); color: var(--color-text); font-variant-numeric: tabular-nums; }
.table > thead { background: #eeefeb; }
.table > thead > tr > th { font-size: 0.75rem; color: #575c55; font-weight: 600; vertical-align: middle; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.table > tbody > tr > td { vertical-align: middle; }
.page-link { color: var(--color-primary-dark); border-color: var(--color-border); }
.page-link:hover { color: var(--color-primary-dark); background: var(--color-primary-light); }
.page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text); }
.empty-state { padding: 3rem 1.5rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: #fff; text-align: center; color: var(--color-muted); }
.empty-state > .bi { display: block; font-size: 2rem; color: var(--color-primary-dark); margin-bottom: 0.75rem; }
/* Centred, as the old global `footer { text-align: center }` had it. That rule
   went when the footer became .site-footer and nothing replaced it, so all four
   columns silently went left-aligned (owner, 2026-10-01). */
.site-footer { background: var(--color-nav); border-top: 1px solid #424644; margin-top: 1rem; text-align: center; }
.site-footer .footer-social { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.site-footer h6 { font-size: 0.75rem; letter-spacing: 0.025em; }
.site-footer a:focus-visible { outline-color: var(--color-primary); }
.app-feedback { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; width: min(28rem, calc(100vw - 2rem)); box-shadow: var(--shadow-lg); }

@media (max-width: 767.98px) {
    .site-main > :is(.container, .container-fluid) { padding: 1.25rem 1rem 2rem !important; }
    .site-main > :is(.container, .container-fluid) > .d-flex { flex-wrap: wrap; gap: 0.75rem; }
    .site-messages { padding: 1rem 1rem 0; }
    .navbar > .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
    .navbar-brand { margin-right: 0.5rem; }
    .navbar-brand-text { font-size: 1.0625rem; }
    .navbar-logo { height: 2rem; margin-right: 0.35rem; }
    .navbar-collapse { padding-top: 0.75rem; }
    .navbar .nav-link { margin: 0.1rem 0; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .nav-tabs .nav-link { white-space: nowrap; }
    .card-body { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}

/*---------------------------------------------
  One corner radius for panels (owner, 2026-10-01)
---------------------------------------------*/
/* The worktop page showed four at once: the photo 16px, the cards and the
   canvas 12px, the stock alert 8px, and the accordion 6px -- Bootstrap's own
   default, which nothing had ever overridden. The tokens did not help: there
   are four of them, and --radius-xsm and --radius-sm are each duplicated as a
   raw value in a handful of rules.

   --radius-md (12px) is the one, because it is what the cards and the canvas
   already use, so this corrects the outliers rather than restyling the page.

   THE ACCORDION IS DELIBERATELY NOT IN THIS LIST. It was, and the owner
   preferred Bootstrap's own 6px on it (2026-10-01): at 12px the shapes panel
   reads as a stack of fat pills rather than a list of sections. So the page
   carries two radii on purpose -- 12px for things that are surfaces, 6px for
   the accordion -- rather than the four it had by accident.

   Buttons, inputs and badges keep their smaller radius for the same reason:
   12px on a 24px-tall badge is a pill, not a rounded rectangle. */
.card,
.alert,
.image-wrapper img,
.image-wrapper .card-img { border-radius: var(--radius-md); }

/* The empty-image box. Global rather than in storefront.css because
   image_fallback.js can put one anywhere an uploaded photograph failed to
   load, including the Management screens, which never load that stylesheet.
   Page-specific sizing (.catalog-card, .category-mosaic-tile,
   .designer-material-gallery) still comes from the page's own CSS. */
.gallery-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75rem; padding: 1rem; color: var(--color-muted); font-size: 0.8125rem; text-align: center; }
.gallery-placeholder > .bi { font-size: 2rem; opacity: 0.65; }

/* Customer contact and live business hours. The lower-right corner stays free for future chat. */
.customer-navbar > .container-fluid { padding-inline: 1.5rem !important; }
.navbar-identity { display: flex; align-items: center; gap: .5rem; position: relative; }
.navbar-language { display: flex; align-items: center; }
.business-status summary [data-business-short-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-navbar .navbar-brand { display: flex; align-items: center; margin-right: 0; }
.customer-navbar .navbar-brand-text { font-size: 1.0625rem; }
.customer-navbar .navbar-logo { height: 2rem; margin-right: .5rem; }
.customer-navbar .nav-link { font-size: .875rem; padding: .5rem .6rem !important; margin-inline: .125rem; white-space: nowrap; }
.customer-navbar #userDropdown > span { display: inline-block !important; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* The live Open / Closed pill, in capitals like the links beside it (owner, 2026-10-20). */
.business-status summary { text-transform: uppercase; letter-spacing: .03em; }
.business-status summary { display: flex; align-items: center; gap: .4rem; color: #eeeae3; font-size: .75rem; line-height: 1.4; cursor: pointer; padding: .4rem .5rem; border: 1px solid #ffffff30; border-radius: .4rem; }
.business-hours-current { margin: .75rem 0 .25rem; font-size: .875rem; font-weight: 600; }
.business-status summary::-webkit-details-marker { display: none; }
.business-status summary:focus-visible { outline: 2px solid #e19f4e; outline-offset: 4px; }
.business-status-dot { flex: 0 0 .45rem; height: .45rem; border-radius: 50%; background: #b9b9b2; }
.business-status-dot.is-open { background: #89c79d; }
.business-hours-panel { position: absolute; top: 100%; left: 0; width: 19rem; max-width: calc(100vw - 3rem); padding: 1.25rem; background: #fff; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 1050; }
.business-hours-panel a { display: block; margin-top: .5rem; }
.business-hours-panel a[hidden] { display: none; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .customer-navbar #userDropdown > span { display: none !important; }
}
/* The staff bar expands at lg, and between 992 and 1200px the brand cluster
   (badge, language) plus four menus leave no room for a name: icon only, no
   wrapping, tighter padding. Measured at 1024px in Georgian (2026-10-19). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar:not(.customer-navbar) .nav-link { font-size: .875rem; padding: .5rem .45rem !important; white-space: nowrap; }
    .navbar:not(.customer-navbar) #userDropdown > span { display: none !important; }
    .navbar:not(.customer-navbar) .navbar-brand-text { font-size: .9375rem; }
}
@media (max-width: 1199.98px) {
    .customer-navbar .navbar-collapse { padding-top: .5rem; }
    .customer-navbar .navbar-nav { align-items: stretch !important; }
}
@media (max-width: 575.98px) {
    .customer-navbar > .container-fluid { padding-inline: .75rem !important; }
    .customer-navbar .navbar-brand-text { font-size: .875rem; }
    .customer-navbar .navbar-identity { gap: .25rem; }
    .customer-navbar .navbar-logo { height: 1.75rem; margin-right: .375rem; }
    .customer-navbar .navbar-toggler { padding: .35rem; }
    .business-status summary { max-width: 6rem; font-size: .6875rem; }
}
#contact { scroll-margin-top: 7rem; }
/* The holidays page borrows the navbar's status dot for its live line (2026-10-19). */
.holidays-page .business-status-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; vertical-align: middle; }
/* The two notices under the hours: smaller than the lines above, in the accent colour so they are read, not skimmed (owner, 2026-10-19). */
.holidays-page .holidays-note { font-size: .8125rem; font-weight: 500; }
.holidays-page .holidays-notices { max-width: 32rem; }
/* Today's own row, so a list of fourteen does not have to be read against a
   calendar (owner, 2026-10-20). The accent colour the page already uses for
   its notices, plus a word -- colour alone would say nothing to a reader who
   cannot see it, and nothing at all in a printout. */
.holidays-page .list-group-item.is-today { color: var(--color-primary-dark); }
.holidays-page .list-group-item.is-today span { font-weight: 600; }
.holidays-page .today-mark {
    margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px;
    background: var(--color-primary-light); color: var(--color-primary-dark);
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; vertical-align: middle;
}
/* Touch sizing applies to shop touchscreens as well as small phones. */
@media (pointer: coarse) {
    .customer-navbar .navbar-toggler { min-width: 44px; min-height: 44px; }
    .navbar :is(.nav-link, .dropdown-item, summary),
    .storefront :is(.btn, .category-link, .availability-link, .catalog-active-filters a),
    .commerce-page :is(.btn, input:not([type=checkbox]):not([type=radio]), select),
    .business-hours-panel a { min-height: 44px; }
    .business-hours-panel a { display: flex; align-items: center; }
}

/* ---- Status tones (owner, 2026-10-20) ----------------------------------
   Bootstrap's cyan "info", yellow "warning" and green "success" sat on a
   warm beige-and-amber site like stickers. Alerts, contextual text and badges
   now take the site's own tones (styles.css): ok, wait -- the brand amber,
   for anything that takes time or care -- stop, and a neutral note. Flash
   messages, the designer's availability banners, the cart's warnings and the
   console's status badges all go through these. */
.alert { border-width: 1px; }
.alert-success { background: var(--color-ok-light); border-color: var(--color-ok-border); color: var(--color-ok); }
.alert-info { background: var(--color-note-light); border-color: var(--color-border); color: var(--color-text); }
.alert-warning { background: var(--color-wait-light); border-color: var(--color-wait-border); color: var(--color-wait); }
.alert-danger { background: var(--color-stop-light); border-color: var(--color-stop-border); color: var(--color-stop); }
.alert .alert-link, .alert a:not(.btn) { color: inherit; }
.text-success { color: var(--color-ok) !important; }
.text-info, .text-warning { color: var(--color-wait) !important; }
.text-danger { color: var(--color-stop) !important; }
.badge.bg-success { background-color: var(--color-ok) !important; color: #fff; }
.badge.bg-info { background-color: var(--color-note-light) !important; color: var(--color-text) !important; border: 1px solid var(--color-border); }
.badge.bg-warning { background-color: var(--color-wait-light) !important; color: var(--color-wait) !important; border: 1px solid var(--color-wait-border); }
.badge.bg-danger { background-color: var(--color-stop) !important; color: #fff; }
.badge.bg-success-subtle { background-color: var(--color-ok-light) !important; color: var(--color-ok) !important; border-color: var(--color-ok-border) !important; }
.badge.bg-danger-subtle { background-color: var(--color-stop-light) !important; color: var(--color-stop) !important; border-color: var(--color-stop-border) !important; }
.badge.bg-warning-subtle { background-color: var(--color-wait-light) !important; color: var(--color-wait) !important; border-color: var(--color-wait-border) !important; }
/* One-line status text, for scripts that write a state: the popup's line. */
.status-ok { color: var(--color-ok); font-weight: 600; }
.status-wait { color: var(--color-wait); font-weight: 600; }
.status-off { color: var(--color-muted); font-weight: 600; }

/* The configurator popup (owner, 2026-10-20): the category as an eyebrow
   over the colour code, the status line and the price in the tones above,
   the dropdown labels as eyebrows, a quiet divider. */
.cfg-gallery :is(img, .gallery-placeholder) { height: 220px; object-fit: cover; }
.cfg-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 .25rem; }
.cfg-status { font-size: .9rem; margin-bottom: .5rem; }
.cfg-price { font-size: 1.5rem; font-weight: 700; color: var(--color-primary-dark); margin-bottom: .5rem; }
.cfg-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .35rem; }
.cfg-type-badge { background: var(--color-note-light); color: var(--color-muted); border: 1px solid var(--color-border); }
.cfg-divider { border: 0; border-top: 1px solid var(--color-border); margin: 1rem 0; opacity: 1; }

/* The restock request under the designer's Out of Stock line (owner,
   2026-10-20): a calm card of its own rather than a form inside a red panel. */
.restock-card { background: var(--color-note-light); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .75rem 1rem; }
.restock-card-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.restock-card form.mt-2 { margin-top: .25rem !important; }