/* ==========================================================================
   Umonda 3D warehouse (MVP)
   Served straight from /public so the page needs no Vite rebuild. Colours,
   radii and shadows come from resources/css/revamp/tokens.css, which app.css
   already loads on every page, with literal fallbacks for safety.
   ========================================================================== */

.um-wh {
    --um-wh-toolbar: 56px;
    position: relative;
    /* Above the site-wide WhatsApp float (.float, z-index 100), which is fixed
       to the same corner as the product panel and otherwise covers the buy
       buttons. Still below the sticky site header. */
    z-index: 101;
    /* Sized to sit under the site header and page intro without pushing the
       toolbar below the fold on a laptop. */
    height: clamp(420px, calc(100vh - 390px), 760px);
    border: 1px solid var(--um-line, #e5e7eb);
    border-radius: var(--um-radius-lg, 16px);
    overflow: hidden;
    background: #0e1418;
    font-family: var(--um-font, "Work Sans", sans-serif);
    color: #fff;
}

.um-wh.is-fullscreen {
    position: fixed;
    inset: 0;
    /* Over the mobile bottom nav (.navigation--list, z-index 10002) and the
       slide-in sidebars (10001): fullscreen has to mean fullscreen. */
    z-index: 10003;
    height: 100%;
    border-radius: 0;
    border: 0;
}

.um-wh__canvas {
    position: absolute;
    inset: 0;
}

.um-wh__canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
}

/* --------------------------------------------------------------------------
   Toolbar: breadcrumb, search, view controls
   -------------------------------------------------------------------------- */

.um-wh__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: var(--um-space-3, 12px);
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(12, 18, 22, 0.94) 0%, rgba(12, 18, 22, 0.72) 70%, rgba(12, 18, 22, 0) 100%);
}

.um-wh__crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--um-text-sm, 13px);
    overflow: hidden;
}

.um-wh__crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--um-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.1);
    color: #e7eef1;
    font-size: var(--um-text-sm, 13px);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--um-transition, 0.2s ease);
}

.um-wh__crumb:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.um-wh__crumb.is-current {
    background: var(--um-primary, #3288a3);
    color: #fff;
    cursor: default;
}

.um-wh__crumb-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

.um-wh__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.um-wh__search {
    position: relative;
    width: 230px;
}

.um-wh__search input {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 34px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--um-radius-pill, 999px);
    background: rgba(8, 13, 17, 0.8);
    color: #fff;
    font-size: var(--um-text-sm, 13px);
}

.um-wh__search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.um-wh__search input:focus {
    outline: none;
    border-color: var(--um-primary-light, #4fa0ba);
    box-shadow: var(--um-focus-ring, 0 0 0 3px rgba(50, 136, 163, 0.35));
}

.um-wh__search .um-wh__search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    pointer-events: none;
}

.um-wh__search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.um-wh__search.has-value .um-wh__search-clear {
    display: block;
}

.um-wh__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--um-radius-pill, 999px);
    background: rgba(8, 13, 17, 0.8);
    color: #e7eef1;
    font-size: var(--um-text-sm, 13px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--um-transition, 0.2s ease), color var(--um-transition, 0.2s ease);
}

.um-wh__btn:hover,
.um-wh__btn:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
}

.um-wh__btn.is-active {
    background: var(--um-primary, #3288a3);
    border-color: var(--um-primary, #3288a3);
    color: #fff;
}

.um-wh__btn--exit {
    background: var(--um-accent, #f5480a);
    border-color: var(--um-accent, #f5480a);
    color: #fff;
}

.um-wh__btn--exit:hover {
    background: var(--um-accent-dark, #d23c06);
    border-color: var(--um-accent-dark, #d23c06);
}

.um-wh__btn--icon {
    width: 36px;
    padding: 0;
    justify-content: center;
}

.um-wh__btn--sell {
    background: var(--um-gold, #fcb800);
    border-color: var(--um-gold, #fcb800);
    color: #1a1a1a;
}

.um-wh__btn--sell:hover,
.um-wh__btn--sell:focus {
    background: var(--um-gold-dark, #dfa400);
    border-color: var(--um-gold-dark, #dfa400);
    color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   Search results dropdown
   -------------------------------------------------------------------------- */

.um-wh__results {
    position: absolute;
    top: calc(var(--um-wh-toolbar) + 4px);
    right: 14px;
    /* Above the product panel (8): searching while a product is open must not
       drop the results behind it. */
    z-index: 9;
    width: 300px;
    max-height: 46%;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--um-radius-md, 10px);
    background: rgba(10, 16, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--um-shadow-3, 0 12px 24px -4px rgba(0, 0, 0, 0.5));
    display: none;
}

.um-wh__results.is-open {
    display: block;
}

.um-wh__result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: var(--um-radius-sm, 6px);
    background: transparent;
    color: #e7eef1;
    text-align: left;
    cursor: pointer;
}

.um-wh__result:hover {
    background: rgba(255, 255, 255, 0.09);
}

.um-wh__result img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: var(--um-radius-sm, 6px);
    background: #1b242a;
    flex: 0 0 auto;
}

.um-wh__result-body {
    min-width: 0;
}

.um-wh__result-title {
    display: block;
    font-size: var(--um-text-sm, 13px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-wh__result-meta {
    display: block;
    font-size: var(--um-text-xs, 12px);
    color: rgba(255, 255, 255, 0.6);
}

.um-wh__results-empty {
    padding: 14px 10px;
    font-size: var(--um-text-sm, 13px);
    color: rgba(255, 255, 255, 0.7);
}

.um-wh__results-empty a {
    color: var(--um-gold, #fcb800);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Product panel
   -------------------------------------------------------------------------- */

.um-wh__panel {
    position: absolute;
    top: var(--um-wh-toolbar);
    right: 0;
    bottom: 0;
    z-index: 8;
    width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--um-surface, #fff);
    color: var(--um-ink, #1a1a1a);
    box-shadow: var(--um-shadow-3, -8px 0 24px rgba(0, 0, 0, 0.3));
    transform: translateX(105%);
    transition: transform var(--um-transition-slow, 0.35s cubic-bezier(0.22, 1, 0.36, 1));
    overflow: hidden;
}

.um-wh__panel.is-open {
    transform: translateX(0);
}

.um-wh__panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.um-wh__panel-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
}

.um-wh__panel-media {
    position: relative;
    /* The stage can be as short as 420px, and the title, rating and seller
       line all have to clear the fold of this panel, so the photo gives way
       before any of them do. */
    height: clamp(84px, 13vh, 150px);
    background: var(--um-surface-sunken, #f1f3f5);
}

.um-wh__panel-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.um-wh__panel-body {
    padding: var(--um-space-4, 16px);
}

.um-wh__panel-eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: var(--um-text-xs, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--um-primary, #3288a3);
}

.um-wh__panel-title {
    margin: 0 0 6px;
    font-size: var(--um-text-lg, 18px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--um-ink, #1a1a1a);
}

.um-wh__pricetag {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    padding: 8px 14px;
    border-radius: var(--um-radius-md, 10px);
    background: var(--um-gold-tint, #fff7e0);
    border: 1px dashed var(--um-gold-dark, #dfa400);
}

.um-wh__pricetag strong {
    font-size: var(--um-text-xl, 22px);
    font-weight: 700;
    color: var(--um-ink, #1a1a1a);
}

.um-wh__pricetag span {
    font-size: var(--um-text-xs, 12px);
    color: var(--um-muted, #6b7280);
}

/* Ratings: the product's own, then the seller's. */
.um-wh__stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--um-gold-dark, #dfa400);
}

.um-wh__stars b {
    margin-left: 4px;
    font-size: var(--um-text-xs, 12px);
    font-weight: 700;
    color: var(--um-ink, #1a1a1a);
}

.um-wh__stars span {
    font-size: var(--um-text-xs, 12px);
    font-weight: 500;
    color: var(--um-muted, #6b7280);
}

.um-wh__stars.is-empty {
    font-size: var(--um-text-xs, 12px);
    font-weight: 500;
    color: var(--um-muted, #6b7280);
}

.um-wh__panel-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.um-wh__panel-rating a {
    font-size: var(--um-text-xs, 12px);
    font-weight: 600;
    color: var(--um-primary, #3288a3);
}

.um-wh__panel-seller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 6px 9px;
    border-radius: var(--um-radius-sm, 6px);
    background: var(--um-surface-alt, #f7f8fa);
}

.um-wh__panel-seller-name {
    font-size: var(--um-text-sm, 13px);
    font-weight: 600;
    color: var(--um-ink-soft, #404040);
}

.um-wh__panel-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--um-radius-pill, 999px);
    background: var(--um-gold, #fcb800);
    color: #1a1a1a;
    font-size: var(--um-text-xs, 12px);
    font-weight: 700;
}

.um-wh__panel-facts {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--um-line, #e5e7eb);
}

.um-wh__panel-facts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--um-line, #e5e7eb);
    font-size: var(--um-text-sm, 13px);
}

.um-wh__panel-facts dt,
.um-wh__panel-facts .um-wh__fact-key {
    color: var(--um-muted, #6b7280);
}

.um-wh__panel-facts .um-wh__fact-val {
    font-weight: 600;
    text-align: right;
    color: var(--um-ink-soft, #404040);
}

.um-wh__panel-actions {
    display: grid;
    gap: 8px;
    padding: var(--um-space-4, 16px);
    border-top: 1px solid var(--um-line, #e5e7eb);
    background: var(--um-surface-alt, #f7f8fa);
}

.um-wh__action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.um-wh__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: var(--um-radius-sm, 6px);
    font-size: var(--um-text-base, 14px);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--um-transition, 0.2s ease);
}

.um-wh__action--cart {
    background: var(--um-primary, #3288a3);
    color: #fff;
}

.um-wh__action--cart:hover {
    background: var(--um-primary-dark, #276c82);
    color: #fff;
    text-decoration: none;
}

.um-wh__action--details {
    background: var(--um-surface, #fff);
    border-color: var(--um-line-strong, #d1d5db);
    color: var(--um-ink, #1a1a1a);
}

.um-wh__action--details:hover {
    border-color: var(--um-primary, #3288a3);
    color: var(--um-primary, #3288a3);
    text-decoration: none;
}

.um-wh__action--wishlist {
    background: transparent;
    border-color: var(--um-line-strong, #d1d5db);
    color: var(--um-muted, #6b7280);
}

.um-wh__action--wishlist:hover {
    border-color: var(--um-accent, #f5480a);
    color: var(--um-accent, #f5480a);
}

/* --------------------------------------------------------------------------
   Section / shelf info card (bottom left)
   -------------------------------------------------------------------------- */

.um-wh__info {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 5;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: var(--um-radius-md, 10px);
    background: rgba(10, 16, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
}

.um-wh__info.is-open {
    display: block;
}

.um-wh__info-title {
    margin: 0 0 4px;
    font-size: var(--um-text-md, 16px);
    font-weight: 600;
    color: #fff;
}

.um-wh__info-meta {
    margin: 0 0 8px;
    font-size: var(--um-text-xs, 12px);
    color: rgba(255, 255, 255, 0.65);
}

.um-wh__info-link {
    font-size: var(--um-text-xs, 12px);
    font-weight: 600;
    color: var(--um-gold, #fcb800);
}

.um-wh__hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 4;
    transform: translateX(-50%);
    padding: 7px 16px;
    border-radius: var(--um-radius-pill, 999px);
    background: rgba(10, 16, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--um-text-xs, 12px);
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   In-scene labels (CSS2DRenderer)
   -------------------------------------------------------------------------- */

.um-wh__label {
    pointer-events: none;
    user-select: none;
    font-family: var(--um-font, "Work Sans", sans-serif);
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

/* Hanging department sign: number badge, name, stock line. */
.um-wh__label--section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 8px;
    border-radius: var(--um-radius-sm, 6px);
    background: rgba(12, 20, 27, 0.92);
    border: 1px solid var(--um-wh-accent, #3288a3);
    border-bottom: 3px solid var(--um-wh-accent, #3288a3);
    text-align: left;
}

.um-wh__label--section i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--um-radius-sm, 6px);
    background: var(--um-wh-accent, #3288a3);
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.um-wh__label--section b {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.um-wh__label--section span {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}

/* Overview: eight signs share the width of the store, so they shed the stock
   line and tighten up to stop colliding with each other. */
.um-wh__label--section.is-compact {
    gap: 7px;
    padding: 5px 13px 5px 5px;
}

.um-wh__label--section.is-compact i {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.um-wh__label--section.is-compact b {
    font-size: 11px;
    letter-spacing: 0.05em;
}

.um-wh__label--section.is-compact span {
    display: none;
}

/* Storefront wordmark over the entrance. */
.um-wh__label--tagline {
    text-align: center;
}

.um-wh__label--tagline b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    color: var(--um-gold, #fcb800);
}

.um-wh__label--tagline span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Featured slot flag, flown above a promoted product. */
.um-wh__label--featured {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--um-radius-pill, 999px);
    background: var(--um-gold, #fcb800);
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Empty slot marker. */
.um-wh__label--vacancy {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 4px;
    border-radius: var(--um-radius-pill, 999px);
    background: rgba(12, 20, 27, 0.88);
    border: 1px dashed var(--um-gold, #fcb800);
    color: var(--um-gold, #fcb800);
}

.um-wh__label--vacancy b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--um-gold, #fcb800);
    color: #1a1a1a;
    font-size: 13px;
    line-height: 1;
}

.um-wh__label--vacancy span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.um-wh__label--shelf {
    padding: 4px 12px;
    border-radius: var(--um-radius-pill, 999px);
    background: var(--um-primary, #3288a3);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.um-wh__label--price {
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--um-gold, #fcb800);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.um-wh__label--price.is-match {
    background: var(--um-accent, #f5480a);
    color: #fff;
}

.um-wh__label--hover {
    padding: 5px 11px;
    border-radius: var(--um-radius-sm, 6px);
    background: rgba(10, 16, 20, 0.94);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Free-space dialog
   -------------------------------------------------------------------------- */

.um-wh__vacancy {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 13, 17, 0.72);
}

.um-wh__vacancy.is-open {
    display: flex;
}

.um-wh__vacancy-card {
    position: relative;
    width: min(420px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 26px 24px 22px;
    border-radius: var(--um-radius-lg, 16px);
    background: var(--um-surface, #fff);
    color: var(--um-ink, #1a1a1a);
    box-shadow: var(--um-shadow-3, 0 12px 24px -4px rgba(0, 0, 0, 0.4));
    text-align: center;
}

.um-wh__vacancy-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--um-surface-sunken, #f1f3f5);
    color: var(--um-muted, #6b7280);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.um-wh__vacancy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--um-gold-tint, #fff7e0);
    border: 1px dashed var(--um-gold-dark, #dfa400);
    color: var(--um-gold-dark, #dfa400);
    font-size: 19px;
}

.um-wh__vacancy-title {
    margin: 0 0 4px;
    font-size: var(--um-text-xl, 22px);
    font-weight: 600;
}

.um-wh__vacancy-where {
    margin: 0 0 12px;
    font-size: var(--um-text-xs, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--um-primary, #3288a3);
}

.um-wh__vacancy-copy {
    margin: 0 0 20px;
    font-size: var(--um-text-base, 14px);
    line-height: 1.55;
    color: var(--um-muted, #6b7280);
}

.um-wh__vacancy-actions {
    display: grid;
    gap: 8px;
}

.um-wh__vacancy-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 1px solid var(--um-line-strong, #d1d5db);
    border-radius: var(--um-radius-sm, 6px);
    background: var(--um-surface, #fff);
    color: var(--um-ink, #1a1a1a);
    font-size: var(--um-text-base, 14px);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.um-wh__vacancy-action:hover {
    border-color: var(--um-primary, #3288a3);
    color: var(--um-primary, #3288a3);
    text-decoration: none;
}

.um-wh__vacancy-action--primary {
    background: var(--um-accent, #f5480a);
    border-color: var(--um-accent, #f5480a);
    color: #fff;
}

.um-wh__vacancy-action--primary:hover {
    background: var(--um-accent-dark, #d23c06);
    border-color: var(--um-accent-dark, #d23c06);
    color: #fff;
}

.um-wh__vacancy-action--ghost {
    height: 38px;
    border-color: transparent;
    color: var(--um-muted, #6b7280);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Loader / fallback
   -------------------------------------------------------------------------- */

.um-wh__loader {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: #0e1418;
    transition: opacity 0.4s ease;
}

.um-wh__loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.um-wh__loader-bar {
    width: min(260px, 70%);
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.um-wh__loader-fill {
    width: 12%;
    height: 100%;
    border-radius: 999px;
    background: var(--um-primary, #3288a3);
    transition: width 0.3s ease;
}

.um-wh__loader-text {
    font-size: var(--um-text-sm, 13px);
    color: rgba(255, 255, 255, 0.75);
}

.um-wh__loader-title {
    font-size: var(--um-text-lg, 18px);
    font-weight: 600;
    color: #fff;
}

.um-wh__loader-link {
    color: var(--um-gold, #fcb800);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .um-wh__panel {
        width: 300px;
    }
}

@media (max-width: 991px) {
    .um-wh {
        height: clamp(420px, calc(100vh - 210px), 720px);
    }

    .um-wh__search {
        width: 170px;
    }

    .um-wh__btn-label {
        display: none;
    }

    .um-wh__btn {
        padding: 0 11px;
    }
}

@media (max-width: 767px) {
    .um-wh {
        --um-wh-toolbar: 96px;
        height: clamp(420px, calc(100vh - 180px), 680px);
        border-radius: var(--um-radius-md, 10px);
    }

    .um-wh__toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .um-wh__crumbs {
        order: 2;
        flex: 1 1 100%;
    }

    .um-wh__tools {
        order: 1;
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .um-wh__search {
        flex: 1 1 auto;
        width: auto;
    }

    /*
       On a phone the panel leaves the stage and becomes a bottom sheet fixed
       to the viewport, clearing the site's 71px bottom nav (z-index 10002).
       Anchoring it to the stage does not work: the stage is taller than the
       viewport, so at the top of the page its lower edge - and the whole buy
       box with it - sits behind the nav or off screen entirely.
    */
    .um-wh__panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 71px;
        z-index: 10003;
        width: 100%;
        height: min(62vh, 440px);
        border-radius: var(--um-radius-lg, 16px) var(--um-radius-lg, 16px) 0 0;
        transform: translateY(calc(100% + 71px));
    }

    .um-wh__panel.is-open {
        transform: translateY(0);
    }

    /* Fullscreen covers the nav, so the sheet can sit on the floor again. */
    .um-wh.is-fullscreen .um-wh__panel {
        bottom: 0;
        z-index: 10004;
        transform: translateY(105%);
    }

    .um-wh.is-fullscreen .um-wh__panel.is-open {
        transform: translateY(0);
    }

    /* On a phone the photo is the one thing already on screen behind the
       sheet - the title is not. So the photo goes and the name stays. */
    .um-wh__panel-media {
        display: none;
    }

    /* Same reasoning as the panel: the dialog is pinned to the viewport so it
       cannot end up below the fold of an over-tall stage. */
    .um-wh__vacancy {
        position: fixed;
        bottom: 71px;
        z-index: 10003;
    }

    .um-wh.is-fullscreen .um-wh__vacancy {
        bottom: 0;
        z-index: 10004;
    }

    .um-wh:not(.is-fullscreen) .um-wh__info {
        bottom: 85px;
    }

    .um-wh__results {
        left: 10px;
        right: 10px;
        width: auto;
    }

    .um-wh__info {
        max-width: calc(100% - 28px);
    }

    .um-wh__hint {
        display: none;
    }

    .um-wh__label--price {
        font-size: 10px;
        padding: 2px 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .um-wh__panel,
    .um-wh__label,
    .um-wh__loader {
        transition: none;
    }
}