:root{
  --forest:#0b1d33;--forest-2:#0d2f46;--sage:#14b8a6;--sage-l:#2dd4bf;
  --bg:#edf3f9;--surface:#fff;--border:#d8e2ec;
  --ink:#0b1728;--ink-2:#40536a;--ink-3:#8293a8;--ink-4:#b0bfcc;
  --red:#e11d48;--radius:14px;--sh-xs:0 1px 4px rgba(0,0,0,.07);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{overflow-x:hidden;max-width:100%;}
body{background:var(--bg);font-family:system-ui,-apple-system,sans-serif;color:var(--ink);min-height:100vh;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}
img{max-width:100%;}

/* ── Header ── */
.header{background:var(--forest);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:10px;}
.header-logo{width:36px;height:36px;border-radius:9px;flex-shrink:0;}
/* Logo + title, wrapped as a real link back to the homepage — the
   standard "click the logo to go home" pattern. A plain anchor (not a
   JS-only handler) so it also works as a normal link (new tab, etc). */
.header-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit;}
.header-titles{flex:1;min-width:0;}
.header-title{font-size:16px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-sub{font-size:11px;color:rgba(255,255,255,.6);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-title{display:block;}
.seo-intro{max-width:1100px;margin:0 auto;padding:10px 16px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3);}
.trust-strip{max-width:1100px;margin:8px auto 0;padding:0 16px;display:flex;gap:8px;flex-wrap:wrap;}
.trust-item{display:inline-flex;align-items:center;gap:5px;background:#f0faf8;border:1px solid #cdeee8;color:var(--forest-2);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;}
.trust-item b{color:var(--sage);font-weight:800;}
.lang-switch{display:flex;gap:4px;flex-shrink:0;}
.lang-switch button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.75);font-size:11px;font-weight:700;padding:5px 8px;border-radius:7px;}
.lang-switch button.active{background:#fff;color:var(--forest);border-color:#fff;}
/* Sits right next to the language switch in the header, rather than as a
   third slot in the Items/All-offices tab bar — it's an account action,
   not a content filter, so it doesn't belong grouped with those tabs. */
.header-login-wrap{position:relative;flex-shrink:0;}
.header-login{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.header-login:hover{border-color:rgba(255,255,255,.5);}
.header-login.active{background:var(--sage);border-color:var(--sage);}
/* Small popup under "Log in" letting a visitor pick which portal they
   want — most people are tenants, but the site owner/staff need a way
   back into the admin dashboard from the public homepage too, now that
   admin.html isn't the page that loads at "/" anymore. */
.login-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 26px rgba(11,29,51,.22);padding:6px;min-width:150px;z-index:120;}
.login-menu.hidden{display:none;}
.login-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:8px;background:transparent;border:none;color:var(--ink);font-size:13px;font-weight:650;font-family:inherit;cursor:pointer;text-align:left;}
.login-menu-item:hover{background:var(--bg);}
.login-menu-ico{font-size:15px;flex:0 0 auto;}
/* Cart — a fixed floating badge pinned to the top-right corner of the
   viewport, sitting just under the sticky header rather than inside its
   button row. Plain white card, not a filled color bubble. */
.header-cart{position:fixed;top:64px;right:16px;background:#fff;border:1.5px solid var(--border);color:var(--ink);font-size:14.5px;font-weight:700;padding:11px 18px;border-radius:999px;display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(11,29,51,.18);z-index:90;}
.header-cart:hover{border-color:var(--sage);}
@media(max-width:480px){.header-cart{top:58px;right:10px;padding:9px 12px;}.header-cart #headerCartSummary,.header-cart #tdCartSummary{display:none;}}

/* ── Sticky controls ── */
.controls{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:var(--header-h,64px);z-index:99;}
.controls-inner{max-width:1100px;margin:0 auto;padding:10px 0 10px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.search-wrap{position:relative;flex:1;min-width:180px;margin-right:16px;}
.search-wrap input{width:100%;padding:9px 12px 9px 32px;border:1.5px solid var(--border);border-radius:9px;font-size:16px;color:var(--ink);background:var(--bg);}
.search-wrap input:focus{outline:none;border-color:var(--sage);}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:13px;}
/* ── Category filter chips ("bubbles") — a true pill shape used for the
   Items-catalog categories, the furniture picker and the My Office
   filter. Sage when active, so they read as content-level filters and
   never get confused with the top-level tab bar below, which uses the
   site's dark "forest" color instead. ── */
.chip{border:1.5px solid var(--border);background:#fff;color:var(--ink-2);padding:8px 15px;border-radius:999px;font-size:12.5px;line-height:1.2;font-weight:650;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;}
.chip:hover{border-color:var(--ink-4);}
.chip.active{background:var(--sage);color:#fff;border-color:var(--sage);box-shadow:0 2px 6px rgba(20,184,166,.28);}

/* ── Main tab bar (Items / All offices) — one rounded "track" holding an
   elevated active pill, like a native segmented control. "Log in" used to
   be a third slot here but now lives in the header next to the language
   switch, so this is just the two content tabs. Every tab is visible at
   once on any screen size (grid, not scroll); long translated labels wrap
   to a second line instead of truncating. */
.chip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:100%;background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:4px;}
.chip-row .chip{border:none;background:transparent;color:var(--ink-3);padding:10px 6px;border-radius:11px;font-size:12.5px;line-height:1.25;font-weight:700;white-space:normal;word-break:break-word;text-align:center;min-height:42px;box-shadow:none;}
.chip-row .chip:hover{border-color:transparent;color:var(--forest-2);}
.chip-row .chip:active{transform:scale(.98);}
.chip-row .chip.active{background:var(--forest);color:#fff;box-shadow:0 2px 6px rgba(11,29,51,.28);}
.chip-row .chip-ico{font-size:13px;opacity:.55;transition:opacity .15s ease;}
.chip-row .chip.active .chip-ico{opacity:1;}

/* ── Feed ── */
.feed-wrap{max-width:1100px;margin:0 auto;padding:16px;}
.feed-toolbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;margin-bottom:14px;}
.feed-count{font-size:12px;color:var(--ink-3);font-weight:600;padding:0 2px;margin:0;}
.sort-select-wrap{position:relative;display:inline-flex;align-items:center;}
.sort-select-wrap select{
  appearance:none;-webkit-appearance:none;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238293a8' d='M1 1l5 5 5-5'/></svg>") no-repeat right 10px center;
  border:1.5px solid var(--border);
  color:var(--ink-2);
  font:inherit;font-size:12px;font-weight:650;
  padding:6px 28px 6px 12px;
  border-radius:999px;
  color:var(--ink-2);
  cursor:pointer;
}
.sort-select-wrap select:focus{outline:none;border-color:var(--sage);}
.share-btn{right:50px;}
.modal-share{position:absolute;top:12px;right:58px;width:38px;height:38px;border-radius:50%;background:rgba(11,23,40,.5);border:none;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:3;}
.card-price{letter-spacing:-.015em;}
.card-price-sub{font-size:12px;font-weight:650;color:var(--ink-3);margin-left:4px;}
.card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:6px;}
.card-share{
  flex:none;
  border:none;
  background:transparent;
  color:var(--sage);
  font:inherit;
  font-size:12px;
  font-weight:750;
  padding:0;
  letter-spacing:.01em;
}
.card-share:hover{color:var(--forest);}

.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
/* Firestore still loads every office/item up front (cheap at this catalog
   size, and needed so cart pricing, the detail modal and share links can
   look up *any* office/item, not just a visible page) — this only limits
   how many cards get built into the DOM at once, revealing more on click
   instead of a full re-render of the whole (possibly large) list. */
.feed-more-wrap{display:flex;justify-content:center;margin-top:18px;}
.feed-more-btn{border:1.5px solid var(--sage);background:#fff;color:#0f766e;font:inherit;font-size:13px;font-weight:700;padding:11px 22px;border-radius:999px;cursor:pointer;}
.feed-more-btn:hover{background:var(--sage);color:#fff;}

.empty-state{text-align:center;padding:70px 20px;color:var(--ink-3);}
.empty-state .es-icon{font-size:48px;margin-bottom:14px;}
.empty-state h3{font-size:17px;color:var(--ink-2);margin-bottom:6px;}
.empty-state p{font-size:13px;}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-xs);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,29,51,.12);}
.card-photos{position:relative;aspect-ratio:4/3;background:#dde6ef;flex-shrink:0;}
/* Item cards: a fixed pixel height (not aspect-ratio, which varies with
   card width) keeps every photo the same height across the whole grid,
   whatever the card's own width ends up being at a given screen size. */
#itemsGrid .card-photos{aspect-ratio:auto;height:425px;}
.card-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;scrollbar-width:none;}
.card-scroll::-webkit-scrollbar{display:none;}
.card-scroll img{scroll-snap-align:start;flex:0 0 100%;width:100%;height:100%;object-fit:cover;}
.card-photos-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--ink-4);}
.card-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;pointer-events:none;}
.like-btn{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:rgba(11,23,40,.45);backdrop-filter:blur(2px);border:none;color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .1s;}
.like-btn:active{transform:scale(.9);}
.like-btn.liked{color:#fb7185;}
.card-body{padding:13px 14px;display:flex;flex-direction:column;flex:1;min-height:0;}
.calc-control{margin-top:auto;padding-top:8px;}
.card-title{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mo-qty-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--sage);color:#fff;font-size:11px;font-weight:800;vertical-align:middle;}
.card-meta{font-size:12px;color:var(--ink-3);margin-top:3px;}
.card-desc{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-price{font-size:15px;font-weight:800;color:#0f9c8c;margin-top:5px;}
.avail-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:10px;margin-top:7px;}
.avail-now{background:#dcfce7;color:#166534;}
.avail-future{background:#fef3c7;color:#92400e;}
.stock-badge{background:#eef2f7;color:var(--ink-2);margin-left:6px;}
.modal-price{font-size:18px;font-weight:800;color:#0f9c8c;margin-bottom:6px;}

/* ── Detail modal ── */
.modal-bg{position:fixed;inset:0;background:rgba(11,23,40,.7);z-index:500;display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain;}
.modal-bg.hidden{display:none;}
.modal{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:94vh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain;}
@media(min-width:680px){.modal-bg{align-items:center;padding:20px;}.modal{border-radius:18px;max-height:90vh;}}
.slideshow{position:relative;background:var(--forest);aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center;}
/* A photo that isn't roughly 4:3 (tall furniture shots especially) used to
   letterbox against flat dark bars, which read as broken/empty space. A
   blurred, scaled-up copy of the same photo now fills those bars instead —
   the sharp foreground image sits on top, unchanged, via object-fit:contain. */
.slideshow-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) brightness(.55) saturate(1.15);transform:scale(1.15);z-index:0;cursor:pointer;}
/* The foreground image's own box always fills the whole slideshow (100%
   width/height), even though object-fit:contain only paints the actual
   photo pixels in the middle of it — so without pointer-events:none here,
   that invisible letterboxed margin silently ate every tap intended for
   the backdrop underneath (and for the buttons below), since it's on top
   in the stacking order. Making it click-through fixes both: taps on the
   blurred "blank" sides now reach the backdrop's close handler, and the
   nav buttons/dots (raised above it, see z-index below) become tappable. */
.slideshow-fg{position:relative;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none;}
.slideshow-empty{font-size:56px;color:rgba(255,255,255,.25);position:relative;z-index:1;}
.slide-prev,.slide-next{position:absolute;top:54px;bottom:34px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border:none;width:38px;border-radius:12px;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:2;}
.slide-prev{left:10px;}.slide-next{right:10px;}
.slide-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;}
.slide-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);}
.slide-dot.active{background:#fff;}
.modal-like{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(11,23,40,.5);border:none;color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;z-index:3;}
.modal-like.liked{color:#fb7185;}
.modal-close{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;background:rgba(11,23,40,.5);border:none;color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;}
.modal-body{padding:20px;}
.modal-title{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.modal-meta{font-size:13px;color:var(--ink-3);margin-bottom:14px;}
.date-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.date-chip{border:1.5px solid var(--border);background:#fff;color:var(--ink-2);padding:5px 11px;border-radius:16px;font-size:11.5px;font-weight:600;}
.date-chip.active{background:var(--sage);color:#fff;border-color:var(--sage);}
.modal-desc{font-size:14px;color:var(--ink-2);line-height:1.55;white-space:pre-wrap;}
.modal-desc-empty{font-size:13px;color:var(--ink-4);font-style:italic;}
.modal-bottom-close{display:block;width:100%;margin-top:22px;padding:14px;border:none;border-top:1px solid var(--border);background:transparent;color:var(--ink-3);font-weight:700;font-size:13.5px;text-align:center;cursor:pointer;font-family:inherit;}
.modal-bottom-close:active{background:#f4f6f8;}

/* Instagram-style item detail: photo stage + side caption */
#itemDetailBg .modal,
#detailBg .modal{
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  max-height:94vh;
}
#itemDetailBg .slideshow,
#detailBg .slideshow{
  flex:0 0 auto;
  max-height:42vh;
  aspect-ratio:4/3;
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
  #itemDetailBg .modal,
  #detailBg .modal{
    flex-direction:row !important;
    align-items:stretch;
    width:min(1100px,94vw) !important;
    max-width:min(1100px,94vw) !important;
    height:min(86vh,780px) !important;
    max-height:86vh !important;
    border-radius:16px;
    overflow:hidden;
  }
  #itemDetailBg .slideshow,
  #detailBg .slideshow{
    flex:1 1 auto !important;
    width:auto !important;
    aspect-ratio:auto !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    background:#111;
  }
  #itemDetailBg .modal-body,
  #detailBg .modal-body{
    flex:0 0 360px !important;
    width:360px !important;
    max-width:360px;
    overflow-y:auto;
  }
  #detailBg .kind-tab-row{padding:0 0 12px;}
}

.card-extras{font-size:11px;font-weight:700;color:var(--ink-3);margin-top:6px;}

/* ── Kind tabs (Office / Corridor / Toilet / Video) ── */
.kind-tab-row{display:flex;gap:6px;padding:12px 20px 0;flex-wrap:wrap;}
.kind-tab{border:1.5px solid var(--border);background:#fff;color:var(--ink-2);padding:6px 13px;border-radius:16px;font-size:12.5px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;}
.kind-tab.active{background:var(--forest);color:#fff;border-color:var(--forest);}

/* ── Furniture / credits entry + picker ── */
.credit-entry{display:inline-flex;align-items:center;gap:6px;background:#f0fdfa;border:1.5px solid #99f6e4;color:#0f766e;padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:700;margin-top:14px;}
.picker-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0;}
.picker-title{font-size:17px;font-weight:800;color:var(--ink);}
.picker-close{background:transparent;border:none;font-size:22px;color:var(--ink-3);line-height:1;padding:4px;}
.picker-sub{font-size:12.5px;color:var(--ink-3);padding:2px 20px 0;}
.picker-budget{padding:14px 20px 4px;}
.picker-budget-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin:6px 0;}
.picker-budget-fill{height:100%;background:var(--sage);transition:width .2s;}
.picker-budget-fill.over{background:var(--red);}
.picker-budget-nums{font-size:13px;color:var(--ink-2);font-weight:700;}
.picker-cats{display:flex;gap:8px;flex-wrap:wrap;padding:10px 20px;}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:0 20px 20px;max-height:48vh;overflow-y:auto;}
.picker-item{border:2px solid var(--border);border-radius:12px;overflow:hidden;position:relative;}
.picker-item.selected{border-color:var(--sage);box-shadow:0 0 0 3px rgba(20,184,166,.18);}
.picker-item-photo{aspect-ratio:1;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--ink-4);}
.picker-item-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.picker-item-body{padding:8px 9px;}
.picker-item-name{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.picker-item-cr{font-size:11.5px;color:#0f9c8c;font-weight:700;margin-top:2px;}
.picker-item-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;}
.picker-item.selected .picker-item-check{background:var(--sage);border-color:var(--sage);color:#fff;}
.picker-empty{text-align:center;padding:40px 20px;color:var(--ink-3);font-size:13px;}

/* ── My Office (tenant self-service) ── */
.mo-box{max-width:420px;margin:40px auto;background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 22px;text-align:center;box-shadow:var(--sh-xs);}
.mo-box h3{font-size:17px;margin-bottom:8px;color:var(--ink);}
.mo-hint{font-size:12.5px;color:var(--ink-3);margin-bottom:16px;line-height:1.5;}
.mo-input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:9px;font-size:16px;margin-bottom:10px;}
.mo-input:focus{outline:none;border-color:var(--sage);}
.mo-btn{width:100%;padding:10px;border:none;border-radius:9px;background:var(--forest);color:#fff;font-weight:700;font-size:14px;}
.mo-btn:disabled{opacity:.6;}
.mo-msg{font-size:12.5px;margin-top:10px;color:var(--ink-3);min-height:16px;}
.mo-msg.error{color:var(--red);}
.mo-signout{margin-top:14px;background:transparent;border:none;color:var(--ink-3);font-size:12.5px;text-decoration:underline;}
.mo-wrap{max-width:1100px;margin:0 auto;padding:20px 16px 40px;}
.mo-office-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.mo-office-code{font-size:20px;font-weight:900;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);}
.mo-office-name{font-size:13px;color:var(--ink-3);margin-top:2px;}
.mo-section-title{font-size:13px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em;margin:20px 2px 8px;}
.mo-item-actions{margin-top:auto;padding-top:8px;}
.mo-action-btn{width:100%;padding:7px;border-radius:8px;border:none;font-weight:700;font-size:11.5px;cursor:pointer;font-family:inherit;}
.mo-action-pending{background:#fef3c7;color:#92400e;cursor:default;}
.mo-req-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;font-size:12.5px;background:#fff;}
.mo-req-status{font-weight:700;padding:3px 9px;border-radius:8px;font-size:11px;text-transform:uppercase;white-space:nowrap;}
.mo-req-pending{background:#fef3c7;color:#92400e;}
.mo-req-approved{background:#dcfce7;color:#166534;}
.mo-req-declined{background:#fee2e2;color:#991b1b;}
.mo-empty{font-size:12.5px;color:var(--ink-3);padding:10px 2px;}

/* Rent block inside the reused .mo-office-hdr (My Office tab summary). */
.mo-office-rent{display:flex;align-items:center;gap:10px;}
.mo-office-rent-label{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;}
.mo-office-rent-amd{font-size:16px;font-weight:800;color:var(--ink);}

/* Utilities tab -- this month's electricity + internet invoice. */
.mo-utility-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:var(--sh-xs);max-width:420px;}
.mo-utility-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mo-utility-month{font-size:15px;font-weight:800;color:var(--ink);}
.mo-utility-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--border);}
.mo-utility-row.total{border-bottom:none;font-weight:800;color:var(--ink);font-size:14.5px;padding-top:10px;}

/* Utilities tab -- Wi-Fi network name/password card, shown above the
   invoice card whenever admin has filled in a network name for this office. */
.mo-wifi-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 20px;box-shadow:var(--sh-xs);max-width:420px;margin-bottom:12px;}
.mo-wifi-title{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:10px;}
.mo-wifi-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);}
.mo-wifi-row:last-child{border-bottom:none;}
.mo-wifi-label{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;}
.mo-wifi-value{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;}
.mo-wifi-copy{flex-shrink:0;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--forest);font-weight:800;font-size:12px;padding:7px 12px;white-space:nowrap;}
.mo-wifi-copy:hover{background:#eef2ff;}
.mo-wifi-qr-wrap{padding-top:12px;text-align:center;}
.mo-wifi-qr-btn{border:none;background:transparent;padding:0;cursor:pointer;}
.mo-wifi-qr{width:160px;height:160px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:12px;pointer-events:none;}
.mo-wifi-zoom{position:fixed;inset:0;z-index:9999;background:rgba(11,23,40,.72);display:flex;align-items:center;justify-content:center;padding:24px;}
.mo-wifi-zoom img{width:min(92vw,420px);height:min(92vw,420px);object-fit:contain;background:#fff;border-radius:16px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);}
@keyframes wowSpark {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
}
@keyframes wowChipPop {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.16); }
}
.wow-spark{position:fixed;width:8px;height:8px;border-radius:999px;pointer-events:none;z-index:5000;animation:wowSpark .7s ease-out forwards;}
.wow-fly{
  position:fixed;z-index:4999;pointer-events:none;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px rgba(15,23,42,.28);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease,filter .45s ease;
}
.header-cart.wow-pop,.login-menu-item.wow-pop{animation:wowChipPop .45s ease;}
@media (prefers-reduced-motion: reduce) {
  .wow-spark,.wow-fly{animation:none!important;transition:none!important;display:none!important;}
}


/* ── Tenant offers / community marketplace ── */
.community-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px 14px;margin-bottom:12px;box-shadow:var(--sh-xs);}
.community-intro>div{min-width:0;}
.community-intro strong{font-size:14px;color:var(--ink);white-space:nowrap;}
.community-intro span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3);margin-top:3px;}
.community-post-btn{flex:0 0 auto;border:none;border-radius:9px;background:var(--forest);color:#fff;font-size:12.5px;font-weight:800;padding:9px 14px;white-space:nowrap;box-shadow:0 2px 8px rgba(11,29,51,.16);}
.community-post-btn:hover{background:var(--forest-2);}
.community-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:10px;background:#eef2ff;color:#4338ca;margin-top:7px;}
.community-contact{margin-top:8px;font-size:12px;font-weight:750;color:var(--forest);word-break:break-word;}
.community-card .card-price{color:#7c3aed;}
.mo-offer-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:8px;box-shadow:var(--sh-xs);}
.mo-offer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mo-offer-head strong{display:block;font-size:14px;color:var(--ink);}
.mo-offer-head span{display:block;font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:2px;}
.mo-offer-head button{border:none;border-radius:9px;background:var(--forest);color:#fff;font-weight:800;font-size:12px;padding:8px 13px;white-space:nowrap;}
.mo-offer-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.mo-offer-form textarea{min-height:88px;resize:vertical;}
.to-photo-upload{border:2px dashed var(--border);border-radius:10px;padding:18px;text-align:center;cursor:pointer;background:var(--bg);margin-bottom:10px;}
.to-photo-upload:hover{border-color:var(--sage);}
.to-photo-upload .to-photo-icon{font-size:28px;margin-bottom:6px;}
.to-photo-upload .to-photo-hint{font-size:12.5px;color:var(--ink-3);}
.to-photo-preview-row{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 10px;}
.to-photo-thumb-wrap{position:relative;}
.to-photo-thumb{width:72px;height:72px;border-radius:8px;object-fit:cover;border:2px solid var(--border);display:block;}
.to-photo-remove{position:absolute;top:-5px;right:-5px;background:#e11d48;color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.to-upload-progress{background:var(--forest-2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;margin-bottom:10px;display:none;}
.to-upload-progress .to-progress-bar-wrap{background:rgba(255,255,255,.15);border-radius:4px;height:4px;margin-top:6px;}
.to-upload-progress .to-progress-bar{background:var(--sage);height:4px;border-radius:4px;width:0;transition:width .2s;}
.to-form-btns{display:flex;gap:8px;}
.to-form-btns .mo-btn{margin-bottom:0;}
.to-cancel-btn{flex:0 0 auto;padding:10px 16px;border:1.5px solid var(--border);border-radius:9px;background:#fff;color:var(--ink-2);font-weight:700;font-size:14px;cursor:pointer;}
.to-mine-head{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
.to-mine-head strong{font-size:13px;color:var(--ink);}
.tenant-offer-row{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--border);padding:12px 0;font-size:12.5px;}
.tenant-offer-row:first-child{border-top:none;margin-top:10px;}
.tenant-offer-photo{width:48px;height:48px;border-radius:9px;object-fit:cover;background:var(--bg);flex:0 0 48px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink-4);}
.tenant-offer-body{flex:1;min-width:0;}
.tenant-offer-row b{display:block;font-size:13px;color:var(--ink);}
.tenant-offer-row span{display:block;color:var(--ink-3);margin-top:2px;}
.tenant-offer-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.tenant-offer-actions{display:flex;gap:6px;flex-shrink:0;margin-top:6px;}
.tenant-offer-actions button{border:1.5px solid var(--border);background:#fff;color:var(--ink-2);font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer;font-family:inherit;}
.tenant-offer-actions button:hover{border-color:var(--sage);color:var(--sage-l);}
.tenant-offer-actions button.to-delete-btn:hover{border-color:#e11d48;color:#e11d48;}
.tenant-offer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding:10px 0;font-size:12.5px;}
.tenant-offer-row:first-child{border-top:none;margin-top:10px;}
.tenant-offer-row b{display:block;font-size:13px;color:var(--ink);}
.tenant-offer-row span{display:block;color:var(--ink-3);margin-top:2px;}
.tenant-offer-status{font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 8px;border-radius:8px;white-space:nowrap;}
.tenant-offer-status.pending{background:#fef3c7;color:#92400e;}
.tenant-offer-status.approved{background:#dcfce7;color:#166534;}
.tenant-offer-status.rejected{background:#fee2e2;color:#991b1b;}
@media(max-width:560px){
  .community-intro{display:block;}
  .community-intro span{display:block;margin-top:4px;}
  .community-post-btn{width:100%;margin-top:10px;}
}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--forest);color:#fff;padding:10px 20px;border-radius:10px;font-size:13.5px;font-weight:600;z-index:9000;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;}

/* ── Items catalog: card selection state, calculator toggle, calc bar ── */
.card.calc-selected{outline:2px solid var(--sage);outline-offset:-1px;}
.calc-toggle-btn{width:100%;padding:8px;border-radius:8px;border:1.5px solid var(--sage);background:#fff;color:#0f766e;font-weight:700;font-size:12px;cursor:pointer;transition:background .15s,color .15s;}
.calc-toggle-btn:hover{background:#f0fdfa;}
.calc-toggle-btn.selected{background:var(--sage);color:#fff;}
.calc-toggle-btn.mo-return{border-color:#fecaca;color:var(--red);}
.calc-toggle-btn.mo-return:hover{background:#fef2f2;}
.calc-toggle-btn.mo-return.selected{background:var(--red);color:#fff;border-color:var(--red);}
/* Quantity stepper — shown instead of the toggle button once an item with
   more than one unit in stock has at least one unit picked, so a shopper
   can add a couple of the same item and see the credit total scale up. */
.qty-stepper{width:100%;margin-top:8px;padding:6px 6px 6px 12px;border-radius:8px;border:1.5px solid var(--sage);background:#f0fdfa;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.qty-stepper-label{font-size:11.5px;font-weight:700;color:#0f766e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qty-controls{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.qty-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--sage);background:#fff;color:#0f766e;font-size:14px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;}
.qty-btn:hover{background:#ccfbf1;}
.qty-btn[disabled]{opacity:.35;pointer-events:none;}
.qty-val{font-size:13.5px;font-weight:800;color:#0f766e;min-width:14px;text-align:center;}
.toast.show{opacity:1;}

/* ── Cart modal ── */
.cart-header{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.cart-header-icon{width:38px;height:38px;border-radius:11px;background:#f0fdfa;color:#0f9c8c;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.cart-header .modal-title{margin-bottom:0;flex:1;}
.cart-close-btn{width:34px;height:34px;border-radius:50%;background:var(--bg);border:none;color:var(--ink-2);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;}
.cart-close-btn:hover{background:#e2e9f1;}
.cart-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.cart-row:last-child{border-bottom:none;}
.cart-row-photo{width:54px;height:54px;border-radius:12px;object-fit:cover;flex-shrink:0;background:#dde6ef;box-shadow:0 1px 3px rgba(11,29,51,.1);}
.cart-row-photo-empty{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink-4);}
.cart-row-info{flex:1;min-width:0;}
.cart-row-name{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-row-meta{font-size:12.5px;color:#0f9c8c;font-weight:700;margin-top:2px;}
.cart-row-remove{width:30px;height:30px;border-radius:50%;background:var(--bg);border:none;color:var(--ink-2);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;}
.cart-row-remove:hover{background:#fde2e2;color:#b91c1c;}
/* One consistent look for every row and note in the cart, whatever the
   pricing state — the office row is marked by a small label, not a
   different color treatment from the items below it. */
.cart-row-office-label{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px;}
.cart-combo-note{font-size:12.5px;font-weight:500;color:var(--ink-2);margin-top:10px;line-height:1.5;}
.cart-no-office{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:12.5px;color:var(--ink-2);}
.cart-no-office button{background:var(--forest);color:#fff;border:none;padding:7px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:inherit;}
.cart-no-office button:hover{background:var(--forest-2);}
.cart-footer{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:13.5px;color:var(--ink-3);}
.cart-footer strong{display:block;font-size:19px;color:var(--ink);font-weight:800;margin-top:2px;}
.cart-actions-row{display:flex;gap:8px;margin-top:16px;}
.cart-action-btn{flex:1;padding:10px 8px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;border:1.5px solid var(--sage);background:#fff;color:#0f766e;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.cart-action-btn:hover{background:#f0fdfa;}
.cart-action-btn.primary{background:var(--sage);color:#fff;}
.cart-action-btn.primary:hover{background:var(--sage-l);}
.cart-clear-all{width:100%;margin-top:16px;padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;background:transparent;color:var(--ink-3);border:1.5px solid var(--border);}
.cart-clear-all:hover{background:#fde2e2;color:#b91c1c;border-color:#fecaca;}
.spinner{display:inline-block;width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--sage);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-wrap{display:flex;justify-content:center;padding:70px;}

/* ── Floating "Contact us" button + expandable panel ──
   Sits above the calc bar (which only shows sometimes) so the two never
   overlap; hidden entirely when the admin hasn't filled in any channel. */
.contact-fab{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;background:var(--sage);color:#fff;border:none;font-size:23px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(20,184,166,.45),0 2px 6px rgba(0,0,0,.18);z-index:150;transition:transform .15s;}
.contact-fab:active{transform:scale(.92);}
.contact-fab.hidden{display:none;}
.contact-panel-bg{position:fixed;inset:0;background:rgba(11,23,40,.35);z-index:149;opacity:0;pointer-events:none;transition:opacity .2s;}
.contact-panel-bg.show{opacity:1;pointer-events:all;}
.contact-panel{position:fixed;right:16px;bottom:calc(146px + env(safe-area-inset-bottom));width:min(290px,calc(100vw - 32px));background:#fff;border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.24);z-index:151;overflow:hidden;transform:translateY(10px) scale(.97);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease;}
.contact-panel.show{transform:translateY(0) scale(1);opacity:1;pointer-events:all;}
.contact-panel-title{padding:14px 16px 10px;font-size:13px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--border);}
.contact-row{display:flex;align-items:center;gap:12px;padding:11px 16px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--border);transition:background .12s;}
.contact-row:last-child{border-bottom:none;}
.contact-row:active{background:var(--bg);}
.contact-row-icon{width:34px;height:34px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.contact-row-icon svg{width:18px;height:18px;display:block;}
.contact-row-text{min-width:0;}
.contact-row-label{font-size:12.5px;font-weight:750;color:var(--ink);}
.contact-row-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Footer contact section (bottom of whichever tab is active) ── */
.mp-footer{background:var(--forest);color:rgba(255,255,255,.92);padding:26px 16px calc(26px + env(safe-area-inset-bottom));margin-top:10px;}
.mp-footer.hidden{display:none;}
.mp-footer-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.55);margin-bottom:14px;text-align:center;}
.mp-footer-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px;margin:0 auto;}
.mp-footer-link{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 15px;color:#fff;text-decoration:none;font-size:12.5px;font-weight:650;}
.mp-footer-link:active{background:rgba(255,255,255,.18);}
.mp-footer-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;}
.mp-footer-icon svg{width:18px;height:18px;display:block;}

/* ── Tenant dashboard (My Office full takeover) ──────────────────────
   Signing into My Office swaps the whole screen to its own dashboard —
   same left-sidebar-with-tabs pattern as the admin dashboard — instead of
   living as one more section on the public marketplace page. */
body.td-active .header,
body.td-active .seo-intro,
body.td-active .trust-strip,
body.td-active .controls,
body.td-active .feed-wrap,
body.td-active .mp-footer,
body.td-active .contact-fab,
body.td-active .contact-panel-bg,
body.td-active .contact-panel,
body.td-active #headerCartBtn { display: none !important; }
body.td-active { overflow: hidden; }

.td-shell{position:fixed;inset:0;background:var(--bg);display:flex;z-index:400;}
.td-sidebar{width:230px;flex-shrink:0;background:var(--forest);color:#fff;display:flex;flex-direction:column;padding:18px 12px;gap:4px;}
.td-brand{font-weight:800;font-size:15px;padding:0 8px 14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px;}
.td-office{padding:0 8px 14px;font-size:12px;color:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:2px;}
.td-office b{font-size:14px;color:#fff;}
.td-nav{display:flex;flex-direction:column;gap:3px;flex:1;margin-top:4px;}
.td-nav-item{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:none;color:rgba(255,255,255,.72);padding:11px 10px;border-radius:10px;font-size:13.5px;font-weight:600;}
.td-nav-item.active{background:rgba(255,255,255,.14);color:#fff;}
.td-badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:9px;}
.td-back,.td-signout{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);border-radius:9px;padding:9px;font-size:12.5px;font-weight:600;margin-top:6px;}
.td-main{flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:26px 28px 100px;}
.td-panel{display:none;max-width:1100px;margin:0 auto;}
.td-panel.active{display:block;}
.td-panel-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:14px;}

/* Tenant dashboard item grid (My Office / Browse Items tabs) -- matches
   the public Items feed exactly (same columns, same fixed photo height)
   so cards read as the same catalog, not a smaller lookalike. */
.mo-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.mo-item-grid .card-photos{aspect-ratio:auto;height:425px;}
/* .td-shell sits at z-index:400 (a full-viewport fixed overlay), so the
   badge -- otherwise identical to the public #headerCartBtn -- needs a
   higher z-index or the dashboard's own content paints over it. */
#tdCartBtn{z-index:410;}
.mo-card{cursor:pointer;}

@media (max-width:820px){
  .td-shell{flex-direction:column;}
  .td-sidebar{width:100%;flex-direction:row;align-items:center;padding:8px 10px;overflow-x:auto;gap:2px;}
  .td-brand,.td-office,.td-back,.td-signout{display:none;}
  .td-nav{flex-direction:row;flex:1;margin-top:0;}
  .td-nav-item{flex-direction:column;gap:2px;font-size:10.5px;padding:8px 6px;white-space:nowrap;}
  .td-main{padding:16px 14px 100px;order:2;}
}

.td-panel-lead{font-size:13px;color:#8293a8;margin:0 0 14px;line-height:1.45;}
.mo-item-list{display:flex;flex-direction:column;gap:10px;}
.mo-item-list .mo-item-card,.mo-item-list .picker-card{width:100%;}

/* Asset-tag code chips shown on marketplace/browse item cards (see
   itemTagChipsHtml in mkt.js) -- lets a tenant or admin see, and open a QR
   for, the exact physical unit a card refers to, without pre-rendering a
   QR image for every unit (some items have dozens). */
.tag-chip-row{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;}
.tag-chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-weight:700;color:#334155;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:7px;padding:3px 7px;cursor:pointer;line-height:1.3;}
.tag-chip:hover{background:#e2e8f0;}
.tag-chip-more{font-size:11px;font-weight:700;color:#8293a8;padding:3px 4px;align-self:center;}