/* ---- automatic-location-distance-ui ---- */
  .vendors-location-action{display:flex;align-items:center;min-height:2.5rem;gap:.5rem;}
  .location-recovery-modal{max-width:430px;}
  .location-prompt-state{margin-top:.55rem;font-size:.82rem;line-height:1.5;}
  @media(max-width:720px){.vendors-location-action{width:auto}.vendors-location-action .btn{width:auto}}
/* ---- tour-vendor-lock-polish ---- */
/* Final tour target lock: vendor cards must stay visually still while spotlighted. */
.vendor-card.tour-target-locked,
.hscroll .vendor-card.tour-target-locked {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  position: relative;
  z-index: 492 !important;
}
#tourCallout.tour-switching {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .10s ease !important;
}
#tourCallout.tour-enter {
  opacity: 1 !important;
  transition: opacity .16s ease !important;
}
#tourSpotlightHole {
  pointer-events: none !important;
  z-index: 491 !important;
}
#tourCallout {
  z-index: 493 !important;
}
/* ---- final-tour-cart-polish-css ---- */
/* FINAL TOUR STABILITY + CART BREATHING SPACE */
#tourCallout{
  transform:none !important;
  transition:opacity .16s ease, top .20s ease, left .20s ease !important;
  animation:none !important;
  will-change:top,left,opacity;
}
#tourCallout.centered{transform:translate(-50%,-50%) !important;}
#tourCallout.tour-enter{animation:tourFadeOnly .16s ease both !important;}
@keyframes tourFadeOnly{from{opacity:0}to{opacity:1}}
#tourSpotlightHole{transition:top .20s ease,left .20s ease,width .20s ease,height .20s ease,opacity .16s ease !important;}
#tourSpotlightHole.centered{opacity:0 !important;}
/* Covers the page with a plain, opaque surface for the moment a step needs
   to jump the scroll position, so that jump is never actually visible --
   the hole/callout stay hidden and are repositioned while still covered,
   only reappearing once already correctly placed on the new spot. */
/* Same dim as the spotlight itself, not an opaque page-coloured sheet (that read as a white flash on every Next). */
#tourModal.tour-covering{background:rgba(0,0,0,.72) !important;}
#tourModal.tour-covering #tourSpotlightHole{opacity:0 !important;transition:none !important;box-shadow:none !important;}
#tourModal.tour-covering #tourCallout{opacity:0 !important;transition:none !important;}
.cart-page-title{margin:0 0 1.15rem !important;padding:0 .1rem !important;line-height:1.2 !important;}
.cart-vendor-card{margin-top:.15rem !important;}
@media(max-width:720px){.cart-page-title{margin-bottom:1.25rem !important}.cart-vendor-card{margin-top:.1rem !important}}
/* ---- fast-ui-micro-polish ---- */
/* Keep action transitions on the compositor; avoid expensive layout work. */
.notif-item,.conv-list-item,.notif-selection-actions button,.messages-selection-toolbar button{backface-visibility:hidden;transform:translateZ(0);}
/* ---- native-app-shell-css ---- */
/* ================================================================
   NATIVE APP SHELL + ACCESSIBILITY TYPE SCALE
   ================================================================ */
html, body, body * { scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { display:none; width:0 !important; height:0 !important; }
body { padding-top:calc(64px + env(safe-area-inset-top,0px)); }
header { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:200 !important; }
.container > h2, .container > .page-title { margin-bottom:1rem !important; }
.container > h2 + .card, .container > .page-title + .card { margin-top:.9rem !important; }
.container > h2 + section.card, .container > .page-title + section.card { margin-top:.9rem !important; }
/* The app's scroll position is conveyed by movement, not a browser scrollbar.
   Keep inner data areas scrollable when they genuinely need their own viewport. */
.container { scroll-margin-top:80px; }
.bottom-nav { display:flex !important; position:fixed !important; left:max(.75rem,calc((100vw - 1180px)/2)) !important; right:max(.75rem,calc((100vw - 1180px)/2)) !important; bottom:calc(.75rem + env(safe-area-inset-bottom,0px)) !important; z-index:180 !important; }
@media (min-width:721px) {
  body { padding-bottom:7rem !important; }
  .bottom-nav { max-width:1180px; margin-inline:auto; min-height:64px; padding:.45rem .7rem; border-radius:20px; background:color-mix(in srgb,var(--card) 90%,transparent); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid var(--ui-border); box-shadow:0 16px 44px rgba(0,0,0,.16); }
  .bottom-nav-item { min-height:50px; font-size:.76rem; }
  .bottom-nav-item i,.bottom-nav-item .bn-icon { font-size:1.15rem; }
  .bottom-nav.has-add { display:grid !important; }
}
@media (max-width:720px) { body { padding-bottom:calc(5.3rem + env(safe-area-inset-bottom,0px)) !important; } }

/* User-controlled text scale. 100% remains the default; the setting changes
   the root type scale so all rem-based typography grows together predictably. */
html { font-size:calc(16px * var(--levro-font-scale, 1)); }

/* Final native-app shell lock: the document itself scrolls naturally, but its scrollbar is never painted. */
html, body { scrollbar-width:none !important; -ms-overflow-style:none !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0 !important; height:0 !important; display:none !important; }
body { overflow-x:hidden !important; }
header { position:fixed !important; inset:0 0 auto 0 !important; width:100% !important; }
body { padding-top:calc(64px + env(safe-area-inset-top,0px)) !important; }
@media (max-width:720px){ body{padding-top:calc(58px + env(safe-area-inset-top,0px)) !important;} }
/* ---- levromart-search-and-rail-preferences ---- */
/* Home search stays available after the user leaves the hero. While the page
   is moving it contracts into a quiet glass pill; when scrolling settles it
   returns to full prominence. */
.hero-search.home-search-pinned,.hero-search.home-search-pinned.home-search-scrolling{
  position:relative !important; left:auto !important; right:auto !important; top:auto !important;
  width:100% !important; max-width:760px !important; margin:1rem auto 0 !important;
  transform:none !important; opacity:1 !important; z-index:1 !important;
  box-shadow:var(--shadow-float) !important;
}
body.home-search-active .hero{padding-top:inherit !important;}
/* Optional automatic horizontal movement. Default is OFF. Users can still
   drag/scroll a rail themselves whenever horizontal browsing is enabled. */
body.levro-static-rails .hscroll,
body.levro-static-rails .cat-row,
body.levro-static-rails .storefront-product-strip{
  overflow-x:auto !important;
  flex-wrap:nowrap !important;
  scroll-behavior:auto !important;
}
body.levro-static-rails .hscroll > *{flex:0 0 250px !important;min-width:0 !important;}
body.levro-static-rails .cat-row > *{flex:0 0 auto !important;min-width:76px !important;}
body.levro-static-rails .storefront-product-strip > *{flex:0 0 126px !important;}
/* ---- bottom-nav-scroll-motion ---- */
/* Mobile bottom navigation: subtle Instagram-style scroll response. The bar
   stays available while scrolling, but contracts and drifts down a little on
   downward movement; scrolling upward restores its full-size resting state. */
@media (max-width:720px){
  .bottom-nav{
    transform:translateY(0) scale(1);
    transform-origin:center bottom;
    opacity:1;
    will-change:transform,opacity;
    transition:transform .22s cubic-bezier(.2,.75,.25,1), opacity .18s ease, box-shadow .22s ease;
  }
  .bottom-nav.nav-scroll-shrink{
    transform:translateY(.45rem) scale(.91);
    opacity:.78;
    box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
  }
  .bottom-nav.nav-scroll-hide{
    transform:translateY(1.8rem) scale(.86);
    opacity:.18;
  }
}
@media (prefers-reduced-motion:reduce){
  .bottom-nav{transition:none !important;}
  .bottom-nav.nav-scroll-shrink,.bottom-nav.nav-scroll-hide{transform:translateY(0) scale(1);opacity:1;}
}
/* ---- final-vendor-bottom-nav-and-profile-gesture-fix ---- */
/* Vendor navigation: fill the complete bar. The + button owns the centre
   column; every surrounding destination receives an equal-width slot. */
@media (max-width:720px){
  .bottom-nav.has-add{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) !important;
    align-items:center !important;
    width:auto !important;
    min-width:0 !important;
  }
  .bottom-nav.has-add .bn-group{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }
  .bottom-nav.has-add .bn-group .bottom-nav-item{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:.2rem .08rem !important;
    justify-content:center !important;
    align-items:center !important;
    overflow:visible !important;
  }
  .bottom-nav.has-add .bn-group .bottom-nav-item .bn-icon,
  .bottom-nav.has-add .bn-group .bottom-nav-item span:last-child{
    max-width:100% !important;
  }
  .bottom-nav.has-add .bn-group .bottom-nav-item span:last-child{
    width:100% !important;
    text-align:center !important;
  }
  .bottom-nav.has-add .bottom-nav-add{
    justify-self:center !important;
    align-self:center !important;
    flex:none !important;
  }
}

/* Profile is vertically scrollable but horizontally gestureable. Other
   horizontal surfaces keep their own native scrolling behaviour because the
   profile controller explicitly ignores them. */
#profilePanel{overscroll-behavior-x:none !important;touch-action:pan-y !important;}
#profilePanel .profile-panel-scroll{touch-action:pan-y !important;}
/* ---- dedicated-chat-page-fix ---- */
/* Dedicated full-page conversation view (WhatsApp-style): while a single
   DM thread is open, the app's outer chrome -- top header, bottom nav,
   footer, cart FAB, Levi FAB -- is hidden and the thread owns the whole
   screen, with its own header (back arrow, photo, name, call, menu). */
body.chat-full-page { overflow:hidden !important; padding-top:0 !important; }
body.chat-full-page > header,
body.chat-full-page > .site-footer,
body.chat-full-page > #cartFab,
body.chat-full-page > #aiChatFab,
body.chat-full-page > #bottomNav { display:none !important; }
body.chat-full-page > #app { margin:0 !important; padding:0 !important; max-width:none !important; width:100% !important; }
body.chat-full-page #cartFab,
body.chat-full-page #aiChatFab { display:none !important; }

.chat-page-wrap { position:fixed; inset:0; z-index:210; display:flex; flex-direction:column; height:100dvh; background:var(--card); }
.chat-page-header {
  display:flex; align-items:center; gap:0.7rem; flex-shrink:0;
  padding:calc(0.65rem + env(safe-area-inset-top,0px)) 0.85rem 0.65rem;
  background:var(--bg); color:var(--text);
  border-bottom:1px solid var(--ui-border, var(--border));
}
.chat-header-back { background:none; border:none; color:var(--text); font-size:1.15rem; padding:0.3rem; cursor:pointer; flex-shrink:0; }
.chat-header-avatar { width:2.35rem; height:2.35rem; border-radius:50%; object-fit:cover; flex-shrink:0; }
.chat-header-avatar-fallback { display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary); font-weight:700; font-size:0.9rem; }
.chat-header-profile-link { display:flex; align-items:center; gap:0.7rem; flex:1; min-width:0; min-height:2.8rem; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; font:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.chat-header-profile-link:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:10px; }
.chat-header-profile-link:active { opacity:.82; }
.chat-header-name-wrap { flex:1; min-width:0; }
.chat-header-name { display:block; font-size:1rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header-actions { display:flex; align-items:center; gap:0.15rem; flex-shrink:0; position:relative; }
.chat-header-icon-btn { background:none; border:none; color:var(--text); font-size:1.05rem; width:2.2rem; height:2.2rem; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.chat-header-icon-btn:hover { background:color-mix(in srgb, var(--text) 8%, transparent); }
.chat-menu-dropdown { position:absolute; top:calc(100% + 0.5rem); right:0; z-index:70; width:210px; max-width:calc(100vw - 1.5rem); padding:0.4rem; border:1px solid var(--ui-hairline,var(--border)); border-radius:14px; background:var(--card); color:var(--text); box-shadow:0 20px 45px rgba(0,0,0,0.28); }
.chat-menu-dropdown button { width:100%; display:flex; gap:0.65rem; align-items:center; text-align:left; border:0; background:transparent; color:var(--text); padding:0.6rem 0.65rem; border-radius:10px; cursor:pointer; font-family:inherit; font-size:0.85rem; }
.chat-menu-dropdown button:hover { background:color-mix(in srgb, var(--primary) 8%, transparent); }
.chat-menu-dropdown button i { width:18px; text-align:center; color:var(--primary); }
.chat-page-wrap .chat-thread { flex:1; height:auto; min-height:0; border-radius:0; }
.chat-page-wrap .chat-edit-hint { flex-shrink:0; margin:0; padding:0.35rem 0.85rem calc(0.35rem + env(safe-area-inset-bottom,0px)); font-size:0.7rem; text-align:center; }
.chat-skeleton-spinner { flex:1; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--text-muted); }
.chat-fast-empty { flex:1; min-height:18rem; }
/* ---- levromart-2026-09-07-polish ---- */
/* Trending: keep the horizontal browse rail compact so the next listing is always visible. */
@media (max-width: 720px) {
  .hscroll.trending-scroll { gap:.7rem !important; padding:.45rem .15rem .35rem !important; align-items:flex-start !important; }
  /* Fix a small, fixed image height instead of an aspect-ratio on the WHOLE
     card (that's what the previous version of this rule did, and it squeezed
     some cards - e.g. products with a delivery summary or availability line -
     so tightly that content got clipped/invisible past the card's fixed
     height. Letting the card size to its own content, and only fixing the
     image, keeps every field visible while align-items:stretch above still
     equalizes card heights to the tallest real card in the row). */
  .hscroll.trending-scroll > .product-card-wrap { flex:0 0 205px !important; max-width:205px !important; height:auto !important; }
  .hscroll.trending-scroll .product-card-wrap .card { padding:.65rem !important; border-radius:14px !important; height:100% !important; min-height:0 !important; display:flex !important; flex-direction:column !important; box-sizing:border-box !important; }
  .hscroll.trending-scroll .product-card-wrap .product-img { height:6.8rem !important; aspect-ratio:auto !important; flex:0 0 auto !important; }
  .hscroll.trending-scroll .product-card-wrap h4 { font-size:.84rem !important; margin:.45rem 0 .18rem !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; }
  .hscroll.trending-scroll .product-card-wrap p.muted { font-size:.67rem !important; }
  .hscroll.trending-scroll .product-card-wrap .card > .flex,
  .hscroll.trending-scroll .product-card-wrap .card .card-cart-btn,
  .hscroll.trending-scroll .product-card-wrap .card .card-service-btn { margin-top:auto !important; }
}
@media (max-width:420px) {
  .hscroll.trending-scroll > .product-card-wrap { flex-basis:195px !important; max-width:195px !important; }
}

/* My Shop tabs: distribute evenly instead of packing everything to one side. */
.shop-tabs-rail { width:100% !important; justify-content:center !important; align-items:stretch !important; gap:.35rem !important; overflow-x:hidden !important; }
.shop-tabs-rail .dash-tab { flex:1 1 0 !important; max-width:140px !important; min-width:0 !important; justify-content:center !important; text-align:center !important; }
.shop-tabs-rail .dash-tab span:not(.dash-tab-dot) { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; }
.vendor-glance .accordion-trigger { padding:.65rem .85rem !important; }
.vendor-glance .accordion-body { padding:.1rem .85rem .7rem !important; }
.vendor-glance .order-stats-table td { padding:.55rem .05rem !important; }

/* Distance chips must never break "0 m away" into separate lines. */
.vendor-card .badge { white-space:nowrap !important; display:inline-flex !important; align-items:center !important; vertical-align:middle !important; }

/* OSM credit stays present, but the map no longer looks branded by Leaflet. */
.leaflet-control-attribution { font-size:.45rem !important; line-height:1.15 !important; padding:.08rem .2rem !important; background:color-mix(in srgb,var(--card) 74%,transparent) !important; }
.leaflet-control-attribution .leaflet-attribution-flag { display:none !important; }
.leaflet-control-attribution a { text-decoration:none !important; }
#vendorsMapStatus { margin-bottom:1.35rem !important; }

/* The profile experience is a page reveal, like a native app side menu. */
body.profile-reveal-open > header,
body.profile-reveal-open > #app,
body.profile-reveal-open > footer.site-footer,
body.profile-reveal-open > .bottom-nav,
body.profile-reveal-open > #cartFab,
body.profile-reveal-open > #aiChatFab {
  transform:translate3d(var(--profile-reveal-x, min(304px,78vw)),0,0) !important;
  transition:transform .24s cubic-bezier(.22,1,.36,1) !important;
}
body.profile-reveal-dragging > header,
body.profile-reveal-dragging > #app,
body.profile-reveal-dragging > footer.site-footer,
body.profile-reveal-dragging > .bottom-nav,
body.profile-reveal-dragging > #cartFab,
body.profile-reveal-dragging > #aiChatFab { transition:none !important; }
body.profile-reveal-open > .drawer-backdrop { background:rgba(0,0,0,.08) !important; }
#profilePanel.profile-page-reveal { box-shadow:18px 0 45px rgba(0,0,0,.18) !important; }


/* Profile drawer: simple tap-to-open / tap-to-close. No page-reveal movement. */
body.profile-reveal-open > header,
body.profile-reveal-open > #app,
body.profile-reveal-open > footer.site-footer,
body.profile-reveal-open > .bottom-nav,
body.profile-reveal-open > #cartFab,
body.profile-reveal-open > #aiChatFab { transform:none !important; }
#profilePanel.profile-page-reveal { box-shadow:var(--shadow-float) !important; }

/* Settings should end naturally instead of leaving a large flex spacer before the footer. */
body:has(#settings-page) #app { flex:0 0 auto !important; }
body:has(#settings-page) .site-footer { margin-top:.55rem !important; }

/* Levi mark in every floating/header context is white for reliable contrast. */
.ai-chat-fab-logo { filter:brightness(0) invert(1) !important; }
.settings-levi-logo { filter:none !important; -webkit-filter:none !important; }

/* Levi reactions: keep the picker fully inside the chat panel. The previous
   right-anchoring made the left side of the emoji rail disappear off-screen
   on narrow phones. */
.ai-chat-msg { overflow: visible !important; }
.ai-chat-msg .reaction-picker {
  left: 0 !important;
  right: auto !important;
  max-width: min(92vw, 520px) !important;
  width: max-content !important;
  transform: none !important;
}
.ai-chat-msg.assistant .reaction-picker {
  left: 0 !important;
  right: auto !important;
}

/* Settings: keep the return button close to the legal footer instead of
   leaving a large dead zone underneath the account section. */
body:has(#settings-page) .settings-page { padding-bottom: .25rem !important; }
body:has(#settings-page) .settings-close-page { margin-top: .05rem !important; margin-bottom: .1rem !important; }
body:has(#settings-page) .site-footer { margin-top: .15rem !important; padding-top: .8rem !important; padding-bottom: .8rem !important; }
/* ---- levi-input-placeholder-fix ---- */
/* Levi composer: keep the placeholder on one clean line and vertically centered.
   The previous wrapped placeholder could be clipped because the composer starts
   at a single-line textarea height while the placeholder itself wrapped. */
.ai-chat-input-row {
  align-items: center !important;
}
.ai-chat-input-row textarea {
  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 1.25 !important;
  padding: .72rem .9rem !important;
  overflow-x: hidden !important;
}
.ai-chat-input-row textarea::placeholder {
  white-space: nowrap !important;
  font-size: .84rem !important;
  line-height: 1.25 !important;
  opacity: .72;
}
/* Once the user types, autoGrowChatInput() is allowed to increase the
   textarea height normally; only the untouched placeholder needs the fixed
   single-line treatment above. */
/* ---- package-experience-performance-fix ---- */
/* Package browsing: cards behave like real listings, while controls remain tappable. */
.package-listing-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.package-listing-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-lg); border-color: color-mix(in srgb, var(--primary) 24%, var(--ui-border)); }
.package-listing-card .package-card-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.package-search-row { display:flex; align-items:center; gap:.45rem; margin:.65rem 0 .8rem; }
.package-search-row input { margin:0 !important; flex:1 1 auto; min-width:0; }
.package-search-toggle { width:2.25rem; height:2.25rem; min-width:2.25rem; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.package-detail-gallery { display:grid; gap:.65rem; }
.package-detail-main { width:100%; height:min(58vw,360px); object-fit:cover; border-radius:14px; background:var(--input-bg); cursor:zoom-in; }
.package-detail-thumbs { display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; }
.package-detail-thumbs::-webkit-scrollbar { display:none; }
.package-detail-thumb { flex:0 0 64px; width:64px; height:54px; padding:0; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--input-bg); cursor:pointer; }
.package-detail-thumb.active { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 14%,transparent); }
.package-detail-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.package-detail-items { display:grid; gap:.55rem; }
.package-detail-item { display:flex; align-items:center; gap:.65rem; padding:.65rem; border:1px solid var(--border); border-radius:11px; cursor:pointer; background:var(--card); }
.package-detail-item img,.package-detail-item .pkg-item-placeholder { width:52px; height:52px; border-radius:9px; object-fit:cover; flex:0 0 52px; background:var(--input-bg); display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.package-detail-item .pkg-item-copy { min-width:0; flex:1; }
.package-detail-item .pkg-item-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.package-detail-price { font-size:1.35rem; font-weight:800; color:var(--primary); }
.package-recommendation-strip .card { min-width:230px; max-width:270px; }
/* Keep the working-hours controls inside the card on narrow phones. */
.hours-day-row { display:grid !important; grid-template-columns:minmax(5rem,6rem) minmax(0,1fr) !important; gap:.5rem !important; }
.hours-day-row .hours-day-times { min-width:0 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; gap:.35rem !important; }
.hours-day-row .hours-day-times input[type="time"] { width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
.hours-day-row .hours-day-times > span { white-space:nowrap; align-self:center; }
@media (max-width:420px) {
  .hours-day-row { grid-template-columns:5rem minmax(0,1fr) !important; gap:.35rem !important; }
  .hours-day-row .hours-day-times { gap:.25rem !important; }
  .hours-day-row .hours-day-times input[type="time"] { padding-left:.35rem !important; padding-right:.35rem !important; font-size:.82rem !important; }
}
/* Let long catalog pages render progressively instead of painting every card at once. */
.hscroll, .grid { contain:layout paint style; }
.product-card-wrap img, .package-listing-card img { decoding:auto; }
/* ---- package-section-search-fix ---- */
.storefront-packages-head { padding:.1rem .45rem .1rem .15rem; }
.storefront-packages-head .storefront-packages-toggle { flex:1 1 auto; min-width:0; }
.storefront-packages-head .package-search-toggle { flex:0 0 2.35rem; }
.storefront-packages-body .package-search-row.hidden { display:none !important; }
/* ---- self-purchase-speed-polish ---- */
  .own-listing-badge{display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap;}
  .own-purchase-block{border-color:color-mix(in srgb,var(--danger) 24%,var(--ui-border));background:color-mix(in srgb,var(--danger) 4%,var(--card));}
  .own-cart-vendor{border-color:color-mix(in srgb,var(--danger) 24%,var(--ui-border));}
  .page-loading-shell{min-height:42vh;display:flex;align-items:center;justify-content:center;gap:.65rem;color:var(--text-muted);font-size:.92rem;}
  .page-loading-spinner{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--primary);}
  button:not(:disabled),a,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  @media (prefers-reduced-motion:no-preference){button:not(:disabled),.btn,.icon-btn,.chat-header-back,.chat-header-icon-btn{transition:transform .08s ease,opacity .08s ease,background-color .12s ease,border-color .12s ease;}button:not(:disabled):active,.btn:active,.icon-btn:active,.chat-header-back:active,.chat-header-icon-btn:active{transform:scale(.97);}}
/* ---- offline-first-marketplace ---- */
.offline-browse-notice{display:flex;align-items:flex-start;gap:.55rem;margin:.55rem .15rem .85rem;padding:.65rem .8rem;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--card));border-radius:12px;color:var(--text-muted);font-size:.78rem;line-height:1.35;}
.offline-browse-notice i{color:var(--primary);margin-top:.08rem;flex:0 0 auto;}
/* ---- instant-nav-speed-fix ---- */
.instant-page-shell{min-height:42vh;padding:0 .15rem;animation:instantNavIn .12s ease-out;}
.instant-page-shell h2{margin:.15rem 0 1rem;display:flex;align-items:center;gap:.5rem;}
.instant-content-placeholder{display:grid;gap:.65rem;max-width:700px;margin:0 auto;}
.instant-line{height:58px;border-radius:12px;background:var(--ui-surface-2,#f4f6f5);opacity:.72;}
.instant-line.wide{height:82px;} .instant-line.short{width:58%;}
.instant-filter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:.8rem 0;}
.instant-filter-row span{height:42px;border-radius:10px;background:var(--ui-surface-2,#f4f6f5);}
.instant-order-row{height:88px;border-radius:14px;background:var(--ui-surface-2,#f4f6f5);}
@keyframes instantNavIn{from{opacity:.72}to{opacity:1}}
/* ---- support-request-polish ---- */
#supportSubject,#supportMessage{box-sizing:border-box;width:100%;}
#supportMessage{resize:vertical;min-height:9rem;}
.support-attachments{margin-top:.8rem;padding:.75rem;border:1px dashed var(--ui-border);border-radius:14px;background:var(--ui-surface-2,#f7f9f8);}
.support-attachments-label{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.45rem;font-weight:700;}
 .support-file-input{position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;}
.support-file-dropzone{display:flex;align-items:center;gap:.7rem;min-height:74px;padding:.8rem .9rem;border:1px dashed color-mix(in srgb,var(--primary) 38%,var(--ui-border));border-radius:14px;background:color-mix(in srgb,var(--primary) 4%,var(--ui-surface));cursor:pointer;transition:transform .12s ease,border-color .15s ease,background .15s ease;}
.support-file-dropzone:hover,.support-file-dropzone.dragover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--ui-surface));}
.support-file-dropzone:active{transform:scale(.99);}
.support-file-dropzone-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:1rem;flex:0 0 auto;}
.support-file-dropzone-copy{min-width:0;display:grid;gap:.12rem;}
.support-file-dropzone-copy strong{font-size:.88rem;}
.support-file-dropzone-copy span{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.support-requests-accordion{margin-top:1.45rem;border:0;background:transparent;overflow:visible;}
.support-requests-accordion>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.7rem;cursor:pointer;padding:.05rem .05rem .7rem;}
.support-requests-accordion>summary::-webkit-details-marker{display:none;}
.support-requests-accordion>summary h3{margin:0 !important;}
.support-requests-summary-right{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.8rem;}
.support-requests-chevron{transition:transform .18s ease;}
.support-requests-accordion[open] .support-requests-chevron{transform:rotate(180deg);}
.support-requests-list{display:grid;gap:.7rem;}
.support-file-help{display:block;margin-top:.35rem;font-size:.76rem;}
.support-file-list{display:grid;gap:.35rem;margin-top:.55rem;}
.support-file-chip{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.45rem .55rem;border-radius:10px;background:var(--ui-surface);border:1px solid var(--ui-border);}
.support-file-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.support-request-accordion{border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);margin-bottom:.7rem;overflow:hidden;}
.support-request-accordion summary{list-style:none;cursor:pointer;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.7rem;}
.support-request-accordion summary::-webkit-details-marker{display:none;}
.support-request-summary-main{min-width:0;display:grid;gap:.18rem;}
.support-request-summary-subject{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.support-request-summary-meta{font-size:.76rem;color:var(--muted);}
.support-request-chevron{transition:transform .18s ease;flex:0 0 auto;}
.support-request-accordion[open] .support-request-chevron{transform:rotate(180deg);}
.support-request-body{padding:0 1rem 1rem;border-top:1px solid var(--ui-border);}
.support-request-status-note{font-size:.75rem;margin-top:.25rem;color:var(--muted);}
.support-request-attachments{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.55rem;margin-top:.65rem;}
.support-attachment{display:flex;flex-direction:column;gap:.3rem;min-width:0;text-decoration:none;color:inherit;}
.support-attachment img{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover;border:1px solid var(--ui-border);background:var(--ui-surface-2);}
.support-attachment-file{display:flex;align-items:center;gap:.35rem;padding:.6rem;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-surface-2);font-size:.78rem;min-height:76px;}
.support-attachment-name{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.support-requests-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin:1.25rem 0 .75rem !important;}
.support-requests-head h3{margin:0 !important;}
@media(max-width:520px){.support-request-accordion summary{padding:.82rem .85rem}.support-request-body{padding:0 .85rem .9rem}.support-request-attachments{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* ---- support-card-actions-refinement ---- */
/* Product/service actions live in the white information area, not over the image. */
.product-card-wrap .card { position: relative !important; padding-bottom: 3.15rem !important; }
.product-card-wrap .card .card-cart-btn,
.product-card-wrap .card .card-service-btn {
  position: absolute !important;
  right: .72rem !important;
  left: auto !important;
  bottom: .72rem !important;
  top: auto !important;
  z-index: 3 !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.14) !important;
  border: 0 !important;
}
.product-card-wrap .card .card-cart-btn { background: var(--primary) !important; color: #fff !important; cursor: pointer !important; font-size: .9rem !important; }
.product-card-wrap .card .card-service-btn { background: var(--primary) !important; color: #fff !important; cursor: pointer !important; pointer-events: auto !important; font-size: .88rem !important; }
.product-card-wrap .card .card-cart-btn:hover,
.product-card-wrap .card .card-service-btn:hover { transform: scale(1.06); }
@media (max-width: 640px) {
  .grid:has(.product-card-wrap) .product-card-wrap .card { padding-bottom: 2.85rem !important; }
  .grid:has(.product-card-wrap) .product-card-wrap .card .card-cart-btn,
  .grid:has(.product-card-wrap) .product-card-wrap .card .card-service-btn {
    width: 2rem !important; height: 2rem !important; right: .55rem !important; bottom: .55rem !important;
    font-size: .74rem !important;
  }
}
.support-page-head { display:flex; align-items:center; gap:.55rem; margin-bottom:1.15rem !important; }
.support-page-head h2 { margin:0 !important; }
.support-info-btn { width:1.85rem; height:1.85rem; border-radius:50%; border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; box-shadow:var(--ui-shadow); }
.support-info-btn:hover { transform:scale(1.04); }
.support-page-card { max-width:680px; margin-top:.15rem !important; }
.support-info-modal-copy { line-height:1.55; }
/* ---- floating-scroll-visibility ---- */
@media (max-width:720px){
  #aiChatFab,#cartFab{transition:transform .2s cubic-bezier(.2,.75,.25,1),opacity .18s ease !important;will-change:transform,opacity;}
  #aiChatFab.scroll-faded,#cartFab.scroll-faded{transform:translateY(1.15rem) scale(.82) !important;opacity:0 !important;pointer-events:none !important;}
}
@media (prefers-reduced-motion:reduce){#aiChatFab,#cartFab{transition:none !important;}#aiChatFab.scroll-faded,#cartFab.scroll-faded{transform:none !important;opacity:1 !important;pointer-events:auto !important;}}
.instant-nav-status{display:flex;align-items:center;gap:.45rem;color:var(--text-muted);font-size:.78rem;padding:.55rem 0;opacity:.78}.instant-nav-status i{color:var(--primary);font-size:.72rem}
@media(max-width:720px){#drawerBackdrop{touch-action:pan-y !important}.product-gallery-track,.package-detail-gallery-track{scroll-behavior:auto !important;scroll-snap-type:x mandatory !important}.product-detail-card .product-gallery-track{border-radius:0 !important}}
/* ---- 2026-09-08-marketplace-polish ---- */
/* Product cards: wishlist lives away from the bottom-right action. */
.product-card-wrap .fav-btn { left:.58rem !important; right:auto !important; top:.58rem !important; z-index:5 !important; }
/* The actual add/open action stays inside the information panel. */
.product-card-wrap .card-cart-btn,
.product-card-wrap .card-service-btn {
  /* top/left are set on the base .card-cart-btn/.card-service-btn rule with an
     explicit width+height, so a box with top+left+width+height AND bottom+right
     all set resolves top/left and silently ignores bottom/right (CSS2.1 abspos
     over-constraint rules) - that's why this "move to bottom-right" never took
     visual effect. Clearing top/left here is what actually moves it. */
  top:auto !important; left:auto !important;
  right:.62rem !important; bottom:.62rem !important;
}
/* Gallery is a full-width swipe surface; no arrows steal horizontal space. */
.product-gallery-main { position:relative !important; width:100% !important; aspect-ratio:1/1 !important; overflow:hidden !important; }
.product-gallery-main > img { width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; }
.package-detail-gallery > div:first-child { position:relative; overflow:hidden; border-radius:14px; }
.package-detail-main { width:100% !important; height:auto !important; aspect-ratio:1/1 !important; object-fit:contain !important; display:block !important; touch-action:pan-y !important; }
.swipe-gallery-image { touch-action:pan-y !important; }
.product-gallery-nav { display:none !important; }
.product-gallery-count { position:absolute; right:.55rem; bottom:.55rem; z-index:2; padding:.32rem .55rem; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; font-size:.72rem; backdrop-filter:blur(8px); }
.package-detail-top-actions { display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.package-detail-actions-right { display:flex; gap:.45rem; align-items:center; }
.package-fav-btn.active { color:var(--primary) !important; }
/* Products/services separation */
.catalog-type-tabs { display:flex; gap:.45rem; margin:.75rem 0; padding:.2rem; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb,var(--primary) 3%,var(--card)); }
.catalog-type-tab { flex:1; min-width:0; border:0; background:transparent; color:var(--text-muted); border-radius:999px; padding:.62rem .7rem; font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
.catalog-type-tab.active { background:var(--primary); color:#fff; box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 25%,transparent); }
.storefront-table-scroll { max-height:28rem; overflow:auto; }
/* Chat header: only the name is the storefront link; avatar is inert. */
.chat-header-person { display:flex; align-items:center; gap:.7rem; flex:1; min-width:0; }
.chat-header-avatar-wrap { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:2.35rem; height:2.35rem; }
.chat-header-name-link { border:0; background:transparent; padding:0; margin:0; color:inherit; font:inherit; cursor:pointer; text-align:left; }
.chat-header-name-link .chat-header-name { color:var(--text); }
.chat-inline-link { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.chat-image-attachment { border:0; padding:0; margin:.2rem 0; background:transparent !important; box-shadow:none !important; border-radius:12px; max-width:18rem; display:block; cursor:zoom-in; }
.chat-image-attachment .msg-attachment-img { display:block; width:min(18rem,78vw); height:auto; max-height:28rem; object-fit:cover; border-radius:12px; }
.chat-bubble.photo-only { background:transparent !important; padding:.08rem !important; box-shadow:none !important; }
.chat-bubble:has(.chat-image-attachment) { background:transparent !important; padding:.08rem !important; box-shadow:none !important; }
.chat-bubble .chat-image-attachment + .chat-time { color:var(--text-muted) !important; }
.legal-inline-link { color:var(--primary); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
/* Support: keep request list compact and clearly separated. */
.support-requests-accordion { margin-top:1.25rem !important; }
@media (max-width:720px){
  .catalog-type-tab { font-size:.8rem; padding:.58rem .45rem; }
  .product-gallery-main, .package-detail-main { aspect-ratio:1/1 !important; }
}
/* ---- 2026-09-08-final-mobile-ux ---- */
/* Product detail: floating controls stay away from the title/content edge. */
body.product-detail-view #cartFab{right:.7rem !important;bottom:5.25rem !important;left:auto !important;top:auto !important;}
body.product-detail-view #aiChatFab{right:.7rem !important;bottom:.65rem !important;left:auto !important;top:auto !important;}
@media(max-width:720px){
  .product-detail-card .product-detail-media{margin-left:-1rem !important;margin-right:-1rem !important;margin-bottom:1rem !important;width:calc(100% + 2rem) !important;}
  .product-detail-card{overflow:visible !important;padding-left:1rem !important;padding-right:1rem !important;}
}
.product-detail-media,.product-detail-media .product-gallery-carousel{width:100% !important;max-width:none !important;}
.product-gallery-track,.package-detail-gallery-track{margin-left:0 !important;margin-right:0 !important;width:100% !important;}
.product-gallery-carousel{width:100%;}
.product-gallery-track,.package-detail-gallery-track{display:flex !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:none !important;scroll-behavior:smooth !important;scrollbar-width:none !important;-webkit-overflow-scrolling:touch !important;touch-action:pan-x !important;gap:0 !important;overscroll-behavior-x:contain !important;position:relative !important;}
.product-gallery-track::-webkit-scrollbar,.package-detail-gallery-track::-webkit-scrollbar{display:none;}
.product-gallery-slide,.package-detail-gallery-slide{flex:0 0 100% !important;width:100% !important;min-width:100% !important;position:relative !important;height:100% !important;cursor:zoom-in !important;}
.product-gallery-slide img,.package-detail-gallery-slide img{width:100% !important;height:100% !important;display:block !important;object-fit:cover !important;background:transparent !important;border-radius:0 !important;}
.product-gallery-track{aspect-ratio:4/3 !important;border-radius:.9rem !important;}
.package-detail-gallery-track{aspect-ratio:4/3 !important;border-radius:14px !important;}
.product-gallery-count{pointer-events:none !important;}
.storefront-verified-row{margin-top:.4rem !important;display:flex !important;justify-content:flex-start !important;}
.storefront-verified-row .badge{width:max-content !important;}
.storefront-catalog-tabs{margin:.9rem 0 .65rem !important;}
.storefront-products-shell .storefront-section-head{margin-bottom:.2rem !important;}
/* Quiet, non-white navigation skeletons. */
.instant-content-placeholder{display:flex !important;flex-direction:column !important;gap:.65rem !important;background:transparent !important;padding:.65rem 0 !important;}
.instant-line,.instant-order-row{background:color-mix(in srgb,var(--primary) 5%,transparent) !important;border:1px solid color-mix(in srgb,var(--primary) 10%,transparent) !important;box-shadow:none !important;}
.instant-order-row{height:4.2rem !important;border-radius:1rem !important;}
.instant-filter-row span{background:color-mix(in srgb,var(--primary) 5%,transparent) !important;border:1px solid color-mix(in srgb,var(--primary) 8%,transparent) !important;}
.order-date-filter-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.75rem 0 .95rem;}
.order-date-filter-label{display:flex;align-items:center;gap:.5rem;margin:0;flex:1;font-size:.8rem;font-weight:700;color:var(--text-muted);}
.order-date-filter-label select{flex:1;min-width:0;margin:0;background:var(--card);}
.order-clear-date-btn{border:0;background:transparent;color:var(--primary);font:inherit;font-size:.78rem;font-weight:700;padding:.5rem .2rem;}
.order-date-dialog-content{max-width:520px !important;}
.order-date-custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;}
.order-date-custom-grid label{display:flex;flex-direction:column;gap:.3rem;font-weight:700;font-size:.82rem;color:var(--text-muted);}
.order-date-custom-grid input{margin:0;}
.avatar-crop-modal-content{max-width:520px !important;}
.avatar-crop-viewport{position:relative;width:min(80vw,360px);aspect-ratio:1;margin:.6rem auto;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--text) 9%,transparent);border:2px solid var(--primary);touch-action:none;box-shadow:0 10px 30px rgba(0,0,0,.18);}
.avatar-crop-viewport::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.78);border-radius:50%;pointer-events:none;}
.avatar-crop-viewport img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;-webkit-user-drag:none;touch-action:none;transform-origin:center;}
.avatar-crop-zoom{display:flex;align-items:center;gap:.7rem;margin-top:.75rem;font-size:.82rem;font-weight:700;}
.avatar-crop-zoom input{flex:1;}
.chat-image-attachment{display:block !important;width:auto !important;max-width:78vw !important;margin:.15rem 0 !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;}
.chat-image-attachment .msg-attachment-img{width:auto !important;max-width:min(78vw,24rem) !important;max-height:30rem !important;object-fit:contain !important;border-radius:12px !important;background:transparent !important;}
@media(max-width:430px){.order-date-custom-grid{grid-template-columns:1fr;}.order-date-filter-row{align-items:stretch;}.order-date-filter-label{align-items:stretch;flex-direction:column;gap:.35rem;}}
/* ---- 2026-09-08-user-ux-final ---- */
/* Keep the floating Levi control out of product/package detail content. */
/* Vendor cards: verified is a bottom-left status, not part of the location row. */
.vendor-card .vendor-card-footer{display:flex;align-items:center;justify-content:flex-start;gap:.35rem;margin-top:.55rem;min-height:1.55rem;flex-wrap:wrap;}
.vendor-card .vendor-card-footer .badge{margin-left:0 !important;}
.vendor-card-follow-btn{
  margin-top:.55rem; display:inline-flex; align-items:center; justify-content:center;
  padding:.32rem .95rem; border-radius:999px; border:1px solid color-mix(in srgb,var(--text) 22%,var(--border)); cursor:pointer;
  font-size:.72rem; font-weight:700;
  background:transparent; color:var(--text);
}
.vendor-card-follow-btn:hover{ background:color-mix(in srgb, var(--text) 8%, var(--card)); }
.vendor-card-follow-btn.following{ background:var(--primary); color:#fff; }
.vendor-card-follower-stat{ display:block; font-size:.68rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vendor-card-follower-stat i{ margin-right:.22rem; opacity:.7; }
/* Follower count and rating share one row at the bottom of the card
   instead of each getting a full row of their own. The follower text is
   the one allowed to shrink/truncate -- the rating badge must always stay
   fully visible, never pushed past the card's edge and clipped off. */
.vendor-card-meta-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; width:100%; margin-top:.35rem; min-width:0;
}
.vendor-card-rating-corner{
  display:inline-flex; flex:0 0 auto; white-space:nowrap;
  font-size:.62rem; padding:.1rem .38rem; line-height:1.3;
}
/* Product listings must actually occupy their grid tracks. */
.storefront-products-shell #storefrontGrid,
.storefront-products-shell #storefrontGrid .product-card-wrap,
.storefront-products-shell #storefrontGrid .product-card-wrap .card{width:100% !important;min-width:0 !important;}
.storefront-products-shell #storefrontGrid{margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important;}
/* The browse rails behave like a continuous scroll surface, not a sequence of snaps. */
.hscroll,.cat-row,.storefront-product-strip{scroll-snap-type:none !important;scroll-behavior:auto !important;-webkit-overflow-scrolling:touch !important;}
.hscroll > *,.cat-row > *,.storefront-product-strip > *{scroll-snap-align:none !important;}
/* Small, quiet scrollbar on devices/browsers that expose it. */
.hscroll,.cat-row,.storefront-product-strip{scrollbar-width:thin;}
/* Never fall back to a bright white skeleton in dark mode. */
:root{--ui-surface-2:color-mix(in srgb,var(--card) 94%,var(--primary) 6%);}
[data-theme="dark"],[data-theme="black"]{--ui-surface-2:color-mix(in srgb,var(--card) 92%,var(--primary) 8%);}
.instant-line,.instant-filter-row span,.instant-order-row{background:var(--ui-surface-2) !important;border-color:color-mix(in srgb,var(--ui-border) 80%,transparent) !important;}
.support-attachments{background:color-mix(in srgb,var(--card) 96%,var(--primary) 4%) !important;color:var(--text) !important;}
.support-file-dropzone{background:color-mix(in srgb,var(--card) 94%,var(--primary) 6%) !important;color:var(--text) !important;}
.support-file-dropzone:hover,.support-file-dropzone.dragover{background:color-mix(in srgb,var(--card) 90%,var(--primary) 10%) !important;}
.support-attachment-file,.support-attachment img{background:var(--ui-surface-2) !important;}
/* Date filters use compact relative periods; the old custom from/to popup is removed. */
.order-date-filter-row{display:flex !important;align-items:center !important;gap:.55rem !important;flex-wrap:wrap !important;}
.order-date-filter-label{display:flex !important;align-items:center !important;gap:.45rem !important;margin:0 !important;}
.order-date-filter-label > select{min-width:160px !important;}
@media(max-width:430px){.order-date-filter-row{gap:.4rem !important}.order-date-filter-label{width:100% !important}.order-date-filter-label > select{width:100% !important;min-width:0 !important;}}
/* Image long-press/reaction surfaces: suppress browser image selection/menus. */
.chat-image-attachment,.chat-image-attachment img{user-select:none !important;-webkit-user-select:none !important;-webkit-touch-callout:none !important;-webkit-user-drag:none !important;}
.image-lightbox img{user-select:auto !important;-webkit-user-select:auto !important;-webkit-touch-callout:default !important;-webkit-user-drag:auto !important;}
/* Drawer swipe feedback. */
#profilePanel,#notifPanel{will-change:transform;}
/* ---- levi-cart-state-guard ---- */
  body.ai-chat-open #cartFab,
  #aiChatPanel:not(.hidden) ~ #cartFab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
/* ---- home-loading-resilience ---- */
.home-loading-shell{padding:1rem 0 2rem;min-height:48vh;}
.home-loading-hero{border-radius:1.25rem;padding:1rem;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 12%,var(--card)),var(--card));border:1px solid var(--border);margin-bottom:1rem;}
.home-loading-search{height:3rem;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);animation:levromartPulse 1.35s ease-in-out infinite;}
.home-loading-actions{display:flex;gap:.55rem;margin-top:.8rem;}
.home-loading-actions span{height:2.35rem;flex:1;border-radius:.8rem;background:color-mix(in srgb,var(--text) 7%,transparent);animation:levromartPulse 1.35s ease-in-out infinite;}
.home-loading-line{width:42%;height:1rem;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);margin:1rem 0;}
.home-loading-rail{display:flex;gap:.65rem;overflow:hidden;margin-bottom:1.25rem;}
.home-loading-rail span{flex:0 0 7rem;height:2.8rem;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent);}
.home-loading-title{width:34%;height:1rem;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);margin:1rem 0;}
.home-loading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;}
.home-loading-grid span{height:11rem;border-radius:1rem;background:color-mix(in srgb,var(--text) 7%,transparent);}
@keyframes levromartPulse{0%,100%{opacity:.48}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.home-loading-search,.home-loading-actions span{animation:none}}
/* ---- storefront-loading-resilience ---- */
.storefront-loading-shell{padding-top:.2rem;}
.storefront-loading-brand{display:flex;align-items:center;gap:.85rem;padding:1rem;border:1px solid var(--border);background:var(--card);border-radius:1rem;box-shadow:var(--shadow,none);}
.storefront-loading-avatar{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 14%,var(--card));color:var(--primary);font-size:1.25rem;flex:0 0 auto;}
/* ---- 2026-09-08-final-chat-static-and-table ---- */
/* The DM shell itself is completely anchored. The message list is the ONLY
   surface that may scroll vertically. This prevents iOS/WebKit rubber-band
   movement of the entire chat page while preserving normal chat scrolling. */
html.chat-route-lock,
body.chat-full-page{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.chat-full-page{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  touch-action:none !important;
}
body.chat-full-page > #app{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  touch-action:none !important;
}
.chat-page-wrap{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
}
.chat-page-wrap .chat-thread{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
}
.chat-page-wrap .chat-messages{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain !important;
  overscroll-behavior-x:none !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}
.chat-page-wrap .chat-page-header,
.chat-page-wrap .chat-input-row,
.chat-page-wrap .chat-input-row *{
  touch-action:manipulation !important;
}
.chat-page-wrap .chat-bubble{
  touch-action:pan-y !important;
  overflow-wrap:anywhere !important;
}
.chat-page-wrap .chat-bubble-wrap.chat-swipe-active .chat-bubble{
  transition:none !important;
}

/* Storefront list/table: the table itself gets a bounded vertical scroll
   surface, while the Available column is genuinely centered so the visual
   space is balanced on both sides. */
#storefrontTable{
  max-height:30rem !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:none !important;
}
#storefrontTable::-webkit-scrollbar{display:none !important;}
#storefrontTable .storefront-data-table{
  width:100% !important;
  min-width:620px !important;
  border-collapse:collapse !important;
  table-layout:fixed !important;
}
#storefrontTable .storefront-data-table th,
#storefrontTable .storefront-data-table td{
  padding:.62rem .55rem !important;
  border-bottom:1px solid var(--border) !important;
  vertical-align:middle !important;
}
#storefrontTable .storefront-data-table th:nth-child(1),
#storefrontTable .storefront-data-table td:nth-child(1){width:28% !important;text-align:left !important;}
#storefrontTable .storefront-data-table th:nth-child(2),
#storefrontTable .storefront-data-table td:nth-child(2){width:25% !important;text-align:left !important;}
#storefrontTable .storefront-data-table th:nth-child(3),
#storefrontTable .storefront-data-table td:nth-child(3){width:27% !important;text-align:left !important;}
#storefrontTable .storefront-data-table th.available-col,
#storefrontTable .storefront-data-table td.available-col{
  width:20% !important;
  text-align:center !important;
  padding-left:.35rem !important;
  padding-right:.35rem !important;
}
#storefrontTable .storefront-data-table th.available-col{
  font-weight:800 !important;
}
@media(max-width:720px){
  #storefrontTable{max-height:24rem !important;}
  #storefrontTable .storefront-data-table{min-width:0 !important;}
  #storefrontTable .storefront-data-table th,
  #storefrontTable .storefront-data-table td{padding:.62rem .35rem !important;}
}
/* ---- levromart-20260908-final-request-packages-chat-polish ---- */
/* Request page must remain a real, usable page, not an empty route shell. */
#app .request-equipment-page{min-height:20rem;}

/* Levi message actions: no persistent toolbar. Long-press exposes Copy only. */
#aiChatMessages .ai-chat-action-row,
#aiChatMessages .ai-msg-reactions-row,
#aiChatMessages .ai-chat-copy-row{display:none !important;}

/* Jump-to-latest: compact glass circle, never a full-width black bar. */
#aiChatBottomBtn{position:absolute !important;right:.9rem !important;bottom:5rem !important;width:2.65rem !important;height:2.65rem !important;min-width:2.65rem !important;min-height:2.65rem !important;padding:0 !important;border-radius:50% !important;border:1px solid color-mix(in srgb,var(--text) 15%,transparent) !important;background:color-mix(in srgb,var(--card) 58%,transparent) !important;color:var(--text) !important;backdrop-filter:blur(20px) saturate(170%) !important;-webkit-backdrop-filter:blur(20px) saturate(170%) !important;box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.15) !important;}
#aiChatBottomBtn i{font-size:.9rem !important;}

/* Dedicated chat: shell is fixed; only the message list scrolls. */
body.chat-full-page,body.chat-full-page>#app,.chat-page-wrap,.chat-page-wrap .chat-thread{overscroll-behavior:none !important;}
.chat-page-wrap .chat-messages{overscroll-behavior:contain !important;scrollbar-width:none !important;padding-left:.75rem !important;padding-right:.9rem !important;}
.chat-page-wrap .chat-messages::-webkit-scrollbar{display:none !important;}
.chat-page-wrap .chat-bubble-wrap{max-width:calc(100% - .5rem) !important;}
.chat-page-wrap .chat-bubble-wrap.mine{margin-left:auto !important;margin-right:.15rem !important;}
.chat-page-wrap .chat-bubble-wrap.theirs{margin-left:.15rem !important;margin-right:auto !important;}
.chat-page-wrap .chat-image-attachment{max-width:min(78vw,24rem) !important;margin-right:.15rem !important;touch-action:pan-y !important;}
.chat-page-wrap .chat-image-attachment .msg-attachment-img{display:block !important;max-width:100% !important;width:auto !important;height:auto !important;object-fit:contain !important;}

/* Make swipe-to-reply deliberately easy, including photo messages. */
.chat-page-wrap .chat-bubble{touch-action:pan-y !important;}
.chat-page-wrap .chat-image-attachment,.chat-page-wrap .chat-image-attachment img{touch-action:pan-y !important;-webkit-user-drag:none !important;user-select:none !important;-webkit-user-select:none !important;}
.chat-page-wrap .chat-bubble-wrap.chat-swipe-active .chat-bubble{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent) !important;}

/* Vendor cards: complete uniform border on every edge, with breathing room. */
#vendorsGrid .vendor-card{border:1px solid var(--border) !important;outline:1px solid transparent !important;outline-offset:-1px !important;overflow:visible !important;}
#vendorsGrid .vendor-card:active,#vendorsGrid .vendor-card:hover{border-color:var(--primary) !important;outline-color:color-mix(in srgb,var(--primary) 35%,transparent) !important;}
#vendorsGrid{padding-top:.35rem !important;}

/* Home continuous rails: moderate movement. */
#app .hscroll,#app .cat-row{scroll-behavior:auto !important;}

/* Packages tab is a real catalogue tab; give its cards normal space. */
.home-catalog-type-tabs .catalog-type-tab{overflow:hidden !important;text-overflow:ellipsis !important;}
/* ---- levromart-20260908-absolute-final-overrides ---- */
.product-detail-card .product-detail-top-actions{position:absolute !important;top:.75rem !important;right:.75rem !important;left:auto !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:.5rem !important;width:max-content !important;z-index:20 !important;}
.product-detail-card .product-detail-top-actions > .fav-btn,.product-detail-card .product-detail-top-actions > .product-storefront-share-btn{position:static !important;top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;margin:0 !important;transform:none !important;}
.product-detail-card .product-detail-title{padding-right:6.25rem !important;}
@media(max-width:520px){.product-detail-card .product-detail-top-actions{right:.65rem !important;top:.65rem !important;gap:.4rem !important;}.product-detail-card .product-detail-title{padding-right:5.6rem !important;}}

/* Final vendor-card outline: a single uniform perimeter, including the top edge. */
#vendorsGrid .vendor-card{border:1.5px solid var(--border) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 22%,transparent),0 0 0 0 transparent !important;}
#vendorsGrid .vendor-card:hover,#vendorsGrid .vendor-card:active{border-color:var(--primary) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent),0 8px 28px color-mix(in srgb,var(--primary) 8%,transparent) !important;}

/* Levi jump button is always a circular glass control, regardless of theme. */
#aiChatBottomBtn{display:flex !important;box-sizing:border-box !important;overflow:hidden !important;}
html[data-theme="light"] #aiChatBottomBtn,html:not([data-theme="dark"]):not([data-theme="black"]) #aiChatBottomBtn{background:color-mix(in srgb,var(--card) 64%,transparent) !important;color:var(--primary) !important;}

/* Photo messages get an explicit right breathing edge inside the chat viewport. */
.chat-page-wrap .chat-bubble-wrap.mine:has(.chat-image-attachment){padding-right:.25rem !important;}
.chat-page-wrap .chat-bubble-wrap.theirs:has(.chat-image-attachment){padding-right:.25rem !important;}
/* ---- levromart-final-v5-precision-fixes ---- */
#aiChatBottomBtn{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:2.75rem !important;height:2.75rem !important;min-width:2.75rem !important;min-height:2.75rem !important;padding:0 !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;background:color-mix(in srgb,var(--card) 62%,transparent) !important;color:var(--text) !important;border:1px solid color-mix(in srgb,var(--text) 15%,transparent) !important;backdrop-filter:blur(22px) saturate(170%) !important;-webkit-backdrop-filter:blur(22px) saturate(170%) !important;box-shadow:0 10px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.16) !important;}
#aiChatBottomBtn i{position:static !important;margin:0 !important;transform:none !important;line-height:1 !important;font-size:.92rem !important;}
#aiChatBottomBtn.hidden{display:none !important;}
#aiChatMessages .ai-chat-msg-speak,#aiChatMessages .ai-chat-msg-copy{display:inline-flex !important;width:1.35rem !important;height:1.35rem !important;margin:.35rem .05rem 0 .15rem !important;padding:0 !important;border:0 !important;background:transparent !important;color:var(--text-muted) !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;font-size:.72rem !important;opacity:.72 !important;border-radius:7px !important;}
#aiChatMessages .ai-chat-msg-copy:hover,#aiChatMessages .ai-chat-msg-copy:active{color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 9%,transparent) !important;opacity:1 !important;}
#aiChatMessages .ai-chat-action-row,#aiChatMessages .ai-msg-reactions-row,#aiChatMessages .ai-chat-copy-row{display:none !important;}
body.chat-full-page,body.chat-full-page>#app,.chat-page-wrap,.chat-page-wrap .chat-thread{touch-action:none !important;overscroll-behavior:none !important;}
.chat-page-wrap .chat-page-header,.chat-page-wrap .chat-input-row,.chat-page-wrap .chat-input-row *{touch-action:none !important;}
.chat-page-wrap .chat-messages{touch-action:pan-y !important;overflow-y:auto !important;overflow-x:hidden !important;overscroll-behavior-y:contain !important;overscroll-behavior-x:none !important;padding-left:1rem !important;padding-right:1rem !important;box-sizing:border-box !important;-webkit-overflow-scrolling:touch !important;}
.chat-page-wrap .chat-bubble-wrap{max-width:calc(100% - .75rem) !important;box-sizing:border-box !important;}
.chat-page-wrap .chat-bubble-wrap.mine{margin-right:.35rem !important;}
.chat-page-wrap .chat-bubble-wrap.theirs{margin-left:.35rem !important;}
.chat-page-wrap .chat-image-attachment{max-width:calc(100% - .5rem) !important;margin-right:.25rem !important;}
.chat-page-wrap .chat-image-attachment .msg-attachment-img{max-width:100% !important;width:auto !important;height:auto !important;display:block !important;}
.chat-page-wrap .chat-bubble{touch-action:pan-y !important;}
.chat-page-wrap .chat-image-attachment,.chat-page-wrap .chat-image-attachment img{touch-action:pan-y !important;}
#storefrontTable{overflow-y:auto !important;overflow-x:auto !important;max-height:24rem !important;-webkit-overflow-scrolling:touch !important;}
#storefrontTable .storefront-data-table th.available-col,#storefrontTable .storefront-data-table td.available-col{text-align:center !important;vertical-align:middle !important;padding-left:.2rem !important;padding-right:.2rem !important;}
#vendorsGrid .vendor-card{border:1.5px solid var(--border) !important;box-sizing:border-box !important;}
#vendorsGrid .vendor-card:hover,#vendorsGrid .vendor-card:active{border-color:var(--primary) !important;}
/* ---- product-discount-delivery-polish ---- */
.product-price-old{opacity:.58;text-decoration:line-through;margin-right:.35rem;font-size:.9em;}
.prod-delivery-settings{margin-top:.65rem;padding:.75rem;border:1px solid var(--border);border-radius:.8rem;background:color-mix(in srgb,var(--card) 82%,transparent);}
.prod-delivery-settings .delivery-setting-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.65rem;}
@media(max-width:560px){.prod-delivery-settings .delivery-setting-grid{grid-template-columns:1fr;}}
/* ---- no-account-deletion-ui ---- */
#accountDangerSection,#deleteAccountModal,.settings-action-danger[onclick*="startDeleteAccount"]{display:none!important;}
/* ---- dashboard-dot-polish ---- */
.chart-dot{vector-effect:non-scaling-stroke;}
/* ---- vendor-custom-cover ---- */
.storefront-cover.has-custom-cover{background-position:center;background-size:cover;background-repeat:no-repeat;}
.storefront-cover.has-custom-cover .storefront-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.5));pointer-events:none;}
.storefront-cover-edit{position:absolute;right:.75rem;top:.75rem;z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.48);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.storefront-cover-edit:hover{background:rgba(0,0,0,.68);}
.storefront-cover-edit input{display:none;}
.storefront-cover-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--text) 55%,transparent);font-size:.82rem;pointer-events:none;}
/* ---- levromart-live-accent-branding ---- */
/* Static Levromart/Levi raster marks inherit the selected accent. The floating
   FAB remains white because its background already uses --primary. */
.levromart-splash-logo,
.login-modal-logo,
#tourLeviLogo,
#installModalLogo,
.settings-levi-logo,
#aiChatHeaderLogo {
  filter:var(--levi-accent-filter, none) !important;
  -webkit-filter:var(--levi-accent-filter, none) !important;
}
/* ---- levromart-levi-white-mark ---- */
/* Levi's tour mark is intentionally monochrome white; the rest of the app may still use the live accent. */
#tourLeviLogo{filter:brightness(0) invert(1) !important;-webkit-filter:brightness(0) invert(1) !important;}
.brand-spinner-arc-1,.brand-spinner-arc-2{stroke:#fff !important;}
/* ---- levromart-media-action-sheet ---- */
.media-action-sheet{position:fixed;inset:0;z-index:10070;display:flex;align-items:flex-end;justify-content:center;}
.media-action-sheet-backdrop{position:absolute;inset:0;background:rgba(2,8,23,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.media-action-sheet-card{position:relative;width:min(520px,100%);background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:1.2rem 1.2rem 0 0;padding:.8rem .9rem calc(.9rem + env(safe-area-inset-bottom,0px));box-shadow:0 -18px 60px rgba(0,0,0,.24);}
.media-action-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.25rem .15rem .65rem;border-bottom:1px solid var(--border);}
.media-action-sheet-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .55rem;border:0;background:transparent;color:var(--text);text-align:left;border-radius:.8rem;font:inherit;cursor:pointer;}
.media-action-sheet-item:hover,.media-action-sheet-item:focus-visible{background:color-mix(in srgb,var(--primary) 8%,transparent);outline:none;}
.media-action-sheet-item>i:first-child{width:2rem;height:2rem;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 11%,transparent);color:var(--primary);flex:0 0 2rem;}
.media-action-sheet-item span{min-width:0;flex:1;display:flex;flex-direction:column;gap:.12rem;}
.media-action-sheet-item small{color:var(--text-muted);font-size:.72rem;line-height:1.3;}
.media-action-sheet-item.danger{color:var(--danger);}
.media-action-sheet-item.danger>i:first-child{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);}
.media-action-sheet-item:disabled{opacity:.42;cursor:not-allowed;}
.media-action-sheet-arrow{font-size:.65rem;color:var(--text-muted);}
.cover-crop-modal-content{max-width:560px !important;}
.cover-crop-viewport{width:100%;height:min(42vw,260px);min-height:170px;position:relative;overflow:hidden;border-radius:14px;background:#111;touch-action:none;border:1px solid var(--border);}
.cover-crop-viewport img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center center;user-select:none;-webkit-user-select:none;pointer-events:none;}
@media(max-width:600px){.media-action-sheet-card{border-radius:1.05rem 1.05rem 0 0;}.cover-crop-viewport{height:190px;}}
/* ---- levromart-2026-09-10-card-consistency-fix ---- */
/* ================================================================
   CARD CONSISTENCY PASS, every product/vendor/package rail and grid
   gets a uniform, moderate card size with none of its real details
   (price, availability, delivery, vendor) clipped off. Selectors are
   prefixed with #app so this reliably outranks the older per-section
   patches above, no matter how those are ordered. */

/* TRENDING NOW + TRENDING SERVICES, same moderate card size, and no
   fixed/short card height that could crop off price, availability or
   delivery info on a fuller listing. */
/* align-items:stretch here made every card in the row match the tallest
   sibling's natural height (a longer product name wrapping to 2 lines, on
   Android especially, stretched ALL cards to that height) -- with the
   price/cart footer then pinned to the bottom via margin-top:auto, that left
   a big blank gap between the name and price on every shorter card. Each
   card should just be its own natural height. */
#app .hscroll.trending-scroll{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; align-items:flex-start !important; gap:.7rem !important; }
#app .hscroll.trending-scroll > .product-card-wrap{
  flex:0 0 200px !important; width:200px !important; max-width:200px !important; min-width:200px !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
}
#app .hscroll.trending-scroll > .product-card-wrap > .card{
  height:100% !important; min-height:0 !important; max-height:none !important;
  display:flex !important; flex-direction:column !important; overflow:visible !important;
  padding:.65rem !important; box-sizing:border-box !important; border-radius:14px !important;
}
#app .hscroll.trending-scroll .product-img{
  width:100% !important; height:7rem !important; min-height:7rem !important; max-height:7rem !important;
  aspect-ratio:auto !important; flex:0 0 7rem !important; overflow:hidden !important; border-radius:10px !important; margin:0 !important;
}
#app .hscroll.trending-scroll .product-img img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
#app .hscroll.trending-scroll .product-card-wrap h4{
  font-size:.82rem !important; line-height:1.22 !important; margin:.4rem 0 .15rem !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
  min-height:2.44em !important;
}
#app .hscroll.trending-scroll .product-card-vendor-row{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:.25rem !important; min-height:1.1rem !important; overflow:visible !important;
}
#app .hscroll.trending-scroll .product-card-vendor{ max-width:60% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:.62rem !important; }
#app .hscroll.trending-scroll .product-card-price-block{ margin:.25rem 0 !important; font-size:.7rem !important; line-height:1.2 !important; overflow:visible !important; }
#app .hscroll.trending-scroll .product-card-price-block > span{ display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#app .hscroll.trending-scroll .product-availability{ font-size:.62rem !important; margin:.15rem 0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#app .hscroll.trending-scroll .product-card-delivery-wrap{ margin:.2rem 0 0 !important; overflow:visible !important; }
#app .hscroll.trending-scroll .product-delivery-summary{
  font-size:.6rem !important; line-height:1.2 !important; margin:0 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
#app .hscroll.trending-scroll .product-card-action-row{ margin-top:auto !important; padding-top:.3rem !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; }
/* Every home section (Trending now, Featured Vendors, Trending services,
   Packages, Browse) is one h3.section-title followed by one .hscroll (or,
   for Browse, the catalog grid) -- give every seam between them the exact
   same spacing instead of each row/heading pair carrying its own
   independently-tuned padding and margin, which is what made some gaps
   read as bigger than others even though nothing was "extra" about them. */
#app .hscroll.trending-scroll,
#app .hscroll.top-rated-vendors-scroll,
#app .hscroll.service-trending-scroll,
#app .hscroll.package-recommendation-strip{ padding-bottom:.3rem !important; margin-bottom:0 !important; }
#app .hscroll.trending-scroll + h3.section-title,
#app .hscroll.top-rated-vendors-scroll + h3.section-title,
#app .hscroll.service-trending-scroll + h3.section-title,
#app .hscroll.package-recommendation-strip + h3.section-title{ margin-top:.3rem !important; }
/* Compact trending card: photo, name, price and a quick-add button only --
   no vendor row, availability, delivery summary or comment icon -- with the
   wishlist heart moved to the top-right corner of the photo. */
#app .product-card-compact .fav-btn{ left:auto !important; right:.5rem !important; top:.5rem !important; }
#app .product-card-compact-footer{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:.4rem !important; margin-top:auto !important; padding-top:.35rem !important;
}
#app .product-card-compact-price{
  font-weight:800 !important; font-size:.82rem !important; color:var(--text) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  display:inline-flex !important; align-items:center !important; gap:.3rem !important;
}
#app .product-card-compact-price .product-variety-indicator{
  font-size:.72rem !important; font-weight:600 !important; flex:0 0 auto !important;
}
/* Older grid-view rules elsewhere pin .card-cart-btn absolutely to the
   card's bottom-right corner (a leftover from before this compact layout
   existed) which then overlapped the total-with-delivery line sitting at
   the bottom of the card. This selector out-specifies those rules to put
   the button back in normal flow, inline with the price where the compact
   footer already lays it out. */
#app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn,
#app .product-card-compact .card-cart-btn{
  position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  flex:0 0 auto !important; width:1.9rem !important; height:1.9rem !important; min-width:0 !important;
  border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:var(--primary) !important; color:#fff !important; border:0 !important; font-size:.78rem !important; padding:0 !important;
}
/* Neutralise the old fixed-height (300px) + clipped service rail so a
   service card can never lose fields the way products no longer do. */
#app .service-trending-scroll > .product-card-wrap,
#app .service-trending-scroll > .product-card-wrap > .card{
  height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important;
}

/* PACKAGES, the price badge always sits on the right, name on the left,
   on every screen size (not just the narrow-phone breakpoint). */
#app .package-card-title-row{
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  justify-content:space-between !important; gap:.5rem !important;
}
#app .package-card-title-row strong{ order:1 !important; flex:1 1 auto !important; min-width:0 !important; }
#app .package-card-title-row .badge{ order:2 !important; flex:0 0 auto !important; margin-left:auto !important; }

/* TOP-RATED VENDORS, roomier card so the verified/rating badges,
   delivery line and bio/category line are always visible instead of
   being clipped into looking like an empty card. */
#app .top-rated-vendors-scroll{ align-items:stretch !important; }
#app .vendor-home-copy{ overflow:visible !important; gap:.28rem !important; min-width:0 !important; flex:1 1 auto !important; }
#app .vendor-home-meta{ overflow:visible !important; }
#app .vendor-home-known{
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; line-height:1.25 !important;
}

/* BROWSE EVERYTHING (the main Products/Services/Packages grid), cards
   were carrying a large leftover bottom padding meant for a button that
   no longer sits there, which stretched every card far past its content
   and left a big dead gap under the listing. Trim it back down and pull
   the image in a touch so the card reads as a compact, square listing. */
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card{
  padding-bottom:.6rem !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-img{
  height:6rem !important; min-height:6rem !important; max-height:6rem !important; flex:0 0 6rem !important;
}
#app .grid:has(> .product-card-wrap) .product-card-action-row{
  min-height:1.8rem !important; margin-top:.25rem !important;
}
/* ---- levromart-product-variant-pricing ---- */
.product-variant-pricing{margin-top:.85rem;padding:.8rem;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--primary) 3%,var(--card));}
.product-variant-pricing-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem;margin-bottom:.7rem;}
.product-variant-pricing-head strong{display:block;}
.variant-price-row{display:grid;grid-template-columns:74px minmax(0,1fr) 130px 130px 38px;gap:.5rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--border);}
.variant-price-row:first-child{border-top:0;}
.variant-price-thumb{width:74px;height:56px;border-radius:9px;overflow:hidden;border:1px solid var(--border);background:var(--input-bg);}
.variant-price-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.variant-price-row input{margin:0;min-width:0;}
.variant-price-remove{width:38px;height:38px;border:0;border-radius:10px;background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);cursor:pointer;}
.variant-price-note{font-size:.72rem;color:var(--text-muted);line-height:1.35;margin:.15rem 0 0;}
@media(max-width:720px){.variant-price-row{grid-template-columns:64px minmax(0,1fr) 1fr 1fr 36px;}.variant-price-thumb{width:64px;height:50px;}}
@media(max-width:520px){.variant-price-row{grid-template-columns:58px minmax(0,1fr) 36px;}.variant-price-row .variant-sale-price,.variant-price-row .variant-discount-price{grid-column:2 / 3;}.variant-price-remove{grid-column:3;grid-row:1 / span 2;}.variant-price-thumb{width:58px;height:46px;}.variant-price-row:after{content:"Use individual prices only where this photo represents a different variety.";grid-column:2 / 3;font-size:.66rem;color:var(--text-muted);}}
.product-variant-picker{margin-top:.7rem;padding:.75rem;border:1px solid var(--border);border-radius:13px;background:color-mix(in srgb,var(--primary) 3%,var(--card));}
.product-variant-picker-head{display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin-bottom:.5rem;}
.product-variant-picker-list{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem 0 .15rem;scrollbar-width:none;}
.product-variant-picker-list::-webkit-scrollbar{display:none;}
.product-variant-choice{flex:0 0 auto;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:11px;padding:.45rem .6rem;cursor:pointer;display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;min-width:110px;}
.product-variant-choice.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--card));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent);}
.product-variant-choice strong{font-size:.78rem;line-height:1.15;}
.product-variant-choice small{font-size:.7rem;color:var(--text-muted);}
/* ---- levromart-home-carousel-admin ---- */
  /* Promotional homepage carousel */
  .home-promotional-carousel{position:relative;width:100%;margin:0 0 1.05rem;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--ui-border,var(--border));box-shadow:0 10px 30px rgba(15,23,42,.08);isolation:isolate}
  .home-promotional-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab}
  .home-promotional-viewport:active{cursor:grabbing}
  .home-promotional-track{display:flex;width:100%;height:100%;transform:translate3d(0,0,0);transition:transform .45s cubic-bezier(.22,.8,.2,1);will-change:transform}
  .home-promotional-slide{flex:0 0 100%;width:100%;height:100%;position:relative;display:block;border:0;padding:0;background:none;cursor:pointer}
  .home-promotional-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}
  .home-promotional-dots{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);display:flex;gap:.42rem;padding:.38rem .55rem;border-radius:999px;background:rgba(0,0,0,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .home-promotional-dot{width:.48rem;height:.48rem;border:0;padding:0;border-radius:999px;background:rgba(255,255,255,.58);cursor:pointer;transition:width .2s ease,background .2s ease,opacity .2s ease}
  .home-promotional-dot.active{width:1.25rem;background:#fff}
  @media(max-width:600px){.home-promotional-carousel{border-radius:14px}.home-promotional-dots{bottom:.5rem}}
  @media(prefers-reduced-motion:reduce){.home-promotional-track{transition:none}}

  /* Admin carousel manager */
  .admin-carousel-manager{display:flex;flex-direction:column;gap:1rem}
  .admin-carousel-add{padding:1rem;border:1px dashed var(--primary);border-radius:15px;background:color-mix(in srgb,var(--primary) 4%,var(--card))}
  .admin-carousel-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem}
  .admin-carousel-form-grid .full{grid-column:1/-1}
  .admin-carousel-file{display:block;padding:.8rem;border:1px dashed var(--border);border-radius:12px;background:var(--input-bg);cursor:pointer}
  .admin-carousel-file input{margin:.5rem 0 0;padding:0;border:0;background:transparent;box-shadow:none}
  .admin-carousel-list{display:flex;flex-direction:column;gap:.7rem}
  .admin-carousel-item{border:1px solid var(--border);border-radius:15px;background:var(--card);overflow:hidden;transition:box-shadow .18s ease,opacity .18s ease,transform .18s ease}
  .admin-carousel-item.dragging{opacity:.55;box-shadow:0 12px 28px rgba(15,23,42,.16);transform:scale(.995)}
  .admin-carousel-item.drop-target{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 16%,transparent)}
  .admin-carousel-summary{display:grid;grid-template-columns:auto 104px minmax(0,1fr) auto auto;gap:.8rem;align-items:center;padding:.72rem .8rem;cursor:pointer;user-select:none}
  .admin-carousel-drag{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--text-muted);background:var(--input-bg);cursor:grab;touch-action:none}
  .admin-carousel-drag:active{cursor:grabbing}
  .admin-carousel-thumb{width:104px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--input-bg);border:1px solid var(--border)}
  .admin-carousel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .admin-carousel-summary-copy{min-width:0}.admin-carousel-summary-copy h4{margin:0 0 .15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-carousel-summary-copy p{margin:0;font-size:.76rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .admin-carousel-chevron{transition:transform .18s ease;color:var(--text-muted)}
  .admin-carousel-item.open .admin-carousel-chevron{transform:rotate(180deg)}
  .admin-carousel-details{display:none;padding:0 .85rem .85rem;border-top:1px solid var(--border)}
  .admin-carousel-item.open .admin-carousel-details{display:block}
  .admin-carousel-meta{min-width:0;padding-top:.8rem}
  .admin-carousel-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.65rem}
  .admin-carousel-actions .btn{margin:0}
  .admin-carousel-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;padding:.22rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);white-space:nowrap}
  .admin-carousel-uploading{opacity:.65;pointer-events:none}
  @media(max-width:650px){
    .admin-carousel-form-grid{grid-template-columns:1fr}
    .admin-carousel-form-grid .full{grid-column:auto}
    .admin-carousel-summary{grid-template-columns:auto 76px minmax(0,1fr) auto;gap:.55rem}
    .admin-carousel-thumb{width:76px}
    .admin-carousel-summary .admin-carousel-status{display:none}
  }
/* ---- admin-link-library-styles ---- */
  .admin-link-library{display:flex;flex-direction:column;gap:1rem}
  .admin-link-library-search{position:sticky;top:0;z-index:2;padding:.7rem 0;background:var(--bg)}
  .admin-link-library-search .field-wrap{position:relative}
  .admin-link-library-search input{width:100%;padding:.82rem 2.7rem .82rem 2.7rem;border:1px solid var(--border);border-radius:14px;background:var(--input-bg);color:var(--text);font:inherit}
  .admin-link-library-search i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}
  .admin-link-library-count{font-size:.72rem;color:var(--text-muted)}
  .admin-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.85rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--border)}
  .admin-link-row:last-child{border-bottom:0}
  .admin-link-copy{min-width:0}
  .admin-link-copy strong{display:block;font-size:.9rem}
  .admin-link-copy small{display:block;color:var(--text-muted);font-size:.68rem;line-height:1.35;margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-link-url{margin-top:.45rem;padding:.48rem .6rem;border-radius:9px;background:color-mix(in srgb,var(--text) 5%,transparent);font-size:.64rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .admin-link-copy-btn{min-width:82px;white-space:nowrap}
  .admin-link-empty{text-align:center;padding:2rem 1rem;color:var(--text-muted)}
  @media(max-width:560px){.admin-link-row{grid-template-columns:1fr}.admin-link-copy-btn{width:100%}.admin-link-url{white-space:normal;overflow-wrap:anywhere}}
/* ---- levromart-user-fixes-2026-09-10-v2 ---- */
/* KENNIS REQUESTED FIXES, V2. Kept inside <head> so these rules are parsed. */
body > .container#app{flex:0 0 auto !important;min-height:0 !important;margin-bottom:0 !important;padding-bottom:1.25rem !important;}
body > footer.site-footer{flex:0 0 auto !important;margin-top:0 !important;padding-top:.8rem !important;padding-bottom:.8rem !important;}
@media(max-width:720px){body > .container#app{padding-bottom:1.5rem !important;}}
#app .request-equipment-page{padding-bottom:1rem !important;}

/* Browse Everything → Packages: one wide card, no dead right-hand column. */
#app #productGrid:has(> .package-listing-card),#app #productGrid:has(> .card.package-listing-card){display:grid !important;grid-template-columns:minmax(0,1fr) !important;width:100% !important;gap:.75rem !important;align-items:start !important;}
#app #productGrid > .package-listing-card,#app #productGrid > .card.package-listing-card{width:100% !important;max-width:none !important;min-width:0 !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:.8rem !important;}
#app #productGrid > .package-listing-card .package-gallery,#app #productGrid > .card.package-listing-card .package-gallery{width:100% !important;height:clamp(220px,48vw,360px) !important;min-height:220px !important;overflow:hidden !important;border-radius:14px !important;}
#app #productGrid > .package-listing-card .package-photo-main,#app #productGrid > .card.package-listing-card .package-photo-main,#app #productGrid > .package-listing-card .package-gallery-placeholder,#app #productGrid > .card.package-listing-card .package-gallery-placeholder{width:100% !important;height:100% !important;min-height:0 !important;object-fit:cover !important;}
#app #productGrid > .package-listing-card .package-card-title-row{margin:.55rem 0 .2rem !important;}
#app #productGrid > .package-listing-card .package-card-description,#app #productGrid > .package-listing-card .package-card-includes,#app #productGrid > .package-listing-card .package-card-vendor,#app #productGrid > .package-listing-card .package-card-delivery{margin:.22rem 0 !important;line-height:1.3 !important;}

/* Admin People: both vertical and horizontal touch scrolling. */
#app .admin-people-table-wrap{overflow-x:auto !important;overflow-y:auto !important;max-height:min(62vh,520px) !important;height:auto !important;-webkit-overflow-scrolling:touch !important;touch-action:pan-x pan-y !important;overscroll-behavior:contain !important;}

/* Login mark: subtle green halo so the white centre is visible on light backgrounds. */
#loginModal .login-modal-logo{background:radial-gradient(circle,rgba(16,185,129,.16) 0 38%,rgba(16,185,129,0) 70%) !important;border-radius:50% !important;padding:.15rem !important;filter:drop-shadow(0 0 5px rgba(16,185,129,.34)) drop-shadow(0 0 14px rgba(16,185,129,.18)) !important;}

/* Get-the-app / brand spinner arcs are white. */
.brand-spinner-arc-1,.brand-spinner-arc-2{stroke:#fff !important;}

/* Post Request must remain tappable above the fixed mobile navigation. */
#app #postEquipmentRequestBtn{position:relative !important;z-index:20 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:46px !important;cursor:pointer !important;pointer-events:auto !important;touch-action:manipulation !important;}
#app #postEquipmentRequestBtn:disabled{pointer-events:none !important;}

/* Vendor type tabs + compact expandable filter control. */
#app .vendor-listing-tabs{display:flex !important;overflow-x:auto !important;overflow-y:hidden !important;flex-wrap:nowrap !important;scrollbar-width:none !important;}
#app .vendor-listing-tabs::-webkit-scrollbar{display:none !important;}
#app .vendors-directory-toolbar{display:flex !important;align-items:center !important;gap:.55rem !important;}
#app .vendors-directory-toolbar input{flex:1 1 auto !important;min-width:0 !important;}
#app .vendors-filters-toggle{flex:0 0 auto !important;}
#app .vendors-filters-panel.hidden{display:none !important;}
#app .vendors-filters-panel:not(.hidden){display:block !important;}
#app .vendors-filter-grid{display:grid !important;gap:.6rem !important;}
@media(min-width:721px){#app .vendors-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}

/* Vendor offer message box: deliberately larger. */
#app .vendor-offer-fields textarea,#app textarea[id^="offerMsg-"]{min-height:130px !important;height:130px !important;resize:vertical !important;line-height:1.45 !important;}
#app .vendor-interest-row{display:flex !important;gap:.5rem !important;flex-wrap:wrap !important;}
#app .vendor-interest-btn,#app .vendor-not-interest-btn{min-height:42px !important;}

/* Do not let a final app child create a bottom margin gap before the footer. */
#app > *:last-child{margin-bottom:0 !important;}
/* ---- levromart-request-vendor-admin-final-pass-20260910 ---- */
/* Vendor bottom navigation: exactly three controls on each side of +. */
@media (max-width:720px){
  #bottomNav.has-add{display:grid !important;grid-template-columns:minmax(0,1fr) 4.1rem minmax(0,1fr) !important;align-items:center !important;gap:.1rem !important;padding:.42rem .28rem calc(.42rem + env(safe-area-inset-bottom,0px)) !important;}
  #bottomNav.has-add .bn-group{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:.05rem !important;min-width:0 !important;}
  #bottomNav.has-add .bottom-nav-item{min-width:0 !important;width:100% !important;padding:.38rem .08rem !important;}
  #bottomNav.has-add .bottom-nav-item > span:last-child{font-size:.64rem !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  #bottomNav.has-add .bn-icon{font-size:1.02rem !important;}
  #bottomNav.has-add .bottom-nav-add{width:3.5rem !important;height:3.5rem !important;justify-self:center !important;align-self:center !important;}
}
/* Request tabs: accent-colored pills, centered, with breathing room from the card. */
#app .vendor-request-tabs{display:flex !important;justify-content:center !important;align-items:center !important;gap:.55rem !important;overflow:visible !important;border:0 !important;margin:1rem auto 1.15rem !important;padding:.28rem !important;max-width:max-content !important;background:color-mix(in srgb,var(--primary) 7%,var(--card)) !important;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)) !important;border-radius:999px !important;box-shadow:var(--shadow) !important;}
#app .vendor-request-tab{border:0 !important;border-radius:999px !important;background:transparent !important;color:var(--text-muted) !important;padding:.62rem .95rem !important;min-height:2.5rem !important;}
#app .vendor-request-tab.active{background:var(--primary) !important;color:#fff !important;box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 22%,transparent) !important;}
#app .vendor-request-tab span{background:rgba(255,255,255,.22) !important;color:inherit !important;}
#app .vendor-offer-compose{margin-top:.75rem !important;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)) !important;border-radius:16px !important;padding:.8rem !important;background:color-mix(in srgb,var(--primary) 3%,var(--card)) !important;}
#app .vendor-offer-compose-title{display:flex !important;align-items:center !important;gap:.45rem !important;margin:0 0 .65rem !important;flex-wrap:wrap !important;color:var(--text) !important;}
#app .vendor-offer-compose-title i{color:var(--primary) !important;}
#app .vendor-offer-compose-title span{width:100% !important;font-size:.72rem !important;line-height:1.35 !important;}
#app .vendor-offer-actions{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:.45rem !important;margin-top:.55rem !important;}
#app .vendor-offer-actions .vendor-send-offer-btn{margin-top:0 !important;}
#app .vendor-offer-compose.hidden{display:none !important;}
/* Vendor directory: type tabs + one clean filter dropdown. */
#app .vendor-listing-tabs{display:flex !important;justify-content:center !important;gap:.45rem !important;flex-wrap:wrap !important;margin:.85rem auto 1rem !important;padding:.3rem !important;max-width:max-content !important;background:color-mix(in srgb,var(--primary) 6%,var(--card)) !important;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)) !important;border-radius:999px !important;box-shadow:var(--shadow) !important;}
#app .vendor-listing-tab{border:0 !important;border-radius:999px !important;background:transparent !important;color:var(--text-muted) !important;padding:.58rem .9rem !important;font-weight:700 !important;cursor:pointer !important;}
#app .vendor-listing-tab.active{background:var(--primary) !important;color:#fff !important;}
#app .vendors-directory-toolbar{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:.65rem !important;align-items:center !important;}
#app .vendors-filters-toggle.active{background:var(--primary) !important;color:#fff !important;border-color:var(--primary) !important;}
#app .vendors-filters-panel{margin:.65rem 0 1rem !important;padding:.8rem !important;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border)) !important;border-radius:16px !important;background:color-mix(in srgb,var(--primary) 3%,var(--card)) !important;box-shadow:var(--shadow) !important;}
/* Admin People: two-axis table scrolling and a touch-safe tab rail. */
#app .admin-people-toolbar{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:.75rem !important;flex-wrap:wrap !important;margin:0 auto 1rem !important;max-width:920px !important;}
#app .admin-people-role-tabs{display:flex !important;gap:.25rem !important;padding:.28rem !important;background:var(--card) !important;border:1px solid var(--border) !important;border-radius:999px !important;box-shadow:var(--shadow) !important;}
#app .admin-people-role-tab{display:inline-flex !important;align-items:center !important;gap:.4rem !important;border:0 !important;background:transparent !important;color:var(--text-muted) !important;padding:.55rem .78rem !important;border-radius:999px !important;font:inherit !important;font-size:.78rem !important;font-weight:700 !important;white-space:nowrap !important;cursor:pointer !important;}
#app .admin-people-role-tab.active{background:var(--primary) !important;color:#fff !important;}
#app .admin-people-role-tab strong{font-size:.68rem !important;min-width:1.25rem !important;height:1.25rem !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important;background:color-mix(in srgb,var(--primary) 12%,transparent) !important;color:var(--primary) !important;}
#app .admin-people-role-tab.active strong{background:rgba(255,255,255,.22) !important;color:#fff !important;}
#app .admin-people-export-actions{display:flex !important;gap:.45rem !important;}
#app .admin-people-controls{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:.65rem !important;max-width:920px !important;margin:0 auto 1rem !important;}
#app .admin-people-search-wrap{position:relative !important;min-width:0 !important;}
#app .admin-people-search-wrap > i{position:absolute !important;left:.95rem !important;top:50% !important;transform:translateY(-50%) !important;color:var(--text-muted) !important;pointer-events:none !important;}
#app .admin-people-search-wrap input{width:100% !important;margin:0 !important;padding-left:2.7rem !important;}
#app .admin-people-sort{display:flex !important;align-items:center !important;gap:.4rem !important;padding:.15rem .2rem .15rem .7rem !important;border:1px solid var(--border) !important;border-radius:14px !important;background:var(--card) !important;color:var(--text-muted) !important;font-size:.76rem !important;font-weight:700 !important;}
#app .admin-people-sort select{margin:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;width:auto !important;min-width:4.7rem !important;padding:.6rem .5rem !important;color:var(--text) !important;font:inherit !important;}
#app .admin-people-table-wrap{width:100% !important;max-width:920px !important;max-height:min(58vh,34rem) !important;margin:0 auto !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;touch-action:pan-x pan-y !important;border-radius:16px !important;}
#app .admin-people-table{width:max-content !important;min-width:760px !important;table-layout:auto !important;}
#app .admin-people-table th{position:sticky !important;top:0 !important;z-index:3 !important;background:var(--card) !important;}
#app .admin-people-table td,#app .admin-people-table th{white-space:nowrap !important;}
#app .admin-people-hint{max-width:920px !important;margin:.55rem auto 0 !important;font-size:.72rem !important;text-align:center !important;}
#app .dash-tabs{width:100% !important;max-width:100% !important;overflow-x:auto !important;overflow-y:hidden !important;touch-action:pan-x !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior-x:contain !important;scrollbar-width:none !important;padding-inline:.45rem !important;scroll-padding-inline:.45rem !important;}
#app .dash-tabs::-webkit-scrollbar{display:none !important;}
#app .dash-tab{flex-shrink:0 !important;min-width:3.9rem !important;}
@media(max-width:720px){
  #app .vendor-request-tabs{width:calc(100vw - 2rem) !important;max-width:calc(100vw - 2rem) !important;overflow-x:auto !important;justify-content:center !important;margin-left:auto !important;margin-right:auto !important;}
  #app .vendor-request-tabs .vendor-request-tab{flex:0 0 auto !important;}
  #app .vendor-listing-tabs{max-width:100% !important;}
  #app .vendors-directory-toolbar{grid-template-columns:1fr !important;}
  #app .admin-people-toolbar{align-items:stretch !important;}
  #app .admin-people-role-tabs,#app .admin-people-export-actions{width:100% !important;}
  #app .admin-people-role-tab{flex:1 1 0 !important;justify-content:center !important;}
  #app .admin-people-export-actions .btn{flex:1 1 0 !important;justify-content:center !important;}
  #app .admin-people-controls{grid-template-columns:1fr !important;}
  #app .admin-people-sort{justify-content:space-between !important;}
}
/* ---- levromart-user-final-20260910-precision-pass ---- */
/* Admin navigation: keep Vendors + People visible and make the entire rail usable on narrow screens. */
#app .admin-dash-tabs{
  display:block !important;position:relative !important;box-sizing:border-box !important;
  width:100% !important;max-width:100% !important;min-width:0 !important;
  overflow-x:auto !important;overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;scrollbar-width:none !important;
  white-space:nowrap !important;text-align:left !important;
  padding:.2rem .25rem .55rem !important;scroll-padding-inline:.5rem !important;
  touch-action:pan-x !important;overscroll-behavior-x:auto !important;
  overscroll-behavior-y:none !important;pointer-events:auto !important;
}
#app .admin-dash-tabs::-webkit-scrollbar{display:none !important;}
#app .admin-dash-tabs .dash-tab{display:inline-flex !important;vertical-align:middle !important;flex:0 0 auto !important;width:max-content !important;min-width:4.7rem !important;white-space:nowrap !important;margin-right:.35rem !important;}
#app .admin-dash-tabs .dash-tab:last-child{margin-right:1.5rem !important;}

/* My Requests: use the whole card deliberately instead of leaving a large empty right side. */
#app .vendor-my-request-card{padding:1rem !important;}
#app .vendor-my-request-layout{display:grid !important;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) minmax(7rem,.65fr) !important;align-items:center !important;gap:1rem !important;width:100% !important;}
#app .vendor-my-request-identity{display:flex !important;align-items:center !important;gap:.7rem !important;min-width:0 !important;}
#app .vendor-my-request-title{display:flex !important;flex-direction:column !important;gap:.18rem !important;min-width:0 !important;}
#app .vendor-my-request-title strong{font-size:1rem !important;line-height:1.25 !important;overflow-wrap:anywhere !important;}
#app .vendor-my-request-title .muted{font-size:.78rem !important;}
#app .vendor-my-request-details{display:flex !important;align-items:center !important;gap:.5rem !important;flex-wrap:wrap !important;min-width:0 !important;}
#app .vendor-my-request-details p{width:100% !important;margin:.15rem 0 0 !important;line-height:1.35 !important;overflow-wrap:anywhere !important;}
#app .vendor-my-request-actions{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:.45rem !important;flex-wrap:wrap !important;}
@media(max-width:720px){
  #app .vendor-my-request-layout{grid-template-columns:minmax(0,1fr) auto !important;gap:.75rem !important;}
  #app .vendor-my-request-identity{grid-column:1 / 2 !important;}
  #app .vendor-my-request-details{grid-column:1 / -1 !important;padding-left:3.7rem !important;margin-top:-.2rem !important;}
  #app .vendor-my-request-actions{grid-column:2 / 3 !important;grid-row:1 / 2 !important;align-self:start !important;}
}
/* ---- levromart-20260910-people-request-polish-v3 ---- */
/* ======================================================================
   PEOPLE, let the page own vertical scrolling; keep only horizontal
   scrolling inside the wide table. This avoids iOS nested-scroll trapping.
   ====================================================================== */
#app .admin-people-table-xscroll{
  width:100% !important;
  max-width:920px !important;
  margin:0 auto 1rem !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  touch-action:pan-x pan-y !important;
  scrollbar-width:thin !important;
  border-radius:16px !important;
}
#app .admin-people-table-xscroll::-webkit-scrollbar{height:8px !important;}
#app .admin-people-table-xscroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 24%,transparent);border-radius:99px;}
#app .admin-people-table-xscroll .admin-people-table{
  width:max-content !important;
  min-width:760px !important;
  max-width:none !important;
  table-layout:auto !important;
}
#app .admin-people-table-xscroll .admin-people-table th{position:sticky !important;top:0 !important;z-index:3 !important;background:var(--card) !important;}

/* ======================================================================
   REQUESTS, centered, balanced request cards and clean action spacing.
   ====================================================================== */
#app .vendor-requests-heading-row{
  margin-bottom:1.2rem !important;
  gap:1rem !important;
}
#app .vendor-requests-heading-row > div:first-child{
  min-width:0 !important;
}
#app .vendor-requests-heading-row > .btn{
  margin-top:.25rem !important;
}
#app .vendor-request-tabs{
  margin:1rem auto 1.25rem !important;
  justify-content:center !important;
  align-self:center !important;
}
#app .vendor-request-card{
  width:100% !important;
  max-width:720px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:1.15rem !important;
  text-align:center !important;
}
#app .vendor-request-card-head{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  gap:.7rem !important;
  text-align:center !important;
}
#app .vendor-request-person{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
  gap:.5rem !important;
}
#app .vendor-request-person > div{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#app .vendor-request-person .avatar-circle{
  width:3.35rem !important;
  height:3.35rem !important;
}
#app .vendor-request-title{
  text-align:center !important;
  font-size:1.05rem !important;
  line-height:1.25 !important;
}
#app .vendor-request-description{
  width:100% !important;
  max-width:560px !important;
  margin:.8rem auto .25rem !important;
  text-align:center !important;
}
#app .vendor-request-meta{
  width:100% !important;
  margin:.25rem auto 0 !important;
  text-align:center !important;
  min-height:1.05rem !important;
}
#app .vendor-request-card > .badge{
  align-self:center !important;
}
#app .vendor-request-card .vendor-interest-row{
  width:100% !important;
  justify-content:center !important;
  align-items:center !important;
  margin:1rem auto .35rem !important;
  gap:.75rem !important;
}
#app .vendor-request-card .vendor-interest-row .btn{
  flex:0 1 220px !important;
  min-width:180px !important;
  min-height:48px !important;
  justify-content:center !important;
}
#app .vendor-request-card .vendor-offer-compose{
  width:100% !important;
  max-width:620px !important;
  margin:.8rem auto 0 !important;
  text-align:left !important;
}
#app .vendor-request-card .vendor-offer-actions{
  justify-content:center !important;
}

/* My request cards get the same balanced visual hierarchy. */
#app .vendor-my-request-card{
  width:100% !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:1.1rem !important;
}
#app .vendor-my-request-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto !important;
  gap:1rem !important;
  align-items:center !important;
}
#app .vendor-my-request-identity{
  justify-content:center !important;
  text-align:center !important;
}
#app .vendor-my-request-title{
  text-align:center !important;
}
#app .vendor-my-request-title span{
  text-align:center !important;
}
#app .vendor-my-request-details{
  text-align:center !important;
}
#app .vendor-my-request-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45rem !important;
}
#app .vendor-my-offers{
  text-align:left !important;
}
@media(max-width:720px){
  #app .admin-people-table-xscroll{max-width:100% !important;}
  #app .vendor-requests-heading-row{gap:1rem !important;}
  #app .vendor-requests-heading-row > .btn{
    width:min(100%,280px) !important;
    align-self:center !important;
    margin-top:.2rem !important;
  }
  #app .vendor-my-request-layout{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    gap:.7rem !important;
  }
  #app .vendor-my-request-identity,
  #app .vendor-my-request-details,
  #app .vendor-my-request-actions{
    width:100% !important;
  }
}
@media(max-width:480px){
  #app .vendor-request-card{padding:1rem .8rem !important;}
  #app .vendor-request-card .vendor-interest-row{
    flex-direction:column !important;
  }
  #app .vendor-request-card .vendor-interest-row .btn{
    width:min(100%,300px) !important;
    min-width:0 !important;
  }
}
/* ---- levromart-20260910-final-ux-pass ---- */
/* Bottom navigation: remove the duplicated iOS safe-area padding that was creating a large empty band inside the glass bar. */
@media (max-width:720px){
  body{padding-bottom:calc(4.85rem + env(safe-area-inset-bottom,0px)) !important;}
  #bottomNav{
    bottom:calc(.65rem + env(safe-area-inset-bottom,0px)) !important;
    min-height:0 !important;
    height:68px !important;
    padding:.22rem .22rem !important;
    box-sizing:border-box !important;
    align-items:center !important;
  }
  #bottomNav.has-add{
    height:68px !important;
    padding:.22rem .22rem !important;
  }
  #bottomNav.has-add .bottom-nav-item{min-height:0 !important;height:54px !important;padding:.28rem .06rem !important;}
  #bottomNav.has-add .bottom-nav-add{width:52px !important;height:52px !important;top:-.72rem !important;}
  #bottomNav .bn-icon{line-height:1 !important;}
}

/* Messages inbox: a WhatsApp-like conversation surface rather than one giant card. */
#app .messages-inbox-heading{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:.6rem !important;margin:0 0 .8rem !important;
}
#app .messages-inbox-title{display:flex !important;align-items:center !important;gap:.4rem !important;min-width:0 !important;}
#app .messages-inbox-title h2{margin:0 !important;display:flex !important;align-items:center !important;gap:.35rem !important;}
#app .messages-inbox-back,#app .messages-inbox-more{
  width:2.55rem !important;height:2.55rem !important;flex:0 0 2.55rem !important;border:0 !important;border-radius:50% !important;
  background:color-mix(in srgb,var(--primary) 7%,var(--card)) !important;color:var(--text) !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;font:inherit !important;
}
#app .messages-inbox-back:hover,#app .messages-inbox-more:hover{color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 12%,var(--card)) !important;}
#app .messages-search{display:block !important;width:100% !important;max-width:none !important;margin:.2rem 0 .75rem !important;}
#app .messages-conversation-list{
  width:100% !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;
  overflow:visible !important;box-shadow:none !important;
}
#app .messages-conversation-list .conv-list-item{
  min-height:4.6rem !important;padding:.72rem .15rem !important;background:transparent !important;
  border-bottom:1px solid var(--border) !important;border-radius:0 !important;box-shadow:none !important;
}
/* Each row is wrapped in its own single-child .conv-row-wrap, so
   .conv-list-item:last-child matched every row (each is trivially the
   only/last child of its own wrapper) and silently removed the divider
   from the entire list instead of just the actual last conversation. */
#app .messages-conversation-list > .conv-row-wrap:last-child .conv-list-item{border-bottom:0 !important;}
#app .messages-conversation-list .conv-list-item:hover{background:color-mix(in srgb,var(--primary) 4%,transparent) !important;}
#app .messages-conversation-list .conv-list-item .avatar-circle{width:3.25rem !important;height:3.25rem !important;}
#app .messages-conversation-list .conv-list-item .conv-meta{min-width:0 !important;}
#app .messages-conversation-list .conv-list-item .conv-name,
#app .messages-conversation-list .conv-list-item strong{font-size:.92rem !important;}
#app .messages-conversation-list .conv-list-item .conv-preview{font-size:.8rem !important;margin-top:.12rem !important;}

/* Swipe-to-reveal was tried here and reverted -- back to the plain
   always-visible Pin/Archive/Add-to-list icon buttons. Only the small,
   independent additions from that attempt are kept: the last-message
   timestamp next to the name, and a small pinned-chat icon. */
#app .messages-conversation-list .conv-name-row{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:.5rem !important;
}
#app .messages-conversation-list .conv-name-row strong{
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;min-width:0 !important;
}
#app .messages-conversation-list .conv-time{
  flex:0 0 auto !important;font-size:.72rem !important;color:var(--text-muted) !important;font-weight:400 !important;
}
#app .messages-conversation-list .conv-pinned-icon{font-size:.72rem !important;color:var(--text-muted) !important;margin-right:.15rem !important;}

/* Compact request stack: same centered hierarchy, less vertical weight. */
#app .vendor-request-card{
  max-width:620px !important;padding:.9rem !important;margin-bottom:.7rem !important;
}
#app .vendor-request-card-head{gap:.45rem !important;}
#app .vendor-request-person .avatar-circle{width:3rem !important;height:3rem !important;}
#app .vendor-request-description{margin:.55rem auto .15rem !important;line-height:1.3 !important;}
#app .vendor-request-meta{margin:.15rem auto 0 !important;min-height:0 !important;}
#app .vendor-request-card .vendor-interest-row{margin:.75rem auto .15rem !important;gap:.55rem !important;}
#app .vendor-request-card .vendor-interest-row .btn{
  min-width:132px !important;min-height:40px !important;height:40px !important;padding:.48rem .85rem !important;font-size:.78rem !important;border-radius:11px !important;
}
#app .vendor-more-requests{max-width:620px !important;margin:.25rem auto .8rem !important;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border)) !important;border-radius:15px !important;background:color-mix(in srgb,var(--primary) 3%,var(--card)) !important;overflow:hidden !important;}
#app .vendor-more-requests summary{list-style:none !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:.65rem !important;padding:.72rem .9rem !important;color:var(--primary) !important;font-weight:750 !important;font-size:.78rem !important;}
#app .vendor-more-requests summary::-webkit-details-marker{display:none !important;}
#app .vendor-more-requests summary small{color:var(--text-muted) !important;font-weight:650 !important;}
#app .vendor-more-requests[open] summary i{transform:rotate(180deg) !important;}
#app .vendor-more-requests-body{padding:.55rem .45rem .1rem !important;border-top:1px solid color-mix(in srgb,var(--primary) 12%,var(--border)) !important;}
#app .vendor-more-requests-body .vendor-request-card{margin-bottom:.7rem !important;}
@media(max-width:480px){
  #app .vendor-request-card{max-width:100% !important;padding:.8rem !important;}
  #app .vendor-request-card .vendor-interest-row .btn{min-width:126px !important;height:40px !important;}
}
/* ---- levromart-20260910-request-message-final-polish ---- */
/* Messages inbox: one heading only, with the back arrow directly beside it. */
#app .messages-toolbar{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:.65rem !important;margin:0 0 .7rem !important;}
#app .messages-toolbar-title{display:flex !important;align-items:center !important;gap:.5rem !important;min-width:0 !important;}
#app .messages-toolbar-title h2{margin:0 !important;display:flex !important;align-items:center !important;gap:.3rem !important;}
#app .messages-toolbar-title .messages-inbox-back{width:2.45rem !important;height:2.45rem !important;flex:0 0 2.45rem !important;border:0 !important;border-radius:50% !important;background:color-mix(in srgb,var(--primary) 8%,var(--card)) !important;color:var(--text) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;font:inherit !important;}
#app .messages-toolbar-title .messages-inbox-back:hover{color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 14%,var(--card)) !important;}

/* Requests: compact card without losing the centered visual hierarchy. */
#app .vendor-request-card{max-width:560px !important;padding:.72rem .78rem !important;margin-bottom:.62rem !important;}
#app .vendor-request-card-head{gap:.35rem !important;}
#app .vendor-request-person{gap:.38rem !important;}
#app .vendor-request-person .avatar-circle{width:2.6rem !important;height:2.6rem !important;}
#app .vendor-request-title{font-size:1rem !important;line-height:1.15 !important;}
#app .vendor-request-person p{margin:.08rem 0 0 !important;font-size:.74rem !important;line-height:1.1 !important;}
#app .vendor-request-card > .badge{margin-top:.02rem !important;padding:.28rem .62rem !important;font-size:.72rem !important;}
#app .vendor-request-description{max-width:500px !important;margin:.38rem auto .08rem !important;font-size:.78rem !important;line-height:1.25 !important;}
#app .vendor-request-meta{font-size:.78rem !important;line-height:1.15 !important;margin:.08rem auto 0 !important;}
#app .vendor-request-card .vendor-interest-row{margin:.58rem auto .08rem !important;gap:.52rem !important;}
#app .vendor-request-card .vendor-interest-row .btn{min-width:128px !important;min-height:38px !important;height:38px !important;padding:.46rem .78rem !important;font-size:.76rem !important;border-radius:10px !important;}

/* Post request: compact, centered button with breathing room below the heading/info row. */
#app .vendor-requests-heading-row{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:.75rem !important;margin-bottom:1.15rem !important;}
#app .vendor-requests-heading-row > div:first-child{width:100% !important;text-align:left !important;}
#app .vendor-requests-heading-row > .btn{width:auto !important;min-width:170px !important;align-self:center !important;margin-top:.05rem !important;}
/* ---- levromart-20260910-request-card-compact-final ---- */
/* ONLY: compact customer-request cards. Horizontal on mobile/desktop, with a
   single visible preview and the remaining requests behind the dropdown. */
#app .vendor-request-card{
  width:100% !important;
  max-width:760px !important;
  margin:.55rem auto !important;
  padding:.72rem .85rem !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "person description badge"
    "person meta badge"
    "actions actions actions" !important;
  align-items:center !important;
  column-gap:.8rem !important;
  row-gap:.12rem !important;
  min-height:0 !important;
}
#app .vendor-request-card .vendor-request-card-head{display:contents !important;}
#app .vendor-request-card .vendor-request-person{
  grid-area:person !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.5rem !important;
  min-width:0 !important;
  text-align:left !important;
}
#app .vendor-request-card .vendor-request-person .avatar-circle{
  width:2.75rem !important;height:2.75rem !important;min-width:2.75rem !important;
}
#app .vendor-request-card .vendor-request-person > div{min-width:0 !important;}
#app .vendor-request-card .vendor-request-title{
  display:block !important;max-width:18rem !important;font-size:.92rem !important;line-height:1.15 !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
#app .vendor-request-card .vendor-request-person p{
  margin:.1rem 0 0 !important;font-size:.7rem !important;line-height:1.1 !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
#app .vendor-request-card > .badge{
  grid-area:badge !important;align-self:center !important;justify-self:end !important;
  margin:0 !important;padding:.28rem .55rem !important;font-size:.7rem !important;
}
#app .vendor-request-card .vendor-request-description{
  grid-area:description !important;width:100% !important;max-width:none !important;
  margin:0 !important;text-align:left !important;font-size:.76rem !important;line-height:1.2 !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;
}
#app .vendor-request-card .vendor-request-meta{
  grid-area:meta !important;width:100% !important;margin:0 !important;text-align:left !important;
  font-size:.7rem !important;line-height:1.15 !important;min-height:0 !important;
}
#app .vendor-request-card .vendor-interest-row{
  grid-area:actions !important;width:100% !important;margin:.48rem 0 0 !important;
  display:flex !important;flex-direction:row !important;justify-content:center !important;align-items:center !important;
  gap:.55rem !important;
}
#app .vendor-request-card .vendor-interest-row .btn{
  flex:0 0 auto !important;width:auto !important;min-width:128px !important;
  min-height:38px !important;height:38px !important;padding:.45rem .8rem !important;
  font-size:.75rem !important;border-radius:10px !important;
}
#app .vendor-request-card .vendor-offer-compose,
#app .vendor-request-card .vendor-offer-status{grid-column:1 / -1 !important;width:100% !important;}
#app .vendor-more-requests{
  width:100% !important;max-width:760px !important;margin:.35rem auto .75rem !important;
}
@media(max-width:560px){
  #app .vendor-request-card{
    max-width:100% !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    column-gap:.65rem !important;
    padding:.68rem .72rem !important;
  }
  #app .vendor-request-card .vendor-request-title{max-width:13rem !important;}
  #app .vendor-request-card .vendor-interest-row{gap:.45rem !important;}
  #app .vendor-request-card .vendor-interest-row .btn{min-width:124px !important;height:37px !important;min-height:37px !important;padding:.42rem .68rem !important;font-size:.73rem !important;}
}
/* ---- levromart-20260910-latest-precision-ui ---- */
/* ONLY: final request-card sizing, bottom-nav density/white icon treatment,
   and protected-route auth readiness. */

/* Request card: compact horizontal presentation. */
#app .vendor-request-card{
  width:100% !important; max-width:680px !important;
  margin:.42rem auto !important; padding:.55rem .7rem !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "person description badge"
    "person meta badge"
    "actions actions actions" !important;
  column-gap:.65rem !important; row-gap:.04rem !important;
  align-items:center !important;
}
#app .vendor-request-card .vendor-request-card-head{display:contents !important;}
#app .vendor-request-card .vendor-request-person{
  grid-area:person !important; display:flex !important; align-items:center !important;
  gap:.42rem !important; min-width:0 !important;
}
#app .vendor-request-card .vendor-request-person .avatar-circle{
  width:2.45rem !important; height:2.45rem !important;
  min-width:2.45rem !important; min-height:2.45rem !important;
}
#app .vendor-request-card .vendor-request-title{
  font-size:.84rem !important; line-height:1.08 !important;
  max-width:13rem !important; white-space:nowrap !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
#app .vendor-request-card .vendor-request-person p{
  margin:.06rem 0 0 !important; font-size:.64rem !important;
  line-height:1.05 !important; white-space:nowrap !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
#app .vendor-request-card > .badge{
  grid-area:badge !important; justify-self:end !important; align-self:center !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:auto !important; min-width:2.35rem !important; max-width:max-content !important;
  height:1.65rem !important; padding:.16rem .42rem !important;
  margin:0 !important; border-radius:.48rem !important;
  font-size:.64rem !important; line-height:1 !important; white-space:nowrap !important;
}
#app .vendor-request-card .vendor-request-description{
  grid-area:description !important; margin:0 !important;
  font-size:.67rem !important; line-height:1.08 !important;
  max-width:none !important; white-space:nowrap !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
}
#app .vendor-request-card .vendor-request-meta{
  grid-area:meta !important; margin:0 !important;
  font-size:.62rem !important; line-height:1.05 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#app .vendor-request-card .vendor-interest-row{
  grid-area:actions !important; width:100% !important;
  display:flex !important; justify-content:center !important; align-items:center !important;
  gap:.45rem !important; margin:.38rem 0 0 !important;
}
#app .vendor-request-card .vendor-interest-row .btn{
  flex:0 0 auto !important; width:auto !important; min-width:0 !important;
  height:34px !important; min-height:34px !important;
  padding:.38rem .72rem !important; border-radius:9px !important;
  font-size:.68rem !important; line-height:1 !important;
  white-space:nowrap !important; justify-content:center !important;
}
#app .vendor-request-card .vendor-offer-status{
  grid-column:1 / -1 !important; margin:.35rem 0 0 !important;
  font-size:.65rem !important; line-height:1.1 !important; text-align:center !important;
}
#app .vendor-more-requests{
  width:100% !important; max-width:680px !important; margin:.35rem auto .65rem !important;
  border-radius:12px !important; overflow:hidden !important;
}
#app .vendor-more-requests summary{
  list-style:none !important; cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:.5rem !important; padding:.52rem .7rem !important;
  font-size:.68rem !important; font-weight:700 !important;
}
#app .vendor-more-requests summary::-webkit-details-marker{display:none !important;}
#app .vendor-more-requests summary small{font-size:.6rem !important; opacity:.78 !important;}
#app .vendor-more-requests[open] summary i{transform:rotate(180deg) !important;}

@media(max-width:560px){
  #app .vendor-request-card{max-width:calc(100% - .15rem) !important; padding:.5rem .58rem !important; column-gap:.48rem !important;}
  #app .vendor-request-card .vendor-request-person .avatar-circle{width:2.3rem !important;height:2.3rem !important;min-width:2.3rem !important;min-height:2.3rem !important;}
  #app .vendor-request-card .vendor-request-title{font-size:.8rem !important;max-width:9.2rem !important;}
  #app .vendor-request-card .vendor-request-person p{font-size:.61rem !important;}
  #app .vendor-request-card > .badge{height:1.55rem !important;min-width:2.15rem !important;font-size:.61rem !important;padding:.14rem .36rem !important;}
  #app .vendor-request-card .vendor-request-description{font-size:.64rem !important;}
  #app .vendor-request-card .vendor-request-meta{font-size:.59rem !important;}
  #app .vendor-request-card .vendor-interest-row{gap:.38rem !important;margin-top:.32rem !important;}
  #app .vendor-request-card .vendor-interest-row .btn{height:32px !important;min-height:32px !important;padding:.34rem .62rem !important;font-size:.65rem !important;}
}

/* Bottom nav: tighter iPhone footprint + Instagram-like white inactive icons. */
#bottomNav{
  min-height:56px !important;
  height:auto !important;
  padding:.22rem .22rem max(.22rem, env(safe-area-inset-bottom, 0px)) !important;
  border-radius:20px !important;
}
#bottomNav.has-add{
  padding:.22rem .22rem max(.22rem, env(safe-area-inset-bottom, 0px)) !important;
}
#bottomNav .bottom-nav-item{
  color:#fff !important;
  min-height:45px !important;
  height:45px !important;
  padding:.2rem .1rem !important;
}
#bottomNav .bottom-nav-item i,
#bottomNav .bottom-nav-item .bn-icon{color:#fff !important;}
#bottomNav .bottom-nav-item.active{
  color:#fff !important;
  background:color-mix(in srgb,var(--primary) 17%,transparent) !important;
  border-radius:12px !important;
}
#bottomNav .bottom-nav-item.active i,
#bottomNav .bottom-nav-item.active .bn-icon{color:#fff !important;}
#bottomNav .bottom-nav-add{
  width:50px !important; height:50px !important; top:-.62rem !important;
  border-radius:50% !important;
}
@media(max-width:720px){
  #bottomNav{left:.65rem !important;right:.65rem !important;bottom:calc(.5rem + env(safe-area-inset-bottom,0px)) !important;}
  #bottomNav .bottom-nav-item{min-height:44px !important;height:44px !important;}
  #bottomNav.has-add .bottom-nav-item>span:last-child{font-size:.6rem !important;}
}
/* ---- levromart-20260910-chat-media-editor-polish ---- */
/* WhatsApp-inspired multi-photo composer/editor. Scope is limited to the chat attachment editor. */
#chatAttachmentEditorModal .chat-attachment-editor-content{width:min(94vw,760px)!important;max-width:760px!important;padding:0!important;overflow:hidden!important;border-radius:22px!important}
#chatAttachmentEditorModal .chat-media-editor-head{display:flex!important;align-items:center!important;gap:.7rem!important;padding:.85rem 1rem .7rem!important;border-bottom:1px solid var(--border)!important}
#chatAttachmentEditorModal .chat-media-editor-head .media-editor-title{display:flex!important;align-items:center!important;gap:.55rem!important;min-width:0!important;flex:1!important}
#chatAttachmentEditorModal .chat-media-editor-head h3{margin:0!important;font-size:1rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#chatAttachmentEditorModal .chat-media-editor-close{width:36px!important;height:36px!important;border-radius:50%!important;border:0!important;background:transparent!important;color:var(--text-muted)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
#chatAttachmentEditorModal .chat-media-editor-tools{display:flex!important;align-items:center!important;justify-content:center!important;gap:.28rem!important;padding:.55rem .8rem!important;border-bottom:1px solid var(--border)!important;overflow-x:auto!important;scrollbar-width:none!important}
#chatAttachmentEditorModal .chat-media-editor-tools::-webkit-scrollbar{display:none!important}
#chatAttachmentEditorModal .chat-media-tool{width:42px!important;height:42px!important;flex:0 0 42px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--text)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:1rem!important;cursor:pointer!important}
#chatAttachmentEditorModal .chat-media-tool.active{background:color-mix(in srgb,var(--primary) 14%,var(--card))!important;color:var(--primary)!important}
#chatAttachmentEditorModal .chat-media-tool:active{transform:scale(.96)!important}
#chatAttachmentEditorModal .chat-media-editor-stage{position:relative!important;padding:.65rem .75rem .5rem!important;background:color-mix(in srgb,var(--text) 3%,var(--card))!important}
#chatAttachmentEditorModal .chat-attachment-canvas-wrap{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:240px!important;max-height:58vh!important;overflow:hidden!important;border-radius:16px!important;background:#111!important;touch-action:none!important}
#chatAttachmentEditorModal #chatAttachmentEditorCanvas{display:block!important;max-width:100%!important;max-height:58vh!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important}
#chatAttachmentEditorModal .chat-media-nav{position:absolute!important;inset:50% .55rem auto!important;transform:translateY(-50%)!important;display:flex!important;justify-content:space-between!important;pointer-events:none!important}
#chatAttachmentEditorModal .chat-media-nav button{pointer-events:auto!important;width:36px!important;height:36px!important;border:0!important;border-radius:50%!important;background:rgba(0,0,0,.48)!important;color:#fff!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
#chatAttachmentEditorModal .chat-media-count{position:absolute!important;right:.7rem!important;top:.7rem!important;padding:.3rem .55rem!important;border-radius:999px!important;background:rgba(0,0,0,.52)!important;color:#fff!important;font-size:.7rem!important;font-weight:750!important;line-height:1!important}
#chatAttachmentEditorModal .chat-media-thumbs{display:flex!important;gap:.45rem!important;overflow-x:auto!important;padding:.55rem .05rem .15rem!important;scrollbar-width:none!important;scroll-snap-type:x proximity!important}
#chatAttachmentEditorModal .chat-media-thumbs::-webkit-scrollbar{display:none!important}
#chatAttachmentEditorModal .chat-media-thumb{width:54px!important;height:54px!important;flex:0 0 54px!important;padding:0!important;border:2px solid transparent!important;border-radius:10px!important;overflow:hidden!important;background:#111!important;scroll-snap-align:center!important;cursor:pointer!important}
#chatAttachmentEditorModal .chat-media-thumb.active{border-color:var(--primary)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent)!important}
#chatAttachmentEditorModal .chat-media-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
#chatAttachmentEditorModal .chat-media-caption{display:block!important;padding:.35rem .85rem .7rem!important}
#chatAttachmentEditorModal .chat-media-caption span{display:block!important;margin:0 0 .35rem!important;font-size:.72rem!important;font-weight:750!important;color:var(--text-muted)!important}
#chatAttachmentEditorModal #chatAttachmentCaption{width:100%!important;min-height:42px!important;max-height:100px!important;resize:none!important;border-radius:12px!important;padding:.62rem .72rem!important}
#chatAttachmentEditorModal .chat-media-editor-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.7rem!important;padding:.65rem .85rem calc(.7rem + env(safe-area-inset-bottom,0px))!important;border-top:1px solid var(--border)!important}
#chatAttachmentEditorModal .chat-media-editor-footer .muted{font-size:.72rem!important;white-space:nowrap!important}
#chatAttachmentEditorModal .chat-media-editor-footer .media-editor-actions{display:flex!important;align-items:center!important;gap:.45rem!important}
@media(max-width:520px){
  #chatAttachmentEditorModal .chat-attachment-editor-content{width:100vw!important;max-width:none!important;border-radius:20px 20px 0 0!important;margin-top:auto!important}
  #chatAttachmentEditorModal .chat-attachment-canvas-wrap{min-height:210px!important;max-height:52vh!important}
  #chatAttachmentEditorModal #chatAttachmentEditorCanvas{max-height:52vh!important}
  #chatAttachmentEditorModal .chat-media-editor-tools{justify-content:flex-start!important}
  #chatAttachmentEditorModal .chat-media-editor-footer{padding-left:.72rem!important;padding-right:.72rem!important}
}
/* ---- levromart-20260910-chat-media-group-ui ---- */
/* Grouped chat photos: one WhatsApp-style media bubble instead of separate photo cards. */
.chat-media-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px!important;width:min(75vw,360px)!important;max-width:75%!important;align-self:flex-end!important;overflow:hidden!important;border-radius:16px!important;position:relative!important;background:transparent!important}
.chat-media-group.theirs{align-self:flex-start!important}
.chat-media-group .chat-media-group-item{display:block!important;width:100%!important;max-width:none!important;margin:0!important;align-items:stretch!important}
.chat-media-group .chat-media-group-item .chat-bubble{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.chat-media-group .chat-media-group-item .chat-image-attachment{display:block!important;width:100%!important;height:150px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:var(--input-bg)!important;cursor:pointer!important}
.chat-media-group .chat-media-group-item .msg-attachment-img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.chat-media-group .chat-media-group-item:nth-child(3):last-child .chat-image-attachment{height:185px!important}
.chat-media-group .chat-media-group-item:not(:last-child) .chat-bubble-text,
.chat-media-group .chat-media-group-item:not(:last-child) .chat-time{display:none!important}
.chat-media-group .chat-media-group-item:last-child .chat-bubble-text{display:block!important;margin:.35rem .45rem .05rem!important}
.chat-media-group .chat-media-group-item:last-child .chat-time{display:block!important;margin:.15rem .45rem .35rem!important}
.chat-media-group .chat-media-group-item .msg-reactions-row{display:none!important}
@media(max-width:520px){
  .chat-media-group{width:min(76vw,330px)!important;max-width:76%!important}
  .chat-media-group .chat-media-group-item .chat-image-attachment{height:120px!important}
  .chat-media-group .chat-media-group-item:nth-child(3):last-child .chat-image-attachment{height:150px!important}
}
/* ---- levromart-followup-avatar-nav-final ---- */
/* Default vendor avatars are initials only; their deterministic inline colour
   is preserved even where existing avatar sizing rules use !important. */
.avatar-fallback{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:50% !important;overflow:hidden !important;color:#fff !important;
  background:var(--avatar-bg,#64748b) !important;
  font-weight:800 !important;line-height:1 !important;text-align:center !important;
}
.avatar-fallback > span{display:block !important;line-height:1 !important;}
.vendor-map-popup-avatar-fallback{color:#fff !important;}
.product-vendor-initial.avatar-fallback{font-size:.46rem !important;}
/* ---- levromart-vendor-chat-final-20260912 ---- */
/* Vendor defaults: one circle, one solid deterministic colour, centered initials. */
.avatar-fallback{
  border:0 !important;
  outline:0 !important;
  background-image:none !important;
  box-shadow:none !important;
  border-radius:50% !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:hidden !important;
}
.avatar-fallback > span{display:block !important;position:static !important;inset:auto !important;transform:none !important;}
/* ---- levromart-final-three-adjustments-20260912 ---- */
/* Vendor listing destructive action: solid red; Edit and Pause remain unchanged. */
#app .owner-listing-management .owner-listing-actions .btn-danger{background:#dc2626 !important;border-color:#dc2626 !important;color:#fff !important;background-image:none !important;box-shadow:none !important;}
#app .owner-listing-management .owner-listing-actions .btn-danger:hover{background:#b91c1c !important;border-color:#b91c1c !important;color:#fff !important;}
/* ---- levromart-latest-refinement-gallery ---- */
.product-detail-card .product-gallery-track{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-behavior:auto !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-x pan-y pinch-zoom !important;
  overscroll-behavior-x:contain !important;
  overscroll-behavior-y:auto !important;
}
.product-detail-card .product-gallery-slide{
  flex:0 0 100% !important;
  width:100% !important;
  scroll-snap-align:center !important;
  scroll-snap-stop:always !important;
}
.product-detail-card .product-gallery-slide img{
  touch-action:pan-x pan-y pinch-zoom !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
.product-detail-card .product-gallery-thumb{
  touch-action:manipulation !important;
}
/* ---- levromart-latest-refinement-notifications ---- */
.notifications-page-shell{padding-top:.8rem !important;}
.notifications-page-heading{
  align-items:flex-start !important;
  gap:.65rem !important;
  margin-bottom:.55rem !important;
}
.notifications-page-heading h2{line-height:1.15 !important;}
.notifications-page-tools{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:.65rem !important;
  padding:.15rem 0 .45rem !important;
}
.notifications-page-tools > strong{font-size:.78rem !important;color:var(--text-muted) !important;font-weight:750 !important;}
.notifications-page-tools .notif-header-actions{display:flex !important;align-items:center !important;gap:.35rem !important;flex:0 0 auto !important;}
.notif-mark-all-compact{
  width:36px !important;height:36px !important;min-width:36px !important;
  padding:0 !important;border:1px solid var(--border) !important;
  border-radius:50% !important;background:var(--card) !important;
  color:var(--primary) !important;display:inline-flex !important;
  align-items:center !important;justify-content:center !important;
  cursor:pointer !important;box-shadow:none !important;
}
.notif-mark-all-compact:hover{background:color-mix(in srgb,var(--primary) 8%,var(--card)) !important;}
.notifications-page-host .notif-tabs{
  display:flex !important;gap:.55rem !important;overflow-x:auto !important;
  padding:.05rem 0 .65rem !important;margin:0 !important;
  scrollbar-width:none !important;
}
.notifications-page-host .notif-tabs::-webkit-scrollbar{display:none !important;}
.notifications-page-host .notif-tab{
  flex:0 0 auto !important;min-width:72px !important;
  min-height:36px !important;padding:.48rem .72rem !important;
  border-radius:10px !important;font-size:.76rem !important;
}
.notifications-page-host .notif-list-scroll{
  gap:.15rem !important;
  overflow:visible !important;
}
.notifications-page-host .notif-item-wrap{
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent) !important;
  margin:0 !important;padding:.1rem 0 !important;
}
.notifications-page-host .notif-item-wrap:last-child{border-bottom:0 !important;}
.notifications-page-host .notif-item{
  border:0 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:.72rem .5rem !important;
  min-height:60px !important;
}
.notifications-page-host .notif-item:hover{background:color-mix(in srgb,var(--primary) 5%,var(--card)) !important;}
.notifications-page-host .notif-item.unread{
  background:color-mix(in srgb,var(--primary) 8%,var(--card)) !important;
}
.notifications-page-host .notif-item.unread strong::after{
  content:"" !important;display:inline-block !important;
  width:7px !important;height:7px !important;border-radius:50% !important;
  background:var(--primary) !important;margin-left:.4rem !important;
  vertical-align:middle !important;
}
@media(max-width:720px){
  .notifications-page-shell{padding-left:.7rem !important;padding-right:.7rem !important;padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px)) !important;}
  .notifications-page-heading h2{font-size:1.28rem !important;}
  .notifications-page-heading p{font-size:.74rem !important;}
  .notifications-page-tools{padding-bottom:.35rem !important;}
}
/* ---- levromart-latest-refinement-avatar ---- */
.storefront-profile .storefront-avatar-fallback-button,
.storefront-profile .storefront-avatar-fallback-button.avatar-fallback{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.storefront-profile .storefront-avatar-fallback-button > .avatar-fallback{
  width:100% !important;height:100% !important;
  border:0 !important;box-shadow:none !important;
  background-image:none !important;
  border-radius:50% !important;
  display:grid !important;place-items:center !important;
}
.storefront-profile .storefront-avatar-fallback-button > .avatar-fallback > span{
  color:#fff !important;background:transparent !important;background-image:none !important;
  border:0 !important;box-shadow:none !important;
}
/* ---- levromart-master-refinement-20260913 ---- */
/* Notifications, smart categories, no archive/trash presentation. */
.notifications-page-shell .notif-tabs,
#notifPanel .notif-tabs{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:.28rem!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
  width:100%!important;
  margin:.25rem auto .65rem!important;
  border:0!important;
  background:transparent!important;
}
.notifications-page-shell .notif-tab,
#notifPanel .notif-tab{
  flex:0 1 auto!important;
  min-width:0!important;
  padding:.48rem .78rem!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:.78rem!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.notifications-page-shell .notif-tab.active,
#notifPanel .notif-tab.active{
  color:var(--primary)!important;
  background:color-mix(in srgb,var(--primary) 11%,transparent)!important;
}
.notifications-page-shell .notif-list-scroll,
#notifPanel .notif-list-scroll{padding:.1rem .15rem calc(5rem + env(safe-area-inset-bottom,0px))!important;}
.notifications-page-shell .notif-item-wrap,
#notifPanel .notif-item-wrap{border:0!important;margin:0!important;}
.notifications-page-shell .notif-item,
#notifPanel .notif-item{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:.7rem!important;
  border:0!important;
  border-radius:.85rem!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:.72rem .55rem!important;
  text-align:left!important;
}
.notifications-page-shell .notif-item.unread,
#notifPanel .notif-item.unread{
  background:color-mix(in srgb,var(--primary) 6%,transparent)!important;
}
.notifications-page-shell .notif-item.unread .notif-copy strong,
#notifPanel .notif-item.unread .notif-copy strong{font-weight:850!important;}
.notifications-page-shell .notif-item.unread::before,
#notifPanel .notif-item.unread::before{
  content:"";width:.42rem;height:.42rem;min-width:.42rem;border-radius:50%;
  background:var(--primary);display:block;
}
.notifications-page-shell .notif-copy{min-width:0;flex:1;}
.notifications-page-shell .notif-copy strong{font-size:.82rem!important;line-height:1.25!important;}
.notifications-page-shell .notif-copy .muted{line-height:1.35!important;}
.notifications-page-shell .notifications-page-tools{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:.7rem!important;padding:.15rem .2rem .35rem!important;
}
.notifications-page-shell .notif-header-actions{display:flex!important;align-items:center!important;gap:.35rem!important;}
.notifications-page-shell .notif-mark-all-compact{
  width:2rem!important;height:2rem!important;min-width:2rem!important;padding:0!important;
  border:0!important;border-radius:50%!important;background:color-mix(in srgb,var(--primary) 10%,transparent)!important;
  color:var(--primary)!important;display:grid!important;place-items:center!important;cursor:pointer!important;
}
.notifications-page-shell .notif-mark-all-compact:hover{background:color-mix(in srgb,var(--primary) 17%,transparent)!important;}
.notifications-page-shell .notif-select-bar{border:0!important;box-shadow:none!important;background:transparent!important;}

/* Product comments, compact interaction language. */
#app .card-comment-btn{
  width:auto!important;min-width:1.9rem!important;height:1.9rem!important;
  padding:.2rem .28rem!important;border:0!important;border-radius:50%!important;
  background:transparent!important;color:var(--muted)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:.2rem!important;font-size:.75rem!important;font-weight:750!important;
}
#app .card-comment-btn:hover{background:color-mix(in srgb,var(--primary) 9%,transparent)!important;color:var(--primary)!important;}
#app .card-comment-btn .product-comment-count{font-size:.73rem!important;line-height:1!important;}
#app .product-comments-toggle{
  width:auto!important;min-width:3.25rem!important;margin:0 auto!important;
  padding:.45rem .7rem!important;border:0!important;border-radius:999px!important;
  background:color-mix(in srgb,var(--primary) 7%,transparent)!important;
  color:var(--text)!important;display:flex!important;align-items:center!important;
  justify-content:center!important;gap:.55rem!important;
}
#app .product-comments-toggle:hover{background:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important;}
#app .product-comments-toggle > span{display:inline-flex!important;align-items:center!important;gap:.3rem!important;}
#app .product-comments-toggle strong{font-size:.78rem!important;}
#app .product-comments-toggle > i:last-child{font-size:.68rem!important;color:var(--muted)!important;transition:transform .18s ease;}
#app .product-comments-toggle[aria-expanded="true"] > i:last-child{transform:rotate(180deg);}

/* Storefront fallback avatar, true 1:1 circle, no stretching or rings. */
#app .storefront-profile .storefront-avatar,
#app .storefront-profile .storefront-avatar-button,
#app .storefront-profile .storefront-avatar-fallback-button{
  width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important;
  max-width:82px!important;max-height:82px!important;aspect-ratio:1 / 1!important;
  border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;
  padding:0!important;box-sizing:border-box!important;
}
#app .storefront-profile .storefront-avatar-fallback-button{background:transparent!important;border:0!important;box-shadow:none!important;}
#app .storefront-profile .storefront-avatar-fallback-button > .avatar-fallback{
  width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;
  aspect-ratio:1 / 1!important;border-radius:50%!important;border:0!important;box-shadow:none!important;
  display:grid!important;place-items:center!important;background-image:none!important;
}
#app .storefront-profile .storefront-avatar-fallback-button > .avatar-fallback > span{
  background:transparent!important;color:#fff!important;border:0!important;box-shadow:none!important;
}
#app .storefront-profile .storefront-avatar img,
#app .storefront-profile .storefront-avatar-button img{width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:50%!important;}
@media(max-width:620px){
  #app .storefront-profile .storefront-avatar,
  #app .storefront-profile .storefront-avatar-button,
  #app .storefront-profile .storefront-avatar-fallback-button{
    width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;max-width:74px!important;max-height:74px!important;
  }
}

/* Authentication, integrated Sign In / Create Account switch. */
#loginModal .auth-mode-tabs{
  display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:.25rem!important;padding:.22rem!important;margin:.65rem 0 .8rem!important;
  background:color-mix(in srgb,var(--primary) 6%,var(--card))!important;
  border-radius:.8rem!important;
}
#loginModal .auth-mode-tab{
  min-width:0!important;border:0!important;background:transparent!important;
  color:var(--muted)!important;border-radius:.62rem!important;padding:.58rem .5rem!important;
  font:inherit!important;font-size:.82rem!important;font-weight:800!important;cursor:pointer!important;
}
#loginModal .auth-mode-tab.active{
  background:var(--card)!important;color:var(--primary)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.08)!important;
}
#loginModal .auth-mode-tab:focus-visible{outline:2px solid var(--primary)!important;outline-offset:1px!important;}

/* Vendor directory, remove only the outer enclosure. */
#app .vendor-listing-tabs{
  border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
  border-radius:0!important;padding:.05rem 0!important;
}
#app .vendor-listing-tab{border:0!important;box-shadow:none!important;}

/* Admin navigation + compact profile badges. */
#app .admin-dash-tabs{
  border:0!important;box-shadow:none!important;
}
#app .admin-dash-tabs .dash-tab{flex:0 0 auto!important;}
#profilePanel .profile-nav-link{position:relative;}
#profilePanel .profile-disputes-badge.hidden{display:none!important;}
#profilePanel .profile-disputes-badge{
  margin-left:auto!important;min-width:1.2rem!important;height:1.2rem!important;padding:0 .28rem!important;
  border-radius:999px!important;font-size:.64rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
@media(max-width:620px){
  .notifications-page-shell .notif-tabs{gap:.1rem!important;}
  .notifications-page-shell .notif-tab{padding:.45rem .62rem!important;font-size:.74rem!important;}
  #loginModal .auth-mode-tab{font-size:.78rem!important;}
}
/* ---- levromart-master-refinement-v2 ---- */
/* Notification category chips: every activity row identifies its domain at a glance. */
.notifications-page-host .notif-item{display:grid!important;grid-template-columns:.42rem auto auto minmax(0,1fr)!important;align-items:center!important;gap:.55rem!important;}
.notifications-page-host .notif-item::before{content:""!important;width:.42rem!important;height:.42rem!important;min-width:.42rem!important;border-radius:50%!important;background:transparent!important;display:block!important;}
.notifications-page-host .notif-item.unread::before{background:var(--primary)!important;}
.notifications-page-host .notif-category-badge{display:inline-flex!important;align-items:center!important;gap:.24rem!important;max-width:7.2rem!important;padding:.22rem .42rem!important;border-radius:999px!important;background:color-mix(in srgb,var(--danger) 12%,transparent)!important;color:var(--danger)!important;font-size:.58rem!important;font-weight:850!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.notifications-page-host .notif-category-badge i{font-size:.58rem!important;flex:0 0 auto!important;}
.notifications-page-host .notif-category-badge span{overflow:hidden!important;text-overflow:ellipsis!important;}
.notifications-page-host .notif-item.unread .notif-category-badge{background:var(--danger)!important;color:#fff!important;}
.notifications-page-heading{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:.65rem!important;margin-bottom:.45rem!important;}
.notifications-page-heading-copy{min-width:0!important;}
.notifications-page-heading-copy h2{margin:0!important;line-height:1.1!important;font-size:1.18rem!important;}
.notifications-page-heading-copy p{margin:.18rem 0 0!important;font-size:.76rem!important;line-height:1.25!important;}
.notifications-page-heading-actions{display:flex!important;align-items:center!important;gap:.3rem!important;}
.notifications-page-heading-actions .icon-btn{width:34px!important;height:34px!important;min-width:34px!important;}
.notifications-page-heading-actions .notif-mark-all-compact{width:34px!important;height:34px!important;min-width:34px!important;}
.notifications-page-back{width:36px!important;height:36px!important;min-width:36px!important;}
.notifications-page-host .notif-tabs{justify-content:center!important;align-items:center!important;gap:.18rem!important;}
.notifications-page-host .notif-tab{min-width:0!important;flex:0 1 auto!important;padding:.42rem .62rem!important;}
@media(max-width:520px){
  .notifications-page-heading{gap:.45rem!important;}
  .notifications-page-heading-copy h2{font-size:1.05rem!important;}
  .notifications-page-heading-copy p{font-size:.7rem!important;}
  .notifications-page-heading-actions .icon-btn,.notifications-page-heading-actions .notif-mark-all-compact{width:32px!important;height:32px!important;min-width:32px!important;}
  .notifications-page-host .notif-tab{font-size:.68rem!important;padding:.42rem .45rem!important;}
  .notifications-page-host .notif-category-badge{max-width:5.7rem!important;font-size:.53rem!important;}
}
/* Product/package card footer: actions occupy real layout space, never collide. */
#app .product-card-action-row{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.65rem!important;margin-top:auto!important;padding-top:.4rem!important;min-width:0!important;}
#app .product-card-action-left{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:.4rem!important;min-width:0!important;flex:1 1 auto!important;}
#app .product-card-action-left .card-cart-btn{position:static!important;inset:auto!important;flex:0 0 auto!important;}
#app .product-card-action-left .own-listing-badge{white-space:nowrap!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#app .product-card-action-row .card-comment-btn{position:static!important;flex:0 0 auto!important;margin-left:auto!important;}
#app .product-card-action-row .card-service-btn{position:static!important;flex:0 0 auto!important;}
#app .product-card-wrap .card{min-width:0!important;}
/* Compact, icon-only social comment actions. */
#app .product-comment-actions{gap:.72rem!important;}
#app .product-comment-action{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;font-size:.82rem!important;}
#app .product-comment-action:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)!important;color:var(--primary)!important;}
#app .product-comment-action .comment-like-count{font-size:.65rem!important;margin-left:.18rem!important;}
#app .product-comments-empty{font-size:.76rem!important;text-align:left!important;padding:.75rem 0!important;color:var(--muted)!important;line-height:1.4!important;}
#app .product-comments-toggle{font-size:.75rem!important;min-height:34px!important;}
#app .product-gallery-variant-meta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.9rem!important;margin-top:.55rem!important;padding:.55rem .7rem!important;border-radius:.75rem!important;background:color-mix(in srgb,var(--primary) 5%,var(--card))!important;}
#app .product-gallery-variant-meta>span{min-width:0!important;overflow-wrap:anywhere!important;}
#app .product-gallery-variant-label{color:var(--muted)!important;font-size:.72rem!important;font-weight:650!important;}
#app .product-gallery-variant-meta strong{font-size:.78rem!important;}
#app .product-gallery-variant-price{white-space:nowrap!important;color:var(--primary)!important;}
/* Variety indicator added to card metadata without creating a large badge. */
#app .product-variety-indicator{color:var(--primary)!important;display:inline-flex!important;align-items:center!important;gap:.2rem!important;font-size:.65rem!important;font-weight:750!important;white-space:nowrap!important;}
/* Vendor storefront avatars are geometrically locked to a true circle. */
#app .storefront-profile .storefront-avatar,
#app .storefront-profile .storefront-avatar-button,
#app .storefront-profile .storefront-avatar-fallback-button,
#app .storefront-profile .storefront-avatar img,
#app .storefront-profile .storefront-avatar-button img,
#app .storefront-profile .storefront-avatar-fallback-button .avatar-fallback{width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important;max-width:82px!important;max-height:82px!important;aspect-ratio:1 / 1!important;border-radius:50%!important;overflow:hidden!important;box-sizing:border-box!important;}
#app .storefront-profile .storefront-avatar img,#app .storefront-profile .storefront-avatar-button img{object-fit:cover!important;display:block!important;}
/* ---- levromart-astra-vendor-listing-precision ---- */
.product-display-picture-editor{min-height:150px;border:1px solid var(--border);border-radius:14px;background:var(--input-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;position:relative;margin:.25rem 0 .7rem;}
.product-display-picture-editor img{display:block;width:100%;height:100%;max-height:230px;object-fit:cover;}
.product-display-picture-editor .display-picture-empty{display:flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--text-muted);font-size:.78rem;}
.product-display-picture-menu{position:fixed;z-index:2147483602;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:13px;box-shadow:var(--shadow-float);padding:.3rem;min-width:160px;}
.product-display-picture-menu button{width:100%;border:0;background:transparent;color:var(--text);padding:.65rem .75rem;text-align:left;border-radius:9px;cursor:pointer;font:inherit;font-size:.8rem;}
.product-display-picture-menu button:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);}
.variant-dnd-handle{cursor:grab;color:var(--text-muted);touch-action:none;padding:.35rem;}
.variant-dnd-handle:active{cursor:grabbing;}
.variant-price-row.dragging{opacity:.55;}
.product-variant-pricing .variant-extra-fields{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;}
.product-variety-add-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.45rem;margin-top:.5rem;}
@media(max-width:520px){.product-variety-add-row{grid-template-columns:1fr}.product-display-picture-editor{min-height:125px}}
/* ---- levromart-variety-editor-precision ---- */
/* Variety editor, intentionally scoped only to the product variety section. */
#productVariantPricing{padding:.95rem;background:color-mix(in srgb,var(--primary) 3%,var(--card));border:1px solid var(--border);border-radius:16px;}
#productVariantPricing .product-variant-pricing-head{margin-bottom:.85rem;}
#productVariantPricing .product-variant-pricing-head strong{font-size:1rem;}
#productVariantPricing .variant-price-row{display:block;padding:0;margin:.75rem 0 0;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 2px 8px color-mix(in srgb,var(--text) 5%,transparent);}
#productVariantPricing .variant-price-row:first-of-type{border-top:1px solid var(--border);}
#productVariantPricing .variant-row-topbar{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--primary) 5%,var(--card));}
#productVariantPricing .variant-dnd-handle{width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:9px;background:color-mix(in srgb,var(--primary) 8%,var(--card));color:var(--primary);font-size:.82rem;cursor:grab;touch-action:none;}
#productVariantPricing .variant-dnd-handle:active{cursor:grabbing;background:color-mix(in srgb,var(--primary) 14%,var(--card));}
#productVariantPricing .variant-row-title{flex:1;font-size:.82rem;color:var(--text);}
#productVariantPricing .variant-price-remove{width:34px;height:34px;border-radius:9px;}
#productVariantPricing .variant-photo-section{padding:.8rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem;border-bottom:1px solid var(--border);}
#productVariantPricing .variant-photo-picker{width:100%;min-height:82px;display:flex;align-items:center;gap:.75rem;padding:.65rem;border:1px dashed color-mix(in srgb,var(--primary) 48%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--primary) 4%,var(--input-bg));color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease;}
#productVariantPricing .variant-photo-picker:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--input-bg));}
#productVariantPricing .variant-photo-picker:active{transform:scale(.995);}
#productVariantPricing .variant-photo-preview{width:64px;height:64px;flex:0 0 64px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--primary) 9%,var(--input-bg));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));color:var(--primary);font-size:1.15rem;}
#productVariantPricing .variant-photo-preview img{display:block;width:100%;height:100%;object-fit:cover;}
#productVariantPricing .variant-photo-copy{min-width:0;display:flex;flex-direction:column;gap:.18rem;flex:1;}
#productVariantPricing .variant-photo-copy strong{font-size:.8rem;}
#productVariantPricing .variant-photo-copy small{font-size:.68rem;color:var(--text-muted);line-height:1.3;}
#productVariantPricing .variant-photo-camera{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);flex:0 0 32px;}
#productVariantPricing .variant-existing-photo-wrap{display:grid;gap:.25rem;}
#productVariantPricing .variant-existing-photo-wrap label{font-size:.68rem;color:var(--text-muted);margin:0;}
#productVariantPricing .variant-existing-photo-wrap select{margin:0;}
#productVariantPricing .variant-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:.8rem;}
#productVariantPricing .variant-field{min-width:0;}
#productVariantPricing .variant-field-wide{grid-column:1 / -1;}
#productVariantPricing .variant-field label{display:block;margin:0 0 .28rem;font-size:.7rem;font-weight:750;color:var(--text);}
#productVariantPricing .variant-field label span{font-weight:500;color:var(--text-muted);}
#productVariantPricing .variant-field input{width:100%;min-width:0;margin:0;}
#productVariantPricing .variant-price-row.dragging{opacity:.62;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 15%,transparent);}
@media(max-width:520px){
  #productVariantPricing{padding:.75rem;border-radius:14px;}
  #productVariantPricing .variant-fields-grid{grid-template-columns:1fr;gap:.62rem;}
  #productVariantPricing .variant-field-wide{grid-column:auto;}
  #productVariantPricing .variant-photo-preview{width:58px;height:58px;flex-basis:58px;}
  #productVariantPricing .variant-photo-picker{min-height:76px;}
}

  .order-follow-up-note{font-size:.78rem!important;line-height:1.45;margin:.1rem 0 .65rem!important;opacity:.72;} .order-follow-up-actions{display:flex;justify-content:center;align-items:center;width:100%;} .order-remind-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:#dc2626!important;background-color:#dc2626!important;border:1px solid #dc2626!important;border-color:#dc2626!important;color:#fff!important;min-width:190px;box-shadow:0 5px 14px rgba(220,38,38,.24)!important;} .order-remind-btn:hover{filter:brightness(.94);} .order-remind-btn:disabled{opacity:.7;filter:none;cursor:wait;} .vendor-order-waiting-banner{display:flex;flex-direction:column;gap:.2rem;} .vendor-order-waiting-banner span{font-size:.8rem;color:var(--text-muted);} .vendor-application-payout-section{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:color-mix(in srgb,var(--primary) 3%,var(--card));} .vendor-application-payout-heading strong{display:block;font-size:.95rem;} .vendor-application-payout-heading span{display:block;margin-top:.18rem;color:var(--text-muted);font-size:.76rem;line-height:1.4;}
/* ---- levromart-commission-3pct-final ---- */
.vendor-commission-breakdown{margin-top:.75rem;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--card) 88%,transparent);overflow:hidden}
.vendor-commission-breakdown-head{padding:.75rem .85rem;border-bottom:1px solid var(--border);font-size:.78rem;font-weight:800}
.vendor-commission-breakdown-list{max-height:360px;overflow:auto}
.vendor-commission-item{padding:.8rem .85rem;border-bottom:1px solid var(--border)}
.vendor-commission-item:last-child{border-bottom:0}
.vendor-commission-item-top{display:flex;justify-content:space-between;gap:.7rem;align-items:flex-start}
.vendor-commission-item-title{font-weight:800;font-size:.88rem}
.vendor-commission-item-date{font-size:.72rem;color:var(--text-muted);margin-top:.18rem}
.vendor-commission-buyer{display:flex;align-items:center;gap:.42rem;margin:.55rem 0 .35rem;padding:.45rem .55rem;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:.76rem}
.vendor-commission-buyer span{color:var(--text-muted)}
.vendor-commission-buyer strong{margin-left:auto;text-align:right;font-weight:800}
.vendor-commission-products{margin:.55rem 0 0;padding:0;list-style:none}
.vendor-commission-products li{display:flex;justify-content:space-between;gap:.6rem;padding:.22rem 0;font-size:.76rem}
.vendor-commission-products li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.vendor-commission-math{display:flex;justify-content:space-between;gap:.6rem;margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--border);font-size:.75rem}
.vendor-commission-math>strong{white-space:nowrap}
.vendor-commission-total{display:flex;justify-content:space-between;gap:.7rem;padding:.8rem .85rem;font-weight:850;font-size:.86rem;background:color-mix(in srgb,var(--primary) 7%,transparent)}
.vendor-commission-pay-now{width:100%;justify-content:center;margin-top:.65rem!important}
@media(max-width:720px){.vendor-commission-breakdown-list{max-height:45vh}.vendor-commission-item-top{align-items:center}}
/* ---- product-comment-composer-final ---- */
/* Product/package comment composer, balanced mobile proportions. */
.product-comment-composer{width:100%;box-sizing:border-box;}
.product-comment-compose-row{width:min(100%,680px);margin:.35rem auto 0;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:.65rem!important;}
.product-comment-compose-row textarea{width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:0!important;}
.product-comment-compose-row > button{flex:0 0 auto!important;justify-self:end!important;margin:0!important;}
/* ---- pickup-payment-display-precision-final ---- */
/* Payment timing UI follows the compact green/orange Levromart scheme. */
#app .product-payment-plan-notice.pay-after{background:#fff7ed !important;border-color:#fdba74 !important;color:#c2410c !important;}
#app .product-payment-plan-notice.pay-before{background:#EAF6F0 !important;border-color:#5BA98A !important;color:#0A5C40 !important;}
#app .payment-timing-option.pay-after.selected{background:#fff7ed !important;border-color:#fb923c !important;color:#c2410c !important;}
#app .payment-timing-option.pay-before.selected{background:#EAF6F0 !important;border-color:#5BA98A !important;color:#0A5C40 !important;}
/* ---- levromart-home-and-payment-final-repair ---- */
/* Final repair: Home must remain usable during silent refreshes. */
#app .levro-home-fallback{display:none !important;}
/* Compact payment-plan tabs on every product card, including storefront cards. */
#app .product-card-action-row{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto !important;align-items:center !important;gap:.38rem !important;width:100% !important;min-width:0 !important;}
#app .product-card-action-row .card-comment-btn{grid-column:1 !important;justify-self:start !important;}
#app .product-card-action-row .product-card-payment-plan{grid-column:2 !important;justify-self:start !important;display:inline-flex !important;visibility:visible !important;opacity:1 !important;}
#app .product-card-action-row .product-card-action-left{grid-column:3 !important;justify-self:end !important;min-width:0 !important;}
#app .product-card-payment-plan.pay-after{background:#ffedd5 !important;color:#c2410c !important;border-color:#fdba74 !important;}
#app .product-card-payment-plan.pay-before{background:#EAF6F0 !important;color:#0A5C40 !important;border-color:#5BA98A !important;}
/* ---- levromart-order-card-identification ---- */
.order-list-item,.order-history-item{display:block;font-weight:700;margin-top:.18rem;}
.order-list-product-id,.order-history-product-id{display:block;font-size:.72rem;opacity:.72;margin-top:.14rem;word-break:break-all;}
/* ---- levromart-android-horizontal-scroll-fix-20260916 ---- */
/* Android horizontal rails: let the browser own the gesture completely.
   touch-action must allow BOTH axes here (pan-x pan-y) -- pan-x alone traps
   a vertical drag that starts on the rail, so the page underneath it can
   never be scrolled by touch once your finger lands on a product/vendor card. */
#app .hscroll,
#app .cat-row,
#app .storefront-product-strip,
#app .vendors-map-vendor-rail {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  touch-action: pan-x pan-y !important;
  -webkit-user-select: none;
  user-select: none;
}
#app .hscroll > *,
#app .cat-row > *,
#app .storefront-product-strip > *,
#app .vendors-map-vendor-rail > * {
  scroll-snap-align: none !important;
}
/* ---- levromart-bank-picker-dark-mode-fix-20260916 ---- */
/* Payout-bank picker: keep the entire sheet consistent with the active theme.
   The previous visibility fix used a white fallback, which made bank names
   nearly invisible in dark mode. */
[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-picker-content,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-picker-content,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-picker-content,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-picker-content {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-picker-list,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-picker-list,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-picker-list,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-picker-list {
  background: var(--card) !important;
  color: var(--text) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-option,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-option,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-option,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-option {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-option:hover,
[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-option.selected,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-option:hover,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-option.selected,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-option:hover,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-option.selected,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-option:hover,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-option.selected {
  background: color-mix(in srgb, var(--primary) 10%, var(--card)) !important;
  color: var(--text) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-picker-header,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-picker-header,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-picker-head,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-picker-head {
  color: var(--text) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal #vaBankSearch,
[data-theme="black"] #vendorApplyBankPickerModal #vaBankSearch,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-search,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-search {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal #vaBankSearch::placeholder,
[data-theme="black"] #vendorApplyBankPickerModal #vaBankSearch::placeholder,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-search::placeholder,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-search::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-picker-header p,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-picker-header p,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-picker-head p,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-picker-head p {
  color: var(--text-muted) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-option-main strong,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-option-main strong,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-option-main strong,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-option-main strong {
  color: var(--text) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-option-main small,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-option-main small,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-option-main small,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-option-main small {
  color: var(--text-muted) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-option-icon,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-option-icon,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-option-icon,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-option-icon {
  background: color-mix(in srgb, var(--primary) 12%, var(--card)) !important;
  color: var(--primary) !important;
}

[data-theme="dark"] #vendorApplyBankPickerModal .vendor-bank-picker-close,
[data-theme="black"] #vendorApplyBankPickerModal .vendor-bank-picker-close,
[data-theme="dark"] #vendorBankPickerModal .vendor-bank-picker-close,
[data-theme="black"] #vendorBankPickerModal .vendor-bank-picker-close {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--card) 92%, var(--primary) 8%) !important;
  border-color: var(--border) !important;
}

/* Keep the light theme unchanged. */
/* ---- levromart-vendor-dashboard-refurbish-20260918 ---- */
/* Vendor listing dashboard: compact, touch-friendly, modern controls. */
#app .vendor-products-dashboard-head{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:1rem!important;
  padding:.2rem 0 0!important;margin:0!important;
}
#app .vendor-products-title-block{min-width:0!important;}
#app .vendor-products-eyebrow{display:inline-flex!important;align-items:center!important;gap:.35rem!important;color:var(--primary)!important;font-size:.68rem!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.055em!important;margin-bottom:.18rem!important;}
#app .vendor-products-dashboard-head h2{font-size:clamp(1.35rem,4vw,1.75rem)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:0!important;}
#app .vendor-products-subtitle{margin:.3rem 0 0!important;color:var(--text-muted)!important;font-size:.72rem!important;line-height:1.45!important;max-width:34rem!important;}
#app .vendor-products-top-menu{margin-left:auto!important;align-self:flex-start!important;position:relative!important;}
#app .vendor-products-top-menu .vendor-products-menu-btn{width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important;background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:0 5px 18px rgba(0,0,0,.08)!important;}
#app .vendor-products-dashboard-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:.55rem!important;margin:.7rem 0 .85rem!important;padding:.45rem!important;border:1px solid var(--border)!important;border-radius:16px!important;background:color-mix(in srgb,var(--card) 92%,var(--primary) 8%)!important;box-shadow:0 7px 24px rgba(0,0,0,.05)!important;}
#app .vendor-dashboard-icon-action{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;margin:0!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;color:var(--text-muted)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;font:inherit!important;box-shadow:none!important;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease!important;}
#app .vendor-dashboard-icon-action:hover{color:var(--primary)!important;border-color:color-mix(in srgb,var(--primary) 35%,var(--border))!important;transform:translateY(-1px)!important;}
#app .vendor-dashboard-icon-action.active{background:color-mix(in srgb,var(--primary) 12%,var(--card))!important;color:var(--primary)!important;border-color:color-mix(in srgb,var(--primary) 45%,var(--border))!important;}
#app .vendor-dashboard-add-action{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 25%,transparent)!important;transform:translateY(-1px)!important;}
#app .vendor-dashboard-add-action:hover{color:#fff!important;transform:translateY(-2px)!important;}
#app .vendor-products-heading-actions{display:none!important;}
#app .vendor-product-actions{display:grid!important;grid-template-columns:repeat(2,48px)!important;grid-auto-rows:48px!important;justify-content:center!important;align-items:center!important;gap:.55rem!important;margin:.8rem 0 0!important;padding:.75rem 0 0!important;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)!important;}
#app .vendor-card-icon-action{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;margin:0!important;border:1px solid var(--border)!important;border-radius:50%!important;background:var(--card)!important;color:var(--text-muted)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;font:inherit!important;box-shadow:0 3px 10px rgba(0,0,0,.06)!important;transition:transform .14s ease,background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease!important;}
#app .vendor-card-icon-action i{font-size:1rem!important;line-height:1!important;}
#app .vendor-card-icon-action:hover{transform:translateY(-1px)!important;color:var(--primary)!important;border-color:color-mix(in srgb,var(--primary) 40%,var(--border))!important;}
#app .vendor-card-icon-action:active{transform:scale(.94)!important;}
#app .vendor-card-icon-action.vendor-edit-action{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 8%,var(--card))!important;border-color:color-mix(in srgb,var(--primary) 25%,var(--border))!important;}
#app .vendor-card-icon-action.vendor-remove-action{color:var(--danger,#dc2626)!important;background:color-mix(in srgb,var(--danger,#dc2626) 7%,var(--card))!important;border-color:color-mix(in srgb,var(--danger,#dc2626) 22%,var(--border))!important;}
#app .vendor-card-icon-action.vendor-pause-action,#app .vendor-card-icon-action.vendor-resume-action{color:var(--text)!important;}
#app .vendor-card-icon-action.vendor-duplicate-action{color:var(--primary)!important;}
#app .vendor-card-icon-action.vendor-pending-action{opacity:.58!important;cursor:default!important;}
#app .vendor-card-icon-action:disabled{opacity:.55!important;cursor:not-allowed!important;transform:none!important;}
#app .vendor-own-product-card{overflow:visible!important;}
#app .vendor-products-menu{min-width:205px!important;border-radius:16px!important;padding:.35rem!important;box-shadow:0 18px 50px rgba(0,0,0,.2)!important;}
#app .vendor-products-menu button{min-height:42px!important;border-radius:11px!important;}
#app .vendor-discarded-panel{scroll-margin-top:1rem!important;}
@media(max-width:620px){
  #app .vendor-products-dashboard-head{gap:.6rem!important;}
  #app .vendor-products-subtitle{font-size:.68rem!important;}
  #app .vendor-products-dashboard-actions{justify-content:space-between!important;margin:.65rem 0 .75rem!important;padding:.4rem!important;}
  #app .vendor-dashboard-icon-action{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;}
  #app .vendor-products-top-menu .vendor-products-menu-btn{width:40px!important;height:40px!important;min-width:40px!important;}
}
@media(max-width:430px){
  #app .vendor-products-dashboard-actions{gap:.45rem!important;}
  #app .vendor-dashboard-icon-action{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:11px!important;}
  #app .vendor-product-actions{grid-template-columns:repeat(2,46px)!important;grid-auto-rows:46px!important;gap:.48rem!important;padding-top:.65rem!important;}
  #app .vendor-card-icon-action{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;}
}
/* ---- light-mode-product-order-text-contrast-fix ---- */
  /* Light-mode product order card: restore readable contrast only for the
     payment notice and price breakdown; no layout or behavior changes. */
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app .pd-total-box .product-payment-plan-notice.pay-before,
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app .pd-total-box .product-payment-plan-notice.pay-before strong,
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app .pd-total-box .product-payment-plan-notice.pay-before span {
    color:#0A5C40 !important;
    -webkit-text-fill-color:#0A5C40 !important;
  }
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app #buyDeliveryFields .price-breakdown-table .price-breakdown-row,
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app #buyDeliveryFields .price-breakdown-table .price-breakdown-row strong,
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app #buyDeliveryFields .price-breakdown-table .price-breakdown-total span,
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app #buyDeliveryFields .price-breakdown-table .price-breakdown-total strong {
    color:#1E293B !important;
    -webkit-text-fill-color:#1E293B !important;
  }
  :root:not([data-theme="dark"]):not([data-theme="black"]) #app #buyDeliveryFields .price-breakdown-table .price-breakdown-row span:first-child {
    color:#475569 !important;
    -webkit-text-fill-color:#475569 !important;
  }
/* ---- levromart-product-card-delivery-row-polish ---- */
  /* Compact delivery-total row: icon + short label + complete total. */
  #app .product-card-total-line{
    display:flex !important;
    align-items:center !important;
    gap:.3rem !important;
    width:auto !important;
    min-width:0 !important;
    margin:.3rem .55rem .65rem !important;
    padding:.42rem 0 0 !important;
    border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent) !important;
    font-size:.68rem !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
  #app .product-card-total-line > i{
    flex:0 0 auto !important;
    font-size:.68rem !important;
    color:var(--text-muted) !important;
  }
  #app .product-card-total-line .product-card-total-label{
    flex:0 1 auto !important;
    min-width:0 !important;
    color:var(--text-muted) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #app .product-card-total-line > strong{
    flex:0 0 auto !important;
    margin-left:auto !important;
    color:var(--text) !important;
    font-weight:750 !important;
    font-size:.72rem !important;
  }
  /* The old grid rule reserved a large right-side text area for the
     long sentence; remove that reservation now that the row is compact. */
  #app .grid:has(> .product-card-wrap) .product-card-total-line{
    padding-right:0 !important;
  }
/* ---- levromart-product-card-delivery-spacing-final ---- */
  /* FINAL MICRO-FIX, product-card delivery row only.
     Do not alter the cart button, item price, card width, card height,
     typography, or any other product-card behaviour. */
  #app .grid:has(> .product-card-wrap) .product-card-total-line,
  #app .hscroll .product-card-total-line,
  #app .product-card-total-line {
    padding-top: .75rem !important;
  }

  /* Move ONLY the truck icon + "Total" label left.
     The total amount (<strong>) is intentionally untouched. */
  #app .grid:has(> .product-card-wrap) .product-card-total-line > i,
  #app .grid:has(> .product-card-wrap) .product-card-total-line .product-card-total-label,
  #app .hscroll .product-card-total-line > i,
  #app .hscroll .product-card-total-line .product-card-total-label,
  #app .product-card-total-line > i,
  #app .product-card-total-line .product-card-total-label {
    transform: translateX(-.45rem) !important;
  }
/* ---- levromart-home-category-appstore-polish ---- */
  /*
   * HOME CATEGORY RAIL, compact illustrated browse chips.
   * The artwork is intentionally tiny and transparent: the chip is the
   * visual container, not the icon. This keeps the rail light, premium and
   * theme-native in light, charcoal-dark and pure-black modes.
   * This block intentionally affects ONLY the category rail.
   */
  #app .levro-home-cat-rail{
    gap:.42rem!important;
    padding:.12rem .02rem .54rem!important;
    align-items:center!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #app .levro-home-cat-rail::-webkit-scrollbar{display:none!important;}

  #app .levro-home-cat-chip{
    flex:0 0 auto!important;
    min-height:36px!important;
    height:36px!important;
    padding:0 .66rem 0 .42rem!important;
    gap:.28rem!important;
    border-radius:999px!important;
    border:1px solid color-mix(in srgb,var(--text) 8%,var(--border))!important;
    background:var(--card)!important;
    color:var(--text)!important;
    box-shadow:none!important;
    transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease!important;
    overflow:hidden!important;
  }
  #app .levro-home-cat-chip:active{transform:scale(.975)!important;}

  /* Tiny optical artwork, no white/pastel tile behind it. */
  #app .levro-home-cat-thumb{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    border-radius:0!important;
    overflow:visible!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    flex:0 0 21px!important;
  }
  #app .levro-home-cat-thumb img{
    display:block!important;
    width:21px!important;
    height:21px!important;
    max-width:21px!important;
    max-height:21px!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #app .levro-home-cat-label{
    font-size:.75rem!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:-.012em!important;
    white-space:nowrap!important;
    color:var(--text)!important;
  }
  #app .levro-home-cat-chip.active{
    background:color-mix(in srgb,var(--cat-color,var(--primary)) 8%,var(--card))!important;
    border-color:color-mix(in srgb,var(--cat-color,var(--primary)) 36%,var(--border))!important;
    box-shadow:0 1px 5px color-mix(in srgb,var(--cat-color,var(--primary)) 7%,transparent)!important;
  }

  /* Charcoal dark mode: no white icon wells, no bright halo. */
  [data-theme="dark"] #app .levro-home-cat-chip{
    background:#202428!important;
    border-color:#303438!important;
    color:#eceff1!important;
    box-shadow:none!important;
  }
  [data-theme="dark"] #app .levro-home-cat-chip.active{
    background:color-mix(in srgb,var(--cat-color,var(--primary)) 10%,#202428)!important;
    border-color:color-mix(in srgb,var(--cat-color,var(--primary)) 38%,#303438)!important;
    box-shadow:0 1px 6px color-mix(in srgb,var(--cat-color,var(--primary)) 8%,transparent)!important;
  }

  /* Pure black: the pill stays close to the page surface; artwork floats
     directly on it instead of sitting on a contrasting square. */
  [data-theme="black"] #app .levro-home-cat-chip{
    background:#0a0a0a!important;
    border-color:#202020!important;
    color:#f2f2f2!important;
    box-shadow:none!important;
  }
  [data-theme="black"] #app .levro-home-cat-chip.active{
    background:color-mix(in srgb,var(--cat-color,var(--primary)) 11%,#0a0a0a)!important;
    border-color:color-mix(in srgb,var(--cat-color,var(--primary)) 40%,#202020)!important;
    box-shadow:0 1px 7px color-mix(in srgb,var(--cat-color,var(--primary)) 8%,transparent)!important;
  }

  @media(max-width:420px){
    #app .levro-home-cat-rail{gap:.34rem!important;padding-bottom:.48rem!important;}
    #app .levro-home-cat-chip{min-height:34px!important;height:34px!important;padding:0 .58rem 0 .36rem!important;gap:.24rem!important;}
    #app .levro-home-cat-thumb{width:19px!important;height:19px!important;min-width:19px!important;flex-basis:19px!important;}
    #app .levro-home-cat-thumb img{width:19px!important;height:19px!important;max-width:19px!important;max-height:19px!important;}
    #app .levro-home-cat-label{font-size:.72rem!important;}
  }
/* ---- levromart-product-card-total-final-position ---- */
  /* FINAL MICRO-FIX, delivery total row only. */
  #app .product-card-total-line{padding-top:1rem!important;}
  #app .product-card-total-line > i,#app .product-card-total-line .product-card-total-label{transform:translateX(-.45rem)!important;}
  #app .product-card-total-line > strong{transform:none!important;}
/* ---- levromart-vendors-category-appstore-polish ---- */
/* VENDORS PAGE, compact category rail.
   Keep the actual vendor-category controls, filtering and ordering unchanged;
   this block only refines their visual treatment to match the compact Home rail. */
#app .vd-page .vd-chips{
  display:flex!important;
  align-items:center!important;
  gap:.38rem!important;
  overflow-x:auto!important;
  margin:0 -.02rem .68rem!important;
  padding:.08rem .02rem .42rem!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}
#app .vd-page .vd-chips::-webkit-scrollbar{display:none!important;}
#app .vd-page .vd-chip{
  flex:0 0 auto!important;
  min-height:35px!important;
  height:35px!important;
  padding:0 .68rem 0 .44rem!important;
  gap:.28rem!important;
  border-radius:999px!important;
  border:1px solid color-mix(in srgb,var(--text) 8%,var(--border))!important;
  background:var(--card)!important;
  color:var(--text)!important;
  font-size:.74rem!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:none!important;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
#app .vd-page .vd-chip:active{transform:scale(.975)!important;}
#app .vd-page .vd-chip-art{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  flex:0 0 20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#app .vd-page .vd-chip-art img{
  display:block!important;
  width:20px!important;
  height:20px!important;
  max-width:20px!important;
  max-height:20px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform-origin:center!important;
}
#app .vd-page .vd-chip span{white-space:nowrap!important;}
#app .vd-page .vd-chip-art img{opacity:.98!important;}
#app .vd-page .vd-chip.active{
  background:color-mix(in srgb,var(--cc,var(--primary)) 10%,var(--card))!important;
  border-color:color-mix(in srgb,var(--cc,var(--primary)) 38%,var(--border))!important;
  color:var(--text)!important;
  box-shadow:0 1px 5px color-mix(in srgb,var(--cc,var(--primary)) 7%,transparent)!important;
}

#app .vd-page .vd-chip.vd-chip-all.active{
  --cc:var(--primary)!important;
  background:color-mix(in srgb,var(--primary) 11%,var(--card))!important;
  border-color:color-mix(in srgb,var(--primary) 38%,var(--border))!important;
}

/* Tiny optical motion, the icon gently lifts only while the chip is selected.
   It remains completely still for users who prefer reduced motion. */
@keyframes levroVendorCatIconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}
#app .vd-page .vd-chip.active .vd-chip-art img{
  animation:levroVendorCatIconFloat 2.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  #app .vd-page .vd-chip.active .vd-chip-art img{animation:none!important;}
}

/* Neutral charcoal dark mode, no bright/white icon wells. */
[data-theme="dark"] #app .vd-page .vd-chip{
  background:#202428!important;
  border-color:#303438!important;
  color:#eceff1!important;
  box-shadow:none!important;
}
[data-theme="dark"] #app .vd-page .vd-chip.active{
  background:color-mix(in srgb,var(--cc,var(--primary)) 10%,#202428)!important;
  border-color:color-mix(in srgb,var(--cc,var(--primary)) 38%,#303438)!important;
}

/* Pure black mode, pills sit quietly on the black surface and the artwork
   remains colorful without introducing a white/pastel tile. */
[data-theme="black"] #app .vd-page .vd-chip{
  background:#0a0a0a!important;
  border-color:#202020!important;
  color:#f2f2f2!important;
  box-shadow:none!important;
}
[data-theme="black"] #app .vd-page .vd-chip.active{
  background:color-mix(in srgb,var(--cc,var(--primary)) 11%,#0a0a0a)!important;
  border-color:color-mix(in srgb,var(--cc,var(--primary)) 40%,#202020)!important;
}

/* Light mode keeps the same compact proportions, with a clean white chip. */
@media(max-width:420px){
  #app .vd-page .vd-chips{gap:.32rem!important;padding-bottom:.38rem!important;}
  #app .vd-page .vd-chip{
    min-height:34px!important;height:34px!important;
    padding:0 .6rem 0 .38rem!important;gap:.24rem!important;font-size:.72rem!important;
  }
  #app .vd-page .vd-chip i{width:18px!important;height:18px!important;min-width:18px!important;font-size:.78rem!important;}
}
/* ---- levromart-profile-storefront-refurbish-v1 ---- */
/* ================================================================
   LEVROMART PROFILE / STOREFRONT REFURBISH, scoped final layer
   Phase 2–8: hierarchy, sheets, neutral statistics, spacing.
   No database/query behavior is changed here.
   ================================================================ */

/* Profile identity: keep the cover as context, not as the information wall. */
#app .storefront-profile{
  max-width:980px!important;
  margin:0 auto 1.5rem!important;
}
#app .storefront-profile-body{
  padding:0 1.15rem 1.15rem!important;
}
#app .storefront-avatar-row{
  min-height:78px!important;
  margin-bottom:.35rem!important;
}
#app .storefront-profile-name{
  font-size:clamp(1.35rem,4.8vw,1.65rem)!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
  font-weight:800!important;
}
#app .storefront-name-row{
  margin-top:.15rem!important;
  margin-bottom:.15rem!important;
}

/* About is part of the primary identity hierarchy, immediately under the name. */
#app .storefront-about{
  margin-top:.7rem!important;
  padding-top:.8rem!important;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent)!important;
}
#app .storefront-about-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:.28rem!important;
}
#app .storefront-about-head h2{
  margin:0!important;
  font-size:1rem!important;
  line-height:1.25!important;
  font-weight:780!important;
  letter-spacing:-.01em!important;
}
#app .storefront-bio{
  margin:0!important;
  font-size:.9rem!important;
  line-height:1.55!important;
  color:var(--text)!important;
  max-width:72ch!important;
}
#app .storefront-bio-wrap{
  margin:0!important;
}
#app .storefront-bio-toggle{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  margin:.18rem 0 0!important;
  padding:.15rem 0!important;
  color:var(--text-muted)!important;
  font-weight:700!important;
  font-size:.78rem!important;
}
#app .storefront-bio-toggle:hover{color:var(--text)!important;}

/* Location, distance and category are supporting metadata, quiet and scannable. */
#app .storefront-meta{
  display:flex!important;
  align-items:center!important;
  gap:.42rem .65rem!important;
  flex-wrap:wrap!important;
  margin-top:.75rem!important;
  padding-top:.7rem!important;
  border-top:1px solid color-mix(in srgb,var(--border) 58%,transparent)!important;
  color:var(--text-muted)!important;
  font-size:.76rem!important;
  line-height:1.35!important;
}
#app .storefront-meta span{
  display:inline-flex!important;
  align-items:center!important;
  gap:.3rem!important;
  min-width:0!important;
}
#app .storefront-meta i{font-size:.72rem!important;opacity:.82!important;}

/* Stats: numbers stay neutral/white. Green is reserved for selected states/actions. */
#app .storefront-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:.85rem!important;
  padding-top:.8rem!important;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent)!important;
  color:var(--text-muted)!important;
  font-size:.72rem!important;
  line-height:1.25!important;
}
#app .storefront-stats > *{
  min-width:0!important;
  padding:0 .55rem!important;
  border-left:1px solid color-mix(in srgb,var(--border) 58%,transparent)!important;
  text-align:center!important;
}
#app .storefront-stats > *:first-child{border-left:0!important;}
#app .storefront-stats strong{
  display:block!important;
  margin-bottom:.16rem!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  font-size:.98rem!important;
  font-weight:800!important;
}
#app .storefront-stats .storefront-stat-link{
  color:var(--text-muted)!important;
  -webkit-text-fill-color:var(--text-muted)!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
#app .storefront-stats .storefront-stat-link strong{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
}
/* Neutralize the older dark/black-mode green link override specifically for these stats. */
:root[data-theme="dark"] body #app .storefront-stats .storefront-stat-link,
:root[data-theme="black"] body #app .storefront-stats .storefront-stat-link,
:root[data-theme="dark"] body #app .storefront-stats .storefront-stat-link strong,
:root[data-theme="black"] body #app .storefront-stats .storefront-stat-link strong{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
}
:root[data-theme="dark"] body #app .storefront-stats .storefront-stat-link:not(strong),
:root[data-theme="black"] body #app .storefront-stats .storefront-stat-link:not(strong){
  color:var(--text-muted)!important;
  -webkit-text-fill-color:var(--text-muted)!important;
}

/* Store options: native-feeling bottom sheet instead of a small popover. */
#app .levro-storefront-sheet-root{position:relative!important;z-index:2147483000!important;}
#app .levro-storefront-sheet-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.52)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease!important;
  z-index:2147483000!important;
}
#app .levro-storefront-sheet{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-height:min(78dvh,620px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding:8px max(16px,env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))!important;
  background:var(--card)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-bottom:0!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -18px 55px rgba(0,0,0,.34)!important;
  transform:translateY(105%)!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s!important;
  z-index:2147483001!important;
  touch-action:pan-y!important;
}
#app .levro-storefront-sheet.is-open{
  transform:translateY(0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1)!important;
}
#app .levro-storefront-sheet-root.is-open .levro-storefront-sheet-backdrop{
  opacity:1!important;
  pointer-events:auto!important;
}
#app .levro-sheet-handle{
  width:38px!important;
  height:4px!important;
  margin:2px auto 12px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--text-muted) 55%,transparent)!important;
}
#app .levro-sheet-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:1rem!important;
  padding:0 2px .7rem!important;
  border-bottom:1px solid var(--border)!important;
}
#app .levro-sheet-head h2{
  margin:0!important;
  font-size:1.02rem!important;
  font-weight:800!important;
}
#app .levro-sheet-head p{
  margin:.2rem 0 0!important;
  color:var(--text-muted)!important;
  font-size:.72rem!important;
  line-height:1.4!important;
}
#app .levro-sheet-close{
  width:38px!important;height:38px!important;min-width:38px!important;
  border:1px solid var(--border)!important;
  border-radius:50%!important;
  background:var(--input-bg)!important;
  color:var(--text)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;
}
#app .levro-storefront-sheet-list{
  display:flex!important;
  flex-direction:column!important;
  padding-top:.35rem!important;
}
#app .levro-storefront-sheet-item{
  width:100%!important;
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  gap:.75rem!important;
  padding:.72rem .45rem!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text)!important;
  font:inherit!important;
  font-size:.84rem!important;
  font-weight:600!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
#app .levro-storefront-sheet-item:last-child{border-bottom:0!important;}
#app .levro-storefront-sheet-item:hover,
#app .levro-storefront-sheet-item:focus-visible{
  background:color-mix(in srgb,var(--text) 5%,transparent)!important;
  outline:none!important;
}
#app .levro-storefront-sheet-item i{
  width:28px!important;
  flex:0 0 28px!important;
  text-align:center!important;
  color:var(--text-muted)!important;
  font-size:.95rem!important;
}
#app .levro-storefront-sheet-item[onclick*="openStorefrontShare"] i{color:var(--primary)!important;}

/* Notification preferences use the same bottom-sheet interaction language. */
#app .storefront-profile .follow-sheet-backdrop{
  position:fixed!important;
  inset:0!important;
  background:rgba(0,0,0,.52)!important;
  opacity:1!important;
  z-index:2147483002!important;
}
#app .storefront-profile .follow-menu{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  width:100%!important;
  max-width:none!important;
  max-height:min(76dvh,620px)!important;
  overflow:auto!important;
  padding:8px max(16px,env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))!important;
  background:var(--card)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-bottom:0!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -18px 55px rgba(0,0,0,.34)!important;
  transform:translateY(0)!important;
  z-index:2147483003!important;
}
#app .storefront-profile .follow-menu::before{
  content:""!important;
  display:block!important;
  width:38px!important;height:4px!important;
  margin:2px auto 12px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--text-muted) 55%,transparent)!important;
}
#app .storefront-profile .follow-menu > strong{
  display:block!important;
  padding:.1rem 0 .75rem!important;
  border-bottom:1px solid var(--border)!important;
  font-size:1rem!important;
  color:var(--text)!important;
}
#app .storefront-profile .follow-pref-row{
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1rem!important;
  padding:.72rem 0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 68%,transparent)!important;
  color:var(--text)!important;
  font-size:.84rem!important;
}
#app .storefront-profile .follow-pref-row input[type=checkbox]{width:20px!important;height:20px!important;}
#app .storefront-profile .follow-menu small{
  display:block!important;
  margin:.8rem 0 .35rem!important;
  font-size:.72rem!important;
  color:var(--text-muted)!important;
}
#app .storefront-profile .follow-mute-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:.45rem!important;
}
#app .storefront-profile .follow-mute-grid button{
  min-height:42px!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:var(--input-bg)!important;
  color:var(--text)!important;
  font:inherit!important;
  font-size:.72rem!important;
  font-weight:700!important;
}
#app .storefront-profile .follow-mute-grid button.active{
  color:var(--primary)!important;
  border-color:color-mix(in srgb,var(--primary) 50%,var(--border))!important;
  background:color-mix(in srgb,var(--primary) 9%,var(--card))!important;
}
#app .storefront-profile .follow-menu.hidden{display:none!important;}

/* Reduce the "everything is a card" feeling around the catalogue. */
#app .storefront-featured{margin:1.1rem 0 1.25rem!important;}
#app .storefront-section-head{margin-bottom:.55rem!important;}
#app .storefront-section-head h3{font-size:1.05rem!important;font-weight:800!important;}
#app .storefront-catalog-tabs{
  margin-top:1rem!important;
  margin-bottom:.85rem!important;
}
#app .storefront-products-shell{margin-top:.85rem!important;}
#app .storefront-reviews{margin-top:1.35rem!important;padding-top:1.1rem!important;border-top:1px solid var(--border)!important;}

/* Small screens: preserve the hierarchy without squeezing the stat rail. */
@media(max-width:620px){
  #app .storefront-profile-body{padding:0 .9rem .95rem!important;}
  #app .storefront-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:.75rem!important;}
  #app .storefront-stats > *:nth-child(3){border-left:0!important;}
  #app .storefront-stats > *{padding:0 .35rem!important;}
  #app .storefront-stats strong{font-size:.94rem!important;}
  #app .storefront-meta{font-size:.72rem!important;}
}
@media(prefers-reduced-motion:reduce){
  #app .levro-storefront-sheet,
  #app .levro-storefront-sheet-backdrop{transition:none!important;}
}
/* ---- levro-storefront-flat-profile-20261004 ---- */
/*
  FLAT STOREFRONT / SOCIAL-PROFILE PRESENTATION
  The storefront itself is a page section, not a card.
  Keep the cover, avatar, identity, actions, metadata and stats in normal
  page flow. Product/package cards remain cards because they represent
  individual marketplace items.
*/

/* The vendor profile shell must not look like a giant card. */
#app .storefront-profile{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Cover = full-width page banner, with no card enclosure. */
#app .storefront-profile .storefront-cover{
  width:100%!important;
  height:176px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

/* The profile content sits directly on the page background. */
#app .storefront-profile .storefront-profile-body{
  width:100%!important;
  margin:0!important;
  padding:0 1rem 1.35rem!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Avatar can still have a clean profile-picture edge, but not a card ring. */
#app .storefront-profile .storefront-avatar{
  border:4px solid var(--bg)!important;
  box-shadow:0 3px 14px rgba(0,0,0,.18)!important;
}

/* Identity rhythm: image -> name -> actions. */
#app .storefront-profile .storefront-avatar-row{
  margin-bottom:.15rem!important;
}
#app .storefront-profile .storefront-name-row{
  margin-top:.15rem!important;
  margin-bottom:.55rem!important;
}
#app .storefront-profile .storefront-profile-name{
  margin:0!important;
  font-size:1.55rem!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}

/* Follow + bell are page actions, not floating controls or mini-cards. */
#app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  position:static!important;
  width:100%!important;
  margin:.05rem 0 .15rem!important;
  padding:0!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:.5rem!important;
}
#app .storefront-profile .storefront-public-actions .storefront-follow-wrap{
  position:static!important;
}
#app .storefront-profile .storefront-public-actions .storefront-follow-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.5rem!important;
}
#app .storefront-profile .storefront-public-actions .follow-btn.follow-btn-icon{
  min-width:108px!important;
  height:40px!important;
  min-height:40px!important;
  padding:.45rem 1rem!important;
  border-radius:999px!important;
}
#app .storefront-profile .storefront-public-actions .follow-settings-btn{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  border-radius:50%!important;
}

/* About is a page section, not a nested card. */
#app .storefront-profile .storefront-about{
  margin:1rem 0 0!important;
  padding:1rem 0 0!important;
  border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#app .storefront-profile .storefront-about-head h2{
  font-size:1.05rem!important;
}

/* Metadata: clean inline information, no enclosing box. */
#app .storefront-profile .storefront-meta{
  margin:1rem 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

/* Statistics: four simple pieces of information on the page.
   No enclosing border, no boxed cells, no green numbers. */
#app .storefront-profile .storefront-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  margin:1rem 0 0!important;
  padding:1rem 0 0!important;
  border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)!important;
  border-bottom:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:.8rem!important;
}
#app .storefront-profile .storefront-stats > *{
  min-width:0!important;
  padding:0 .65rem!important;
  text-align:center!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#app .storefront-profile .storefront-stats > *:first-child{padding-left:0!important;}
#app .storefront-profile .storefront-stats > *:last-child{padding-right:0!important;}
#app .storefront-profile .storefront-stats strong{
  display:block!important;
  color:var(--text)!important;
  font-size:1rem!important;
  font-weight:800!important;
  line-height:1.2!important;
}
#app .storefront-profile .storefront-stat-link{
  color:var(--text-muted)!important;
  text-decoration:none!important;
}

/* No card enclosure around the storefront's "latest" rail or catalogue shell. */
#app .storefront-featured,
#app .storefront-packages,
#app .storefront-products-shell,
#app .storefront-reviews{
  width:100%!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#app .storefront-featured{
  margin:1.25rem 0 0!important;
  padding:1.15rem 1rem 0!important;
  border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)!important;
}
#app .storefront-products-shell{
  margin:1.15rem 0 0!important;
  padding:1rem!important;
  border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)!important;
}
#app .storefront-reviews{
  margin:1.25rem 0 0!important;
  padding:1.1rem 1rem 0!important;
  border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)!important;
}

/* Keep headings on the page itself rather than inside a header card. */
#app .storefront-section-head{
  margin-bottom:.7rem!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}

/* Catalogue tabs are navigation, not cards. */
#app .storefront-catalog-tabs{
  margin:1.1rem 1rem 0!important;
  padding:.1rem 0 .15rem!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#app .storefront-catalog-tab{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#app .storefront-catalog-tab.active{
  background:transparent!important;
  border:0!important;
  box-shadow:inset 0 -2px 0 var(--primary)!important;
}

/* Product cards remain marketplace objects; only the storefront wrapper is flat. */

/* Desktop: keep the page visually centred without recreating a card. */
@media(min-width:861px){
  #app .storefront-profile,
  #app .storefront-featured,
  #app .storefront-catalog-tabs,
  #app .storefront-products-shell,
  #app .storefront-reviews{
    max-width:980px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #app .storefront-profile .storefront-profile-body{
    padding-left:0!important;
    padding-right:0!important;
  }
  #app .storefront-featured,
  #app .storefront-products-shell,
  #app .storefront-reviews{
    padding-left:0!important;
    padding-right:0!important;
  }
  #app .storefront-catalog-tabs{margin-left:auto!important;margin-right:auto!important;}
}

/* Mobile: full-bleed cover + comfortable page gutters. */
@media(max-width:620px){
  #app .storefront-profile .storefront-cover{
    height:156px!important;
  }
  #app .storefront-profile .storefront-profile-body{
    padding:0 .95rem 1.1rem!important;
  }
  #app .storefront-profile .storefront-avatar{
    width:76px!important;
    height:76px!important;
    min-width:76px!important;
    min-height:76px!important;
    margin-top:-38px!important;
  }
  #app .storefront-profile .storefront-profile-name{
    font-size:1.42rem!important;
  }
  #app .storefront-profile .storefront-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    row-gap:1rem!important;
    padding-top:.9rem!important;
  }
  #app .storefront-profile .storefront-stats > *{
    padding:0!important;
    text-align:left!important;
  }
  #app .storefront-featured,
  #app .storefront-products-shell,
  #app .storefront-reviews{
    padding-left:.95rem!important;
    padding-right:.95rem!important;
  }
  #app .storefront-catalog-tabs{
    margin-left:.95rem!important;
    margin-right:.95rem!important;
  }
}
/* ---- levro-storefront-final-standard-polish-20261004 ---- */
/* FINAL STANDARD STOREFRONT POLISH, mobile social-profile hierarchy.
   Presentation-only: preserves the existing storefront markup, follow logic,
   notification preferences, three-dot menu and marketplace functionality. */

/* 1) Banner overflow/menu: light, crisp, visible without the heavy dark disc. */
#app .storefront-profile .storefront-banner-more{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  right:14px!important;
  top:14px!important;
  border:2px solid rgba(255,255,255,.82)!important;
  background:rgba(15,23,42,.24)!important;
  color:#fff!important;
  border-radius:50%!important;
  box-shadow:0 2px 12px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.16)!important;
  backdrop-filter:blur(7px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(7px) saturate(120%)!important;
}
#app .storefront-profile .storefront-banner-more i{
  font-size:.9rem!important;
  letter-spacing:.12em!important;
  margin-left:.08em!important;
  color:#fff!important;
  opacity:.98!important;
}

/* 2) Identity actions: pull Follow + notification control closer to the name,
      keep them above About, and prevent the row from looking detached. */
#app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  position:relative!important;
  top:-6px!important;
  margin:.05rem 0 -.05rem!important;
  padding:0!important;
  min-height:40px!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:.55rem!important;
}
#app .storefront-profile .storefront-public-actions .storefront-follow-wrap{
  display:flex!important;
  align-items:center!important;
  gap:.55rem!important;
  position:static!important;
}
#app .storefront-profile .storefront-public-actions .follow-btn.follow-btn-icon{
  width:auto!important;
  min-width:118px!important;
  height:42px!important;
  min-height:42px!important;
  padding:.5rem 1rem!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  white-space:nowrap!important;
}
#app .storefront-profile .storefront-public-actions .follow-btn.follow-btn-icon .follow-btn-label{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
}
#app .storefront-profile .storefront-public-actions .follow-settings-btn{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--card)!important;
  border:1.5px solid color-mix(in srgb,var(--text-muted) 58%,var(--border))!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
#app .storefront-profile .storefront-public-actions .follow-settings-btn i{color:var(--text)!important;}
#app .storefront-profile .storefront-public-actions .follow-settings-btn:disabled{opacity:.5!important;}

/* 3) Larger, more pronounced profile picture, shifted higher into the banner. */
#app .storefront-profile .storefront-avatar{
  width:96px!important;
  height:96px!important;
  margin-top:-48px!important;
  border-width:4px!important;
  border-color:var(--bg)!important;
  box-shadow:0 6px 20px rgba(15,23,42,.20)!important;
}

/* 4) Four storefront metrics: balanced 2x2 mobile layout with centered copy. */
#app .storefront-profile .storefront-stats{
  text-align:center!important;
}
#app .storefront-profile .storefront-stats > *{
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
#app .storefront-profile .storefront-stats strong,
#app .storefront-profile .storefront-stats .storefront-stat-link strong{
  text-align:center!important;
}
@media(max-width:620px){
  #app .storefront-profile .storefront-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    row-gap:1.25rem!important;
    padding-top:1.05rem!important;
  }
  #app .storefront-profile .storefront-stats > *{
    padding:0 .5rem!important;
  }
  #app .storefront-profile .storefront-avatar{
    width:96px!important;
    height:96px!important;
    margin-top:-48px!important;
  }
  #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
    top:-8px!important;
    margin-top:.02rem!important;
    margin-bottom:-.08rem!important;
  }
}

/* 5) Notification preferences: true premium bottom sheet, with enough contrast
      for light mode and clean dark-mode adaptation. */
#app .storefront-profile .follow-menu{
  background:#ffffff!important;
  color:#172033!important;
  border:1px solid #d7dee8!important;
  border-bottom:0!important;
  box-shadow:0 -18px 55px rgba(15,23,42,.24)!important;
  padding:10px max(20px,env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-right))!important;
}
#app .storefront-profile .follow-menu::before{
  width:44px!important;
  height:5px!important;
  margin:2px auto 16px!important;
  background:#aab5c3!important;
}
#app .storefront-profile .follow-menu > strong{
  color:#172033!important;
  font-size:1.18rem!important;
  line-height:1.25!important;
  padding:.05rem 0 .45rem!important;
  border-bottom:0!important;
  font-weight:800!important;
}
#app .storefront-profile .follow-mode-intro{
  color:#5c6a7c!important;
  font-size:.82rem!important;
  line-height:1.45!important;
  margin:0 0 .55rem!important;
}
#app .storefront-profile .follow-mode-row{
  min-height:82px!important;
  grid-template-columns:50px minmax(0,1fr) 30px!important;
  gap:.8rem!important;
  padding:.72rem .05rem!important;
  border-bottom:1px solid #dfe5ec!important;
  background:transparent!important;
  color:#172033!important;
}
#app .storefront-profile .follow-mode-row:active{
  background:#f3f6f9!important;
}
#app .storefront-profile .follow-mode-icon{
  width:50px!important;
  height:50px!important;
  border-radius:15px!important;
  border:1px solid #d2dbe6!important;
  font-size:1.05rem!important;
  display:grid!important;
  place-items:center!important;
}
#app .storefront-profile .follow-mode-icon-all{
  color:#2563eb!important;
  background:#edf4ff!important;
  border-color:#bfd2f2!important;
}
#app .storefront-profile .follow-mode-icon-relevant{
  color:#7c3aed!important;
  background:#f2edff!important;
  border-color:#d5c8f5!important;
}
#app .storefront-profile .follow-mode-icon-relevant i{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#app .storefront-profile .follow-mode-icon-off{
  color:#536174!important;
  background:#f1f3f6!important;
  border-color:#d5dce5!important;
}
#app .storefront-profile .follow-mode-copy b{
  color:#172033!important;
  font-size:.92rem!important;
  line-height:1.25!important;
  font-weight:800!important;
}
#app .storefront-profile .follow-mode-copy small{
  color:#5c6a7c!important;
  font-size:.74rem!important;
  line-height:1.42!important;
}
#app .storefront-profile .follow-mode-check{
  width:27px!important;
  height:27px!important;
  border:2px solid #cbd5e1!important;
  background:#fff!important;
  color:transparent!important;
}
#app .storefront-profile .follow-mode-row[aria-pressed="true"] .follow-mode-check{
  border-color:#087f56!important;
  background:#087f56!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(8,127,86,.18)!important;
}

/* Dark mode: retain the same hierarchy while restoring readable contrast. */
[data-theme="dark"] #app .storefront-profile .follow-menu,
[data-theme="black"] #app .storefront-profile .follow-menu{
  background:var(--card)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:0 -18px 55px rgba(0,0,0,.52)!important;
}
[data-theme="dark"] #app .storefront-profile .follow-menu > strong,
[data-theme="black"] #app .storefront-profile .follow-menu > strong,
[data-theme="dark"] #app .storefront-profile .follow-mode-copy b,
[data-theme="black"] #app .storefront-profile .follow-mode-copy b{color:var(--text)!important;}
[data-theme="dark"] #app .storefront-profile .follow-mode-intro,
[data-theme="black"] #app .storefront-profile .follow-mode-intro,
[data-theme="dark"] #app .storefront-profile .follow-mode-copy small,
[data-theme="black"] #app .storefront-profile .follow-mode-copy small{color:var(--text-muted)!important;}
[data-theme="dark"] #app .storefront-profile .follow-mode-row,
[data-theme="black"] #app .storefront-profile .follow-mode-row{border-bottom-color:var(--border)!important;color:var(--text)!important;}
[data-theme="dark"] #app .storefront-profile .follow-mode-row:active,
[data-theme="black"] #app .storefront-profile .follow-mode-row:active{background:color-mix(in srgb,var(--text) 6%,transparent)!important;}
[data-theme="dark"] #app .storefront-profile .follow-mode-check,
[data-theme="black"] #app .storefront-profile .follow-mode-check{background:var(--card)!important;border-color:#59636f!important;}

/* Keep the sheet comfortably sized on smaller phones. */
@media(max-width:420px){
  #app .storefront-profile .follow-menu{padding-left:16px!important;padding-right:16px!important;}
  #app .storefront-profile .follow-mode-row{grid-template-columns:46px minmax(0,1fr) 28px!important;gap:.7rem!important;min-height:76px!important;}
  #app .storefront-profile .follow-mode-icon{width:46px!important;height:46px!important;}
}
/* ---- levro-storefront-exact-adjustments-20261004 ---- */
/* EXACT FOLLOW-UP ADJUSTMENTS, only the requested storefront/header details. */

/* 1) Put Follow + notification controls ABOVE the vendor name, with a deliberate
      breathing gap so the name reads as the identity line underneath the actions. */
#app .storefront-profile .storefront-profile-body{
  padding-top:0!important;
}
#app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  order:initial!important;
  position:relative!important;
  top:auto!important;
  inset:auto!important;
  width:100%!important;
  min-height:42px!important;
  height:42px!important;
  margin:0 0 .62rem!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
  flex-wrap:nowrap!important;
}
#app .storefront-profile .storefront-profile-actions + .storefront-name-row{
  margin-top:0!important;
  padding-top:.05rem!important;
}
#app .storefront-profile .storefront-profile-name{
  margin:.05rem 0 .22rem!important;
  padding:0!important;
  line-height:1.16!important;
}

/* 2) When followed, always show the state as text + check, never a lone check. */
#app .storefront-profile .follow-btn.follow-btn-icon .follow-btn-label{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
#app .storefront-profile .follow-btn.follow-btn-icon{
  min-width:122px!important;
  height:42px!important;
  min-height:42px!important;
  padding:.45rem 1rem!important;
  gap:.45rem!important;
}

/* 3) Three-dot control: slightly darker glass with a crisp white ring and dots.
      This keeps it legible over very bright covers and remains visible at night. */
#app .storefront-profile .storefront-banner-more{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  border:2px solid rgba(255,255,255,.92)!important;
  background:rgba(15,23,42,.48)!important;
  color:#fff!important;
  box-shadow:0 3px 14px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12)!important;
  backdrop-filter:blur(8px) saturate(115%)!important;
  -webkit-backdrop-filter:blur(8px) saturate(115%)!important;
}
#app .storefront-profile .storefront-banner-more i{
  color:#fff!important;
  opacity:1!important;
  font-size:.92rem!important;
}

/* 4) Shorter mobile app header: reduce the vertical footprint without removing
      the avatar, search, notification/message or cart controls. */
header{
  padding:.52rem .9rem!important;
}
.header-top-row{
  gap:.5rem!important;
  min-height:46px!important;
}
.header-search-row{
  min-height:44px!important;
  height:44px!important;
  padding:.45rem .82rem!important;
  font-size:.82rem!important;
}
.header-left,.header-right{
  min-height:44px!important;
}
.header-left .icon-btn,.header-right .icon-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
}
@media(max-width:720px){
  body{padding-top:calc(62px + env(safe-area-inset-top,0px))!important;}
  header{padding:.45rem .75rem!important;}
  .header-top-row{min-height:44px!important;gap:.42rem!important;}
  .header-search-row{height:42px!important;min-height:42px!important;padding:.4rem .76rem!important;}
}

/* Preserve the enlarged avatar while keeping the action/name spacing clean. */
@media(max-width:620px){
  #app .storefront-profile .storefront-avatar-row{
    min-height:96px!important;
    height:96px!important;
    margin-top:-48px!important;
    margin-bottom:.48rem!important;
  }
  #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
    min-height:40px!important;
    height:40px!important;
    margin-bottom:.58rem!important;
  }
  #app .storefront-profile .storefront-profile-name{
    font-size:1.42rem!important;
  }
}

/* Dark/black modes: retain the same crisp white ring, but deepen the glass. */
[data-theme="dark"] #app .storefront-profile .storefront-banner-more,
[data-theme="black"] #app .storefront-profile .storefront-banner-more{
  background:rgba(0,0,0,.58)!important;
  border-color:rgba(255,255,255,.9)!important;
}
/* ---- levro-storefront-notification-drawer-final-20261004 ---- */
/* FINAL NOTIFICATION DRAWER, same native bottom-sheet mechanics as Store options.
   The sheet/backdrop are portaled to document.body so no #app or bottom-nav
   stacking context can sit above them. */
body.follow-notification-sheet-open{overflow:hidden!important;overscroll-behavior:none!important;}
body.follow-notification-sheet-open #bottomNav,
body.follow-notification-sheet-open .bottom-nav{
  display:none!important;
}

.follow-sheet-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  background:rgba(8,15,25,.56)!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:2147483008!important;
}

.follow-menu{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  width:100vw!important;
  max-width:none!important;
  height:auto!important;
  max-height:min(72dvh,620px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  margin:0!important;
  padding:8px max(20px,env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-right))!important;
  background:#fff!important;
  color:#172033!important;
  border:1px solid #d6dee8!important;
  border-bottom:0!important;
  border-radius:26px 26px 0 0!important;
  box-shadow:0 -20px 60px rgba(15,23,42,.28)!important;
  transform:translateY(105%)!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .28s!important;
  z-index:2147483009!important;
}
.follow-menu.is-sheet-open{
  transform:translateY(0)!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s ease!important;
}
.follow-menu.hidden{display:none!important;}

.follow-menu::before{
  content:""!important;
  display:block!important;
  width:46px!important;
  height:5px!important;
  margin:1px auto 16px!important;
  border-radius:999px!important;
  background:#c7d0db!important;
}
.follow-menu > strong{
  display:block!important;
  margin:0!important;
  padding:0 0 5px!important;
  color:#172033!important;
  font-size:1.12rem!important;
  line-height:1.25!important;
  font-weight:800!important;
  border:0!important;
}
.follow-menu .follow-mode-intro{
  margin:0 0 12px!important;
  color:#657386!important;
  font-size:.81rem!important;
  line-height:1.45!important;
}
.follow-menu .follow-mode-row{
  width:100%!important;
  min-height:78px!important;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) 30px!important;
  align-items:center!important;
  gap:.8rem!important;
  padding:12px 0!important;
  border:0!important;
  border-bottom:1px solid #e2e8ef!important;
  border-radius:0!important;
  background:transparent!important;
  color:#172033!important;
  font:inherit!important;
  text-align:left!important;
  box-shadow:none!important;
}
.follow-menu .follow-mode-row:last-child{border-bottom:0!important;}
.follow-menu .follow-mode-row:active{background:#f7f9fb!important;}
.follow-menu .follow-mode-icon{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  min-height:50px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  border:1px solid transparent!important;
  font-size:1.12rem!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
}
.follow-menu .follow-mode-icon i{
  display:block!important;
  font-family:"Font Awesome 6 Free"!important;
  font-weight:900!important;
  line-height:1!important;
  visibility:visible!important;
  opacity:1!important;
}
.follow-menu .follow-mode-icon-all{
  color:#2563eb!important;
  background:#edf4ff!important;
  border-color:#bfd3f4!important;
}
.follow-menu .follow-mode-icon-relevant{
  color:#7c3aed!important;
  background:#f2edff!important;
  border-color:#d6c8f4!important;
}
.follow-menu .follow-mode-icon-off{
  color:#536174!important;
  background:#f1f4f7!important;
  border-color:#d6dde6!important;
}
.follow-menu .follow-mode-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
.follow-menu .follow-mode-copy b{
  display:block!important;
  color:#172033!important;
  font-size:.93rem!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.follow-menu .follow-mode-copy small{
  display:block!important;
  margin:0!important;
  color:#657386!important;
  font-size:.75rem!important;
  line-height:1.4!important;
}
.follow-menu .follow-mode-check{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:2px solid #cbd5e1!important;
  background:#fff!important;
  color:transparent!important;
  font-size:.78rem!important;
}
.follow-menu .follow-mode-row[aria-pressed="true"] .follow-mode-check{
  border-color:#087f56!important;
  background:#087f56!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(8,127,86,.18)!important;
}
.follow-menu .follow-mode-row[aria-pressed="true"] .follow-mode-copy b{font-weight:850!important;}

/* Dark theme remains a genuine dark sheet, not a washed-out gray overlay. */
[data-theme="dark"] .follow-menu,
[data-theme="black"] .follow-menu{
  background:#181c20!important;
  color:#eef2f5!important;
  border-color:#333a40!important;
  box-shadow:0 -22px 60px rgba(0,0,0,.6)!important;
}
[data-theme="dark"] .follow-menu > strong,
[data-theme="black"] .follow-menu > strong,
[data-theme="dark"] .follow-menu .follow-mode-copy b,
[data-theme="black"] .follow-menu .follow-mode-copy b{color:#eef2f5!important;}
[data-theme="dark"] .follow-menu .follow-mode-intro,
[data-theme="black"] .follow-menu .follow-mode-copy small{color:#aeb6bf!important;}
[data-theme="dark"] .follow-menu .follow-mode-row,
[data-theme="black"] .follow-menu .follow-mode-row{border-bottom-color:#343b42!important;color:#eef2f5!important;}
[data-theme="dark"] .follow-menu .follow-mode-row:active,
[data-theme="black"] .follow-menu .follow-mode-row:active{background:#20252a!important;}
[data-theme="dark"] .follow-menu .follow-mode-check,
[data-theme="black"] .follow-menu .follow-mode-check{background:#181c20!important;border-color:#59636d!important;}

@media(max-width:420px){
  .follow-menu{padding-left:16px!important;padding-right:16px!important;}
  .follow-menu .follow-mode-row{grid-template-columns:46px minmax(0,1fr) 28px!important;gap:.7rem!important;min-height:74px!important;}
  .follow-menu .follow-mode-icon{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;}
}
@media(prefers-reduced-motion:reduce){
  .follow-menu,.follow-menu.is-sheet-open{transition:none!important;}
  #app .storefront-profile .follow-sheet-backdrop{transition:none!important;}
}
/* ---- levro-storefront-final-layout-adjustment-20261004 ---- */
/* FINAL LAYOUT ADJUSTMENT
   - Notification sheet is truly edge-to-edge even after it is portaled to body.
   - Follow + notification controls sit immediately beneath the banner.
   - Vendor name stays close to the enlarged profile image.
*/

/* The notification menu is moved to document.body by JS when opened, so the
   old #app .storefront-profile scope cannot reach it. These unscoped rules
   are intentionally the final source of truth for the open sheet. */
body .follow-sheet-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  background:rgba(15,23,42,.48)!important;
  z-index:2147483008!important;
}
body .follow-menu{
  position:fixed!important;
  inset-inline:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  max-height:min(72dvh,600px)!important;
  margin:0!important;
  padding:10px max(20px,env(safe-area-inset-left,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-right,0px))!important;
  border:0!important;
  border-top:1px solid #d7dee8!important;
  border-radius:28px 28px 0 0!important;
  background:#fff!important;
  color:#172033!important;
  box-shadow:0 -18px 55px rgba(15,23,42,.24)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:2147483009!important;
}
body .follow-menu.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Actions belong to the banner's lower edge, not to the identity/name block. */
#app .storefront-profile .storefront-profile-body{
  position:relative!important;
}
#app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  position:absolute!important;
  top:12px!important;
  right:0!important;
  inset-inline-end:0!important;
  z-index:20!important;
  width:auto!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
}
#app .storefront-profile .storefront-public-actions .storefront-follow-wrap,
#app .storefront-profile .storefront-public-actions .storefront-follow-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
  width:auto!important;
  margin:0!important;
}

/* Keep the avatar overlap strong, but let the name follow it immediately. */
#app .storefront-profile .storefront-avatar-row{
  margin-top:-48px!important;
  margin-bottom:.05rem!important;
}
#app .storefront-profile .storefront-name-row{
  margin-top:0!important;
  transform:translateY(-5px)!important;
}

@media(max-width:620px){
  #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
    top:10px!important;
    right:0!important;
    height:40px!important;
    min-height:40px!important;
    gap:.45rem!important;
  }
  #app .storefront-profile .storefront-public-actions .storefront-follow-wrap,
  #app .storefront-profile .storefront-public-actions .storefront-follow-controls{
    gap:.45rem!important;
  }
  #app .storefront-profile .storefront-avatar-row{
    margin-top:-48px!important;
    margin-bottom:0!important;
  }
  #app .storefront-profile .storefront-name-row{
    transform:translateY(-7px)!important;
  }
  body .follow-menu{
    width:100vw!important;
    max-width:100vw!important;
    border-radius:26px 26px 0 0!important;
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!important;
  }
}
/* ---- levro-storefront-actions-neat-final-20261004 ---- */
/*
  FINAL MICRO-ADJUSTMENT, STOREFRONT HEADER ONLY
  Keep the Follow + notification controls directly under the cover.
  Keep the vendor name immediately after the enlarged profile picture.
  Presentation-only: no markup, data, auth, routing, or storefront logic changes.
*/

/* The action row is anchored to the bottom edge of the banner/profile-body
   boundary, so it cannot push the vendor name downward. */
body #app .storefront-profile .storefront-profile-body{
  position:relative!important;
}

body #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  position:absolute!important;
  top:8px!important;
  right:0!important;
  inset-inline-end:0!important;
  left:auto!important;
  width:auto!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
  flex-wrap:nowrap!important;
}

/* Keep the two controls compact and aligned as one professional action group. */
body #app .storefront-profile .storefront-public-actions .storefront-follow-wrap,
body #app .storefront-profile .storefront-public-actions .storefront-follow-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
}

/* The avatar remains the visual anchor; the name follows it immediately. */
body #app .storefront-profile .storefront-avatar-row{
  margin-top:-48px!important;
  margin-bottom:-2px!important;
}

body #app .storefront-profile .storefront-name-row{
  position:relative!important;
  z-index:6!important;
  margin-top:0!important;
  margin-bottom:.55rem!important;
  transform:translateY(-3px)!important;
}

@media(max-width:620px){
  body #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
    top:7px!important;
    right:0!important;
    inset-inline-end:0!important;
    height:40px!important;
    min-height:40px!important;
    gap:.45rem!important;
  }

  body #app .storefront-profile .storefront-public-actions .storefront-follow-wrap,
  body #app .storefront-profile .storefront-public-actions .storefront-follow-controls{
    gap:.45rem!important;
  }

  body #app .storefront-profile .storefront-avatar-row{
    margin-top:-48px!important;
    margin-bottom:-2px!important;
  }

  body #app .storefront-profile .storefront-name-row{
    margin-top:0!important;
    transform:translateY(-4px)!important;
  }
}
/* ---- levro-storefront-header-true-final-20261004 ---- */
/* TRUE FINAL STOREFRONT HEADER FIX
   Follow + notification are normal-flow controls BELOW the cover.
   The avatar overlaps the cover independently, so it cannot pull the
   action row back into the banner. The vendor name follows with clear air.
*/
body #app .storefront-profile .storefront-profile-body{
  position:relative!important;
  display:block!important;
  padding-top:0!important;
}

/* Avatar: keep the intentional overlap, but remove it from normal flow. */
body #app .storefront-profile .storefront-avatar-row{
  position:absolute!important;
  left:1rem!important;
  right:1rem!important;
  top:-48px!important;
  width:auto!important;
  height:96px!important;
  min-height:96px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  z-index:20!important;
  pointer-events:none!important;
}
body #app .storefront-profile .storefront-avatar-row .storefront-avatar,
body #app .storefront-profile .storefront-avatar-row .storefront-avatar-button{
  pointer-events:auto!important;
}

/* Follow + notification: BELOW the banner, with deliberate breathing room. */
body #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:15!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  margin:16px 0 0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
  flex-wrap:nowrap!important;
  transform:none!important;
}
body #app .storefront-profile .storefront-public-actions .storefront-follow-wrap,
body #app .storefront-profile .storefront-public-actions .storefront-follow-controls{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.55rem!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
}

/* Name: clearly separated from the overlapping profile picture/action row. */
body #app .storefront-profile .storefront-name-row{
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  margin:22px 0 .55rem!important;
  padding:0!important;
  transform:none!important;
}
body #app .storefront-profile .storefront-profile-name{
  margin:0!important;
}

/* Three-dot: subtle dark outline so it is legible without becoming dominant. */
body #app .storefront-profile .storefront-cover > .storefront-banner-more{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.34)!important;
  border:1.5px solid rgba(15,23,42,.48)!important;
  color:#172033!important;
  box-shadow:0 3px 10px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  z-index:30!important;
}
body #app .storefront-profile .storefront-cover > .storefront-banner-more i{
  color:#172033!important;
  font-size:1rem!important;
  opacity:.94!important;
}

[data-theme="dark"] body #app .storefront-profile .storefront-cover > .storefront-banner-more,
[data-theme="black"] body #app .storefront-profile .storefront-cover > .storefront-banner-more{
  background:rgba(0,0,0,.24)!important;
  border-color:rgba(255,255,255,.48)!important;
  color:#f4f6f8!important;
}
[data-theme="dark"] body #app .storefront-profile .storefront-cover > .storefront-banner-more i,
[data-theme="black"] body #app .storefront-profile .storefront-cover > .storefront-banner-more i{
  color:#f4f6f8!important;
}

@media(max-width:620px){
  body #app .storefront-profile .storefront-avatar-row{
    left:.9rem!important;
    right:.9rem!important;
    top:-48px!important;
    height:96px!important;
    min-height:96px!important;
  }
  body #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
    height:38px!important;
    min-height:38px!important;
    margin:16px 0 0!important;
    gap:.45rem!important;
  }
  body #app .storefront-profile .storefront-public-actions .storefront-follow-wrap,
  body #app .storefront-profile .storefront-public-actions .storefront-follow-controls{
    gap:.45rem!important;
  }
  body #app .storefront-profile .storefront-name-row{
    margin:22px 0 .55rem!important;
  }
  body #app .storefront-profile .storefront-cover > .storefront-banner-more{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    top:12px!important;
    right:12px!important;
  }
}
/* ---- levromart-pwa-safe-area ---- */
/* PWA / installed-app fix: later header rules (padding:.52rem .9rem!important, mobile .45rem .75rem!important)
   dropped the safe-area padding, so the fixed header slid under the phone's clock, signal and battery icons.
   Re-apply the device inset (notch / status bar) on top of the header's normal padding. */
html body > header{
  padding-top:calc(.5rem + env(safe-area-inset-top,0px))!important;
  padding-left:max(.8rem,env(safe-area-inset-left,0px))!important;
  padding-right:max(.8rem,env(safe-area-inset-right,0px))!important;
  box-sizing:border-box!important;
}
@media (max-width:720px){
  html body > header{
    padding-top:calc(.45rem + env(safe-area-inset-top,0px))!important;
    padding-left:max(.75rem,env(safe-area-inset-left,0px))!important;
    padding-right:max(.75rem,env(safe-area-inset-right,0px))!important;
  }
  /* keep page content clear of the taller header */
  html body{padding-top:calc(66px + env(safe-area-inset-top,0px))!important;}
}
/* installed app only: the status bar sits on the same surface as the header, so give it a solid, readable backdrop */
@media all and (display-mode:standalone){
  html body > header{background:color-mix(in srgb,var(--bg) 94%,transparent)!important;}
}
/* ---- levromart-legal-consent-final ---- */
.levromart-legal-consent-backdrop{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.levromart-legal-consent-card{width:min(680px,96vw);max-height:min(88vh,820px);display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden}.levromart-legal-consent-head{padding:1.1rem 1.15rem .8rem;border-bottom:1px solid var(--border)}.levromart-legal-consent-head h2{margin:0 0 .35rem;font-size:1.2rem}.levromart-legal-consent-body{overflow:auto;padding:1rem 1.15rem;line-height:1.55}.levromart-legal-consent-body .legal-page{max-width:none}.levromart-legal-consent-links{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.65rem}.levromart-legal-consent-links button{border:0;background:none;color:var(--primary);font:inherit;font-weight:700;cursor:pointer;padding:.2rem}.levromart-legal-consent-foot{padding:.85rem 1.15rem;border-top:1px solid var(--border)}.levromart-legal-consent-foot .btn{width:100%;justify-content:center}html.levromart-legal-gated,html.levromart-legal-gated body{overflow:hidden!important}
/* ---- levromart-payout-setup-gate ---- */
.levromart-payout-gate-backdrop{position:fixed;inset:0;z-index:99000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.levromart-payout-gate-card{width:min(420px,96vw);background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35);padding:1.3rem 1.2rem;text-align:center;}
.levromart-payout-gate-icon{width:60px;height:60px;border-radius:50%;margin:0 auto .8rem;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,var(--card));color:var(--primary);font-size:1.4rem;}
.levromart-payout-gate-actions{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;}
.levromart-payout-gate-actions .btn-outline{border-color:var(--border);}
/* ---- final-system-bar-and-map-popup-polish ---- */
/* Match the phone safe-area/system-bar fill to Levromart's actual background. */
:root { --system-bar-shade: #f5f7fa; }
html[data-theme="dark"] { --system-bar-shade: #1b1f23; }
html[data-theme="black"] { --system-bar-shade: #000000; }
html { background: var(--system-bar-shade) !important; }
body::before { background: var(--system-bar-shade) !important; }

/* Map vendor popup: store identity sits naturally beside the name, like a
   compact storefront preview rather than a plain text Leaflet popup. */
.vendor-map-popup { min-width: 190px; max-width: 250px; }
.vendor-map-popup-head { display:flex; align-items:center; gap:.65rem; min-width:0; }
.vendor-map-popup-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; object-fit:cover; display:block; background:var(--card); border:2px solid var(--border); }
.vendor-map-popup-avatar-fallback { display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--primary) 15%,var(--card)); color:var(--primary); font-weight:800; }
.vendor-map-popup-copy { min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.vendor-map-popup-copy strong { font-size:.9rem; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vendor-map-popup-copy span { font-size:.72rem; color:var(--text-muted); line-height:1.25; }
.vendor-map-popup-link { display:inline-flex; margin-top:.55rem; font-weight:700; color:var(--primary) !important; text-decoration:none; }
.vendor-map-popup-link:hover { text-decoration:underline; }
.leaflet-popup-content { margin:.7rem .8rem !important; }
/* ---- profile-image-natural-ui-fix ---- */
.storefront-avatar-button{appearance:none;-webkit-appearance:none;padding:0;cursor:pointer;border:4px solid var(--card);background:var(--primary-grad);color:#fff;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
.storefront-avatar-button img{width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none;}
#profilePanel img,header .brand-logo-circle,.chat-header-avatar{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
#vendorProfileImageLightbox{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:1;visibility:visible;transition:opacity .18s ease,visibility .18s ease;}
#vendorProfileImageLightbox.hidden{opacity:0;visibility:hidden;pointer-events:none;}
#vendorProfileImageLightbox .vendor-profile-image-card{position:relative;display:flex;align-items:center;justify-content:center;max-width:min(92vw,520px);max-height:82vh;}
#vendorProfileImageLightbox img{display:block;width:auto;height:auto;max-width:88vw;max-height:76vh;object-fit:contain;border-radius:1rem;border:2px solid rgba(255,255,255,.9);box-shadow:0 22px 70px rgba(0,0,0,.55);background:var(--card);}
#vendorProfileImageLightbox .vendor-profile-image-close{position:absolute;right:-.45rem;top:-.45rem;width:2.55rem;height:2.55rem;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,20,20,.78);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);}
#vendorProfileImageLightbox .vendor-profile-image-fallback{width:min(62vw,280px);height:min(62vw,280px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-grad);color:#fff;font-size:4rem;font-weight:800;border:4px solid rgba(255,255,255,.9);}
/* ---- levromart-contrast-and-levi-fix ---- */
/* ================================================================
   FINAL LIGHT-MODE CONTRAST + LEVI MARK FIX
   These controls are intentionally unboxed/textual where requested.
   The rules are scoped so they do not change ordinary marketplace buttons.
   ================================================================ */

/* Message-choice popup: the two choices are actions, not bordered buttons.
   Reset native <button> styling explicitly; otherwise mobile browsers can
   paint their own white/raised button chrome and inherit an unreadable color. */
.product-message-wrap .ms-list,
#storefrontMessageMenu {
  border: 0 !important;
  outline: 0 !important;
  background: var(--card) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
  padding: .3rem !important;
}
.product-message-wrap .ms-list .ms-item,
#storefrontMessageMenu .ms-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: .62rem .75rem !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: .88rem !important;
  font-weight: 550 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: .55rem !important;
  cursor: pointer !important;
}
.product-message-wrap .ms-list .ms-item i,
#storefrontMessageMenu .ms-item i {
  color: var(--primary) !important;
  flex: 0 0 auto;
}
.product-message-wrap .ms-list .ms-item:hover,
.product-message-wrap .ms-list .ms-item:focus-visible,
#storefrontMessageMenu .ms-item:hover,
#storefrontMessageMenu .ms-item:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
  color: var(--text) !important;
  outline: none !important;
}
.product-message-wrap .ms-list .ms-item:active,
#storefrontMessageMenu .ms-item:active {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* Product-page wishlist heart: always readable in light mode. Keep the
   circular control subtle, but never allow the heart itself to become white
   on a white product card. */
.product-detail-card .fav-btn {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--card) 94%, transparent) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 3px 12px rgba(15,23,42,.14) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.product-detail-card .fav-btn i {
  color: inherit !important;
}
.product-detail-card .fav-btn.active {
  color: var(--danger) !important;
}

/* Also fix catalogue hearts in light mode without touching their geometry. */
.fav-btn {
  color: var(--text) !important;
  border: 0 !important;
  outline: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fav-btn i { color: inherit !important; }
.fav-btn.active { color: var(--danger) !important; }

/* Double-tap-to-wishlist heart, Instagram-style: hidden until a double tap
   plays it, then bounces in and fades back out. Filled red on add, a fading
   outline heart on remove so the two read differently at a glance.
   The div itself has no default tap-highlight suppression (that global
   rule only covers <button>/<a>/[role=button], and this is a plain div
   with an onclick) -- without this, every tap flashed the browser's
   default blue tap-highlight rectangle instead of the heart, which read
   as "nothing happened, just a blue flash". */
.product-img {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.product-wish-bounce {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; z-index: 3;
}
.product-wish-bounce i {
  font-size: 3.4rem; color: var(--danger);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));
  transform: scale(0.3);
}
.product-wish-bounce.added {
  animation: productWishBounceIn .65s cubic-bezier(.2,1.3,.4,1) forwards;
}
.product-wish-bounce.removed i { color: color-mix(in srgb, var(--text) 55%, transparent); }
.product-wish-bounce.removed {
  animation: productWishFade .5s ease forwards;
}
@keyframes productWishBounceIn {
  0% { opacity: 0; }
  15% { opacity: 1; }
  35% { transform: scale(1.15); }
  55% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes productWishFade {
  0% { opacity: 0; transform: scale(0.9); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

/* Levi settings mark: NEVER invert the real Levromart mark. The source logo
   already contains the green arc artwork and white centre. The previous
   brightness(0) invert(1) rule flattened the entire image to white. */
.settings-levi-logo {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2 !important;
}
.settings-levi-logo-wrap {
  position: relative !important;
  isolation: isolate !important;
  filter: none !important;
  -webkit-filter: none !important;
}
/* Soft hollow green glow behind the white centre of the Levi mark. It stays
   behind the actual artwork, so the original green arc + white centre remain
   untouched and crisp. */
.settings-levi-logo-wrap::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: .40rem !important;
  height: .40rem !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 62%, transparent) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 5px color-mix(in srgb, var(--primary) 38%, transparent),
    0 0 10px color-mix(in srgb, var(--primary) 20%, transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.settings-levi-logo-wrap::after {
  display: none !important;
  content: none !important;
}

/* Levi mark artwork: the two side marks/arcs are white in both contexts. */
.ai-chat-fab-logo,
html:not([data-theme="dark"]):not([data-theme="black"]) .ai-chat-fab-logo {
  filter: brightness(0) invert(1) !important;
  -webkit-filter: brightness(0) invert(1) !important;
}
.settings-levi-logo {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Ensure no generic inherited/UA button color can turn these icon controls
   white against a light surface. */
html[data-theme="light"] .product-detail-card .fav-btn,
html:not([data-theme="dark"]):not([data-theme="black"]) .product-detail-card .fav-btn {
  color: var(--primary) !important;
}
/* ---- levromart-master-fix-ui ---- */
/* Professional no-photo avatars: person glyph, deterministic colour, never raw initials. */
.avatar-fallback{border:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;font-weight:800 !important;overflow:hidden !important;vertical-align:middle !important;background-image:none !important;}
.avatar-fallback i{display:none !important;}
.vendor-edit-avatar-area{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto 1rem;width:100%;}.vendor-edit-avatar-wrap{position:relative;display:inline-flex!important;width:5rem;height:5rem;align-items:center;justify-content:center;flex:0 0 5rem;}.vendor-edit-avatar-wrap .avatar-edit-badge{right:-.1rem;bottom:-.1rem;z-index:3;}.profile-avatar-lightbox-btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;display:inline-flex;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;}
.profile-avatar-lightbox-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.storefront-avatar-fallback-button{padding:0 !important;display:flex !important;align-items:center;justify-content:center;}
.storefront-avatar-fallback-button .avatar-fallback{border-radius:50%;width:100% !important;height:100% !important;}
.chat-header-avatar.avatar-fallback{border:0 !important;display:inline-flex !important;}
.chat-header-avatar[onclick]{cursor:pointer;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.product-detail-top-actions{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;align-items:center;justify-content:flex-end;gap:.45rem;z-index:4;}
.product-detail-top-actions .fav-btn{position:static !important;}
.product-storefront-share-btn{width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:0;background:color-mix(in srgb,var(--card) 94%,transparent);color:var(--primary);box-shadow:0 3px 12px rgba(15,23,42,.14);cursor:pointer;appearance:none;-webkit-appearance:none;}
.product-storefront-share-btn:hover{background:color-mix(in srgb,var(--primary) 9%,var(--card));}
.product-storefront-share-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.product-detail-title{padding-right:5.2rem !important;}
#storefrontShareModal{position:fixed;inset:0;z-index:10030;display:flex;align-items:flex-end;justify-content:center;padding:1rem;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
#storefrontShareModal.hidden{display:none !important;}
#storefrontShareModal .storefront-share-sheet{width:min(520px,100%);background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:1.25rem;padding:1rem;box-shadow:0 22px 70px rgba(0,0,0,.28);}
#storefrontShareModal .storefront-share-grabber{width:38px;height:4px;border-radius:99px;background:var(--border);margin:.1rem auto .9rem;}
#storefrontShareModal .storefront-share-title{font-size:1rem;font-weight:750;margin:0;}
#storefrontShareModal .storefront-share-copy{color:var(--text-muted);font-size:.82rem;margin:.25rem 0 1rem;}
.storefront-share-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;}
.storefront-share-action{min-height:62px;border:0;background:transparent;color:var(--text);border-radius:.85rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer;}
.storefront-share-action i{font-size:1.05rem;color:var(--primary);}
.storefront-share-action:hover,.storefront-share-action:focus-visible{background:color-mix(in srgb,var(--primary) 8%,transparent);outline:none;}
.storefront-share-close{width:100%;margin-top:.55rem;border:0;background:transparent;color:var(--text-muted);padding:.7rem;border-radius:.7rem;font:inherit;cursor:pointer;}
.storefront-share-close:hover{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);}
.delivery-method-row{align-items:center !important;gap:1rem !important;justify-content:flex-start !important;flex-wrap:nowrap !important;}
.delivery-method-row label{white-space:nowrap;}
.ms-list .ms-item,.ms-list button.ms-item,.ms-list a.ms-item{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:var(--text);box-shadow:none;text-decoration:none;}
.ms-list button.ms-item{font-family:inherit;}
<style id="levromart-final-product-actions-and-levi-cleanup">
/* Product detail: wishlist and storefront-share controls belong together at the top-right. */
.product-detail-card .product-detail-top-actions{justify-content:flex-end !important;left:auto !important;right:1rem !important;width:auto !important;gap:.45rem !important;}
.product-detail-card .product-detail-top-actions .fav-btn,
.product-detail-card .product-detail-top-actions .product-storefront-share-btn{position:static !important;inset:auto !important;flex:0 0 auto !important;}
/* Levi: no primitive inline action strip beneath every answer. */
#aiChatMessages .ai-chat-action-row{display:none !important;}
#aiChatMessages .ai-chat-msg.assistant{user-select:text !important;-webkit-user-select:text !important;}
#aiChatMessages .ai-chat-msg.assistant .ai-chat-action-row{display:none !important;}
/* ---- levromart-master-fix-final ---- */
.product-message-wrap .ms-list button.ms-item,
.product-message-wrap .ms-list a.ms-item,
#storefrontMessageMenu .ms-item{
  -webkit-tap-highlight-color:transparent;
  text-transform:none !important;
}
.profile-avatar-lightbox-btn img{display:block;}
#vendorProfileImageLightbox .vendor-profile-image-card{max-width:92vw;max-height:84vh;}
#vendorProfileImageLightbox .vendor-profile-image-fallback i{font-size:35%;}
#profilePanel,#notifPanel{touch-action:pan-y !important;}
#profilePanel::after,#notifPanel::after{pointer-events:none;}
/* ---- levromart-requested-precision-fixes ---- */
/* Default accessibility values for a fresh device. User changes still persist. */

/* Order stats: use the full content width, remove the visual left gutter, and
   centre the period control as one balanced unit. */
#orderStatsAccordion .accordion-body { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
#orderStatsAccordion .order-stats-tabs-wrap { width:100%; display:flex; justify-content:center; }
#orderStatsAccordion #orderStatsTabs { width:min(100%, 520px) !important; max-width:520px !important; margin:0.2rem auto 0.7rem !important; }
#orderStatsAccordion .order-stats-table { width:100% !important; margin:0 auto !important; table-layout:fixed; }
#orderStatsAccordion .order-stats-table td:first-child { padding-left:0 !important; text-align:left !important; }
#orderStatsAccordion .order-stats-table td:last-child { padding-right:0 !important; text-align:right !important; }
.vendor-orders-filter-row { width:100%; align-items:stretch !important; justify-content:center !important; }
.vendor-orders-filter-row > select { flex:1 1 180px !important; min-width:0 !important; max-width:none !important; }
@media (max-width:520px) {
  #orderStatsAccordion #orderStatsTabs { width:100% !important; }
  #orderStatsAccordion .segmented-tabs button { font-size:.72rem !important; padding:.5rem .2rem !important; }
  .vendor-orders-filter-row > select { flex:1 1 100% !important; width:100% !important; }
}

/* Login password: familiar eye control inside the field, without changing
   the surrounding auth card layout. */
.password-input-wrap { position:relative; width:100%; }
.password-input-wrap input { width:100%; padding-right:3rem !important; box-sizing:border-box; }
.password-eye-btn { position:absolute; right:.35rem; top:50%; transform:translateY(-50%); width:2.35rem; height:2.35rem; border:0; outline:0; background:transparent; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; -webkit-appearance:none; appearance:none; }
.password-eye-btn:hover { color:var(--primary); background:color-mix(in srgb,var(--primary) 8%,transparent); }
.password-eye-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Shop location: give the saved-location state breathing room before the map. */
#veLocationMap { margin-top:.9rem !important; }

/* Settings-page Levi mark only: preserve the real green arcs and white centre;
   the floating Levi button has its own independent logo rules. */
#settings-page .settings-levi-logo-wrap { filter:none !important; -webkit-filter:none !important; }
#settings-page .settings-levi-logo { filter:none !important; -webkit-filter:none !important; opacity:1 !important; }
#settings-page .settings-levi-logo-wrap::before {
  width:.42rem !important; height:.42rem !important; border:1px solid color-mix(in srgb,var(--primary) 68%,transparent) !important;
  box-shadow:0 0 5px color-mix(in srgb,var(--primary) 42%,transparent),0 0 11px color-mix(in srgb,var(--primary) 24%,transparent) !important;
}

/* Voice compose never forces focus/keyboard when the mic is tapped. */
#msgMicBtn { -webkit-tap-highlight-color:transparent; }
/* ---- levromart-2026-09-09-vendor-home-fixes ---- */
/* ================================================================
   HOME, TRENDING SERVICES
   Every service card uses the SAME compact dimensions. The image is cropped
   into the same rectangle, so a tall flyer can never make its card taller
   than the neighbouring hairdressing/service card.
   ================================================================ */
@media (max-width: 720px) {
  .service-trending-scroll { gap: 1rem !important; padding-left:.35rem !important; padding-right:.35rem !important; }
  .service-trending-scroll > .product-card-wrap {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    min-width: 190px !important;
  }
  .service-trending-scroll > .product-card-wrap > .card {
    width: 190px !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    padding: .6rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .service-trending-scroll .product-img {
    width: 100% !important;
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    aspect-ratio: auto !important;
    flex: 0 0 138px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }
  .service-trending-scroll .product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .service-trending-scroll h4 {
    flex: 0 0 auto !important;
    min-height: 2.15em !important;
    max-height: 2.15em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .service-trending-scroll .card > .flex {
    min-height: 1.35rem !important;
    max-height: 1.35rem !important;
    overflow: hidden !important;
  }
  .service-trending-scroll .card > div[style*="margin:0.5rem 0"] {
    margin: .42rem 0 !important;
    min-height: 1.25rem !important;
    max-height: 1.25rem !important;
    overflow: hidden !important;
  }
}

/* Packages are intentionally a little larger than the compact service rail. */
.package-recommendation-strip > .package-listing-card,
.package-recommendation-strip > .card {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}
.package-recommendation-strip .package-listing-card {
  padding: .55rem !important;
  border-radius: 13px !important;
}
.package-recommendation-strip .package-gallery {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.package-recommendation-strip .package-gallery-placeholder {
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
}
.package-recommendation-strip .package-photo-main {
  height: 132px !important;
  min-height: 132px !important;
  object-fit: cover !important;
}
.package-recommendation-strip .package-photo-strip { display:none !important; }
.package-recommendation-strip .package-photo-count { font-size:.62rem !important; display:block !important; line-height:1.2 !important; margin:.28rem 0 0 !important; min-height:1em !important; }
.package-recommendation-strip .package-listing-card > .flex { margin-top:.7rem !important; }
.package-recommendation-strip .package-listing-card p { font-size:.7rem !important; }

/* ================================================================
   STOREFRONTS, NO PLACEHOLDER HEADER TEXT
   A storefront with no cover image is intentionally blank. Only the owner
   keeps the pencil control for uploading one. Buyers/other vendors see no
   "set a custom storefront header" message at all.
   ================================================================ */
.storefront-cover-empty {
  font-size: 0 !important;
  color: transparent !important;
}
.storefront-cover-empty::before,
.storefront-cover-empty::after {
  content: none !important;
  display: none !important;
}

/* ================================================================
   VENDORS DIRECTORY, compact two-column cards + grid/list/map + sorting
   ================================================================ */
.vendors-directory-controls {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.55rem !important;
  margin: .9rem 0 !important;
}
.vendors-directory-filter-row {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:.45rem !important;
}
.vendors-directory-sort-row {
  display:flex !important;
  align-items:center !important;
  gap:.45rem !important;
  flex-wrap:wrap !important;
}
.vendors-directory-sort-row select { flex:1 1 150px !important; min-width:0 !important; }
.vendors-directory-view-buttons { display:flex !important; gap:.35rem !important; }
.vendors-directory-view-buttons .btn { min-width:40px !important; padding:.55rem !important; }
.vendors-directory-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.65rem !important;
  align-items:stretch !important;
}
.vendors-directory-grid.vendors-list-mode { grid-template-columns:1fr !important; }
.vendors-directory-grid .vendor-card {
  width:100% !important;
  min-width:0 !important;
  min-height:145px !important;
  height:100% !important;
  padding:.72rem !important;
  border-radius:14px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:.18rem !important;
}
.vendors-directory-grid.vendors-list-mode .vendor-card {
  min-height:0 !important;
  height:auto !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:.18rem !important;
}
.vendor-directory-card-main { min-width:0 !important; flex:1 1 auto !important; }
.vendors-directory-grid .vendor-card .vendor-directory-logo {
  width:2.35rem !important;
  height:2.35rem !important;
  margin:0 0 .3rem !important;
  flex:0 0 auto !important;
}
.vendors-directory-grid .vendor-directory-name {
  display:block !important;
  font-size:.86rem !important;
  line-height:1.18 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.vendors-directory-grid .vendor-directory-city {
  margin:.2rem 0 !important;
  font-size:.7rem !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.vendors-directory-grid .vendor-directory-categories {
  margin:0 0 .28rem !important;
  font-size:.62rem !important;
  line-height:1.25 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.vendors-directory-grid .vendor-card-footer {
  margin-top:auto !important;
  display:flex !important;
  gap:.25rem !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.vendors-directory-grid .vendor-card-footer .badge {
  font-size:.58rem !important;
  padding:.15rem .38rem !important;
  margin:0 !important;
  white-space:nowrap !important;
}
.vendors-directory-more {
  width:100% !important;
  margin:.75rem 0 0 !important;
}
/* Grid and list mode alike: everything centered on the card instead of
   left-aligned against a small top-left logo -- avatar, name, city, sector,
   rating, follow button and follower count all share one visual axis so the
   card reads as one tidy unit instead of scattered pieces. */
.vendors-directory-grid .vendor-card{
  align-items:center !important;
  text-align:center !important;
}
.vendors-directory-grid .vendor-directory-copy{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
.vendors-directory-grid .vendor-card .vendor-directory-logo{
  margin:0 0 .35rem !important;
}
.vendors-directory-grid .vendor-directory-name{
  width:100% !important;
  white-space:normal !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.vendors-directory-grid .vendor-directory-city,
.vendors-directory-grid .vendor-directory-categories{
  width:100% !important;
  white-space:normal !important;
}
.vendors-directory-grid .vendor-card-footer{
  justify-content:center !important;
  width:100% !important;
}
.vendors-directory-grid .vendor-card-follow-btn,
.vendors-directory-grid .vendor-card-meta-row{
  align-self:center !important;
}
@media (max-width:390px) {
  .vendors-directory-grid { gap:.5rem !important; }
  .vendors-directory-grid .vendor-card { min-height:138px !important; padding:.62rem !important; }
  .vendors-directory-filter-row { grid-template-columns:1fr !important; }
}

/* Customer requests is an action/hand icon, not a generic circle. */
#profilePanel .profile-nav-link[data-profile-label="Requests"] .profile-item-icon i {
  color:var(--text-muted) !important;
}

/* ================================================================
   NORMAL CHAT, WhatsApp-like image sizing and tighter bubbles
   ================================================================ */
.chat-page-wrap .chat-bubble-wrap {
  max-width: min(72%, 22rem) !important;
}
.chat-page-wrap .chat-bubble {
  max-width:100% !important;
  padding:.42rem .65rem !important;
  font-size:.84rem !important;
  line-height:1.35 !important;
  border-radius:12px !important;
}
.chat-page-wrap .chat-image-attachment {
  width:auto !important;
  max-width:min(230px,62vw) !important;
  margin:.12rem 0 !important;
  border-radius:10px !important;
}
.chat-page-wrap .chat-image-attachment .msg-attachment-img {
  display:block !important;
  width:auto !important;
  max-width:min(230px,62vw) !important;
  max-height:230px !important;
  height:auto !important;
  object-fit:cover !important;
  border-radius:10px !important;
}
.chat-page-wrap .chat-bubble.photo-only,
.chat-page-wrap .chat-bubble:has(.chat-image-attachment) {
  padding:.05rem !important;
}
@media(max-width:430px){
  .chat-page-wrap .chat-bubble-wrap { max-width:76% !important; }
  .chat-page-wrap .chat-image-attachment,
  .chat-page-wrap .chat-image-attachment .msg-attachment-img {
    max-width:200px !important;
    max-height:200px !important;
  }
}

/* Application button should never accidentally behave like a form submit. */
#vendorApplySubmitBtn { width:100% !important; }
#vendorApplySubmitBtn.is-busy { opacity:.65 !important; pointer-events:none !important; }
/* ---- levromart-vendor-location-auto-style ---- */
  #vendorApplyLocationStatus{
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    padding:.65rem .75rem;
    margin:.35rem 0 .65rem;
    border:1px solid var(--border);
    border-radius:.75rem;
    background:color-mix(in srgb,var(--primary) 5%,var(--card));
    font-size:.76rem;
    line-height:1.4;
  }
  #vendorApplyLocationStatus i{color:var(--primary);margin-top:.12rem;flex:0 0 auto;}
  #vendorApplyLocationStatus.is-ok{border-color:color-mix(in srgb,var(--success) 35%,var(--border));}
  #vendorApplyLocationStatus.is-ok i{color:var(--success);}
  #vendorApplyLocationStatus.is-error{border-color:color-mix(in srgb,var(--danger) 35%,var(--border));}
  #vendorApplyLocationStatus.is-error i{color:var(--danger);}
/* ---- levromart-2026-09-09-final-card-map-drawer-fixes ---- */
@media (max-width:720px){
  .top-rated-vendors-scroll { gap: .85rem !important; padding:.45rem .25rem .8rem !important; }
  /* legacy Top-rated Vendor sizing removed */
  .top-rated-vendors-scroll .vendor-card { min-height:140px !important; padding:.65rem !important; }
}

/* Map must have breathing room from the controls and must not be painted as a
   translucent/blurred surface while Leaflet is calculating its dimensions. */
#vendorsMapWrap { position:relative !important; isolation:isolate !important; }
#vendorsMap { filter:none !important; opacity:1 !important; transform:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#vendorsMap.leaflet-container { filter:none !important; opacity:1 !important; }

/* Never let the drawer gesture steal a touch that belongs to a map or a
   horizontally scrollable listing rail. */
#vendorsMap, #vendorsMapWrap, #veMap, .leaflet, .leaflet-container, .hscroll, .cat-row, .storefront-product-strip { touch-action:pan-x pan-y !important; }
/* ---- levromart-admin-vendor-action-touch-style ---- */
#app .vendor-admin-action{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
}
#app .vendor-admin-action:disabled{
  opacity:.65;
  cursor:wait;
}
/* ---- levromart-2026-09-09-accent-and-media-controls ---- */
  /* The selected Mint accent is the built-in Levromart default. All live accent
     surfaces still use the existing --primary variables, so user-selected
     colours continue to work without changing component markup. */
  .avatar-edit-wrap { position: relative; }
  .avatar-remove-badge, .vendor-logo-remove {
    position: absolute; right: -0.15rem; bottom: -0.15rem;
    width: 1.65rem; height: 1.65rem; border-radius: 50%;
    border: 2px solid var(--card); background: color-mix(in srgb, var(--danger) 86%, #000 8%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .72rem; z-index: 6; box-shadow: 0 4px 12px rgba(0,0,0,.22);
  }
  .avatar-remove-badge { right: -0.25rem; }
  .avatar-remove-badge:hover, .vendor-logo-remove:hover { filter: brightness(1.08); transform: scale(1.04); }
  .storefront-cover-remove {
    position:absolute; right:.75rem; bottom:.75rem; z-index:6;
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
    background:rgba(127,29,29,.78); color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .storefront-cover-remove:hover { background:rgba(127,29,29,.94); }
  .service-trending-scroll { gap: 1rem !important; }
  .service-trending-scroll > * { flex: 0 0 250px !important; width:250px !important; }
  .package-recommendation-strip { gap: 1rem !important; }
  .package-recommendation-strip > * { flex: 0 0 270px !important; width:270px !important; }
  .package-recommendation-strip .package-listing-card,
  /* Removed fixed 330px min-height: it forced every card in the rail to that
     height regardless of actual content, leaving dead space under shorter
     cards. The rail's default flex align-items:stretch already equalizes
     card heights to the tallest real card without an arbitrary floor. */
  .package-recommendation-strip .package-card { min-height: 0; }
  @media (max-width:720px){
    .package-recommendation-strip > * { flex-basis:260px !important; width:260px !important; }
    .service-trending-scroll > * { flex-basis:245px !important; width:245px !important; }
  }
/* ---- levromart-consolidated-fixes ---- */
/* Product prices: make a real discount visually obvious without changing the
   underlying product data or checkout logic. */
.product-old-price{ text-decoration:line-through !important; opacity:.58 !important; margin-right:.25rem !important; }
.product-current-price{ color:var(--primary) !important; font-weight:800 !important; }
.product-discount-price{ display:inline !important; }
.product-card-price-block{ min-height:1.55rem !important; }

/* Every product card in a grid has the same height; the content itself can
   still breathe, while the action button remains anchored at the bottom. */
.grid:has(.product-card-wrap){ align-items:stretch !important; }
.grid:has(.product-card-wrap) .product-card-wrap{ height:100% !important; min-width:0 !important; }
.grid:has(.product-card-wrap) .product-card-wrap > .card{ height:100% !important; min-height:0 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; }
.grid:has(.product-card-wrap) .product-card-price-block{ flex:0 0 auto !important; }
.grid:has(.product-card-wrap) .product-card-wrap > .card > .card-cart-btn,
.grid:has(.product-card-wrap) .product-card-wrap > .card > .card-service-btn{ margin-top:auto !important; }

/* Vendor directory map mode: a compact horizontal vendor rail above the map,
   exactly like a product rail rather than a wall of static cards. */
.vendors-map-vendor-rail{ display:flex !important; gap:.65rem !important; overflow-x:auto !important; overscroll-behavior-x:contain !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; padding:.25rem .1rem .75rem !important; margin:.1rem 0 .35rem !important; scroll-snap-type:x proximity !important; }
.vendors-map-vendor-rail::-webkit-scrollbar{display:none !important;}
.vendors-map-vendor-chip{ flex:0 0 210px !important; min-width:210px !important; scroll-snap-align:start !important; display:flex !important; align-items:center !important; gap:.6rem !important; padding:.65rem .72rem !important; border:1px solid var(--border) !important; border-radius:14px !important; background:var(--card) !important; box-shadow:var(--shadow-float) !important; text-align:left !important; cursor:pointer !important; }
.vendors-map-vendor-chip img,.vendors-map-vendor-chip .avatar-circle{ width:2.3rem !important; height:2.3rem !important; flex:0 0 2.3rem !important; object-fit:cover !important; }
.vendors-map-vendor-chip-copy{ min-width:0 !important; flex:1 !important; }
.vendors-map-vendor-chip-copy strong{ display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; font-size:.86rem !important; }
.vendors-map-vendor-chip-copy small{ display:block !important; color:var(--text-muted) !important; margin-top:.12rem !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.vendors-map-vendor-chip-action{ flex:0 0 auto !important; color:var(--primary) !important; font-size:.72rem !important; font-weight:750 !important; }
.vendors-map-vendor-rail-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.5rem !important; margin:.25rem 0 .2rem !important; }
.vendors-map-vendor-rail-head strong{font-size:.95rem !important;}
.vendors-map-vendor-rail-head button{border:0;background:none;color:var(--primary);font-weight:750;cursor:pointer;padding:.25rem .1rem;}

/* The map must never keep a Leaflet instance attached to an old #vendorsMap
   after SPA navigation. */
#vendorsMap{ min-height:280px !important; }

/* Swipe-to-reply: more deliberate visual affordance and a smoother track. */
.chat-bubble-wrap{ overflow:visible !important; }
.chat-bubble-wrap.chat-swipe-active .chat-bubble{ transition:none !important; will-change:transform !important; }
.chat-bubble-wrap.chat-swipe-active::before{ content:'↩'; position:absolute; left:-2rem; top:50%; transform:translateY(-50%); width:1.65rem; height:1.65rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--primary) 14%,var(--card)); color:var(--primary); font-weight:800; opacity:.9; pointer-events:none; }
.chat-bubble-wrap.chat-swipe-reply .chat-bubble{ animation:levroChatReplySnap .22s cubic-bezier(.2,.8,.2,1) !important; }
@keyframes levroChatReplySnap{0%{transform:translateX(0)}45%{transform:translateX(8px)}100%{transform:translateX(0)}}

/* A grouped notification is one compact card; its messages expand in-place. */
.notif-group{ border:1px solid var(--border); border-radius:.8rem; background:var(--card); margin-bottom:.5rem; overflow:hidden; }
.notif-group-head{ width:100%; border:0; background:transparent; color:var(--text); display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .65rem; text-align:left; cursor:pointer; }
.notif-group-head:hover{background:color-mix(in srgb,var(--primary) 7%,transparent);}
.notif-group-copy{min-width:0;flex:1;}
.notif-group-copy strong{display:block;line-height:1.25;}
.notif-group-copy .muted{display:block;margin-top:.15rem;line-height:1.35;}
.notif-group-chevron{flex:0 0 auto;color:var(--text-muted);transition:transform .18s ease;margin-top:.15rem;}
.notif-group.open .notif-group-chevron{transform:rotate(180deg);}
.notif-group-body{display:none;border-top:1px solid var(--border);padding:.25rem .55rem .45rem;}
.notif-group.open .notif-group-body{display:block;}
.notif-group-message{padding:.55rem .15rem;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);cursor:pointer;}
.notif-group-message:last-child{border-bottom:0;}
.notif-group-message strong{font-size:.78rem;display:block;}
.notif-group-message span{font-size:.76rem;display:block;margin-top:.12rem;}

/* Add-listing chooser. */
#addListingChooser .modal-content{max-width:460px !important;}
.add-listing-choice{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:14px;padding:.9rem;cursor:pointer;margin-top:.55rem;}
.add-listing-choice:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card));}
.add-listing-choice i{width:2.4rem;height:2.4rem;border-radius:.75rem;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 2.4rem;}
.add-listing-choice-copy{min-width:0;}
.add-listing-choice-copy strong{display:block;font-size:.95rem;}
.add-listing-choice-copy small{display:block;color:var(--text-muted);margin-top:.15rem;line-height:1.3;}
/* ---- storefront-distance-link-style ---- */
.storefront-distance-link{display:inline-flex;align-items:center;gap:.28rem;border:0;background:transparent;color:var(--primary);font:inherit;font-size:.78rem;font-weight:700;padding:0;cursor:pointer;text-decoration:none;}
.storefront-distance-link:hover{text-decoration:underline;}
.storefront-distance-link:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:3px;border-radius:5px;}
/* ---- levromart-final-marketplace-polish ---- */
.vendor-directory-logo{width:2.9rem !important;height:2.9rem !important;min-width:2.9rem !important;min-height:2.9rem !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:50% !important;font-size:1rem !important;font-weight:800 !important;overflow:hidden !important;}
#vendorsGrid .vendor-card{padding:.72rem !important;border-radius:14px !important;}
.product-delivery-summary{margin:.32rem 0 0 !important;font-size:.76rem !important;color:var(--text-muted) !important;display:flex !important;align-items:center !important;gap:.32rem !important;line-height:1.25 !important;}
.product-delivery-summary i{color:var(--primary) !important;flex:0 0 auto !important;}
.manual-payment-modal .modal-content{max-width:430px !important;}
.manual-payment-account{border:1px solid var(--border);border-radius:14px;padding:.85rem;background:color-mix(in srgb,var(--primary) 6%,var(--card));}
.manual-payment-account-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.45rem 0;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);}
.manual-payment-account-row:last-child{border-bottom:0;}
.manual-payment-account-row strong{min-width:0;overflow-wrap:anywhere;}
.manual-payment-copy-btn{flex:0 0 auto;width:1.9rem;height:1.9rem;min-width:1.9rem;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;cursor:pointer;}
.manual-payment-copy-btn:hover{background:color-mix(in srgb,var(--primary) 10%,var(--card));}

/* Flat blue visual cue for the remaining-balance delivery payment. */
.delivery-balance-payment-card{
  border:1px solid rgba(37,99,235,.58) !important;
  background:color-mix(in srgb,#2563eb 7%,var(--card)) !important;
  background-image:none !important;
  box-shadow:0 6px 20px rgba(37,99,235,.10) !important;
}
.delivery-balance-payment-card .delivery-balance-payment-copy strong{color:#2563eb !important;}
.delivery-balance-direct-btn,.delivery-balance-manual-btn{
  background:#2563eb !important;
  background-image:none !important;
  border:1px solid #2563eb !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(37,99,235,.22) !important;
}
.delivery-balance-direct-btn:hover,.delivery-balance-manual-btn:hover{background:#1d4ed8 !important;filter:none !important;}
.delivery-balance-paystack-btn{
  color:#2563eb !important;
  border-color:#2563eb !important;
  background:transparent !important;
  background-image:none !important;
}
@media(max-width:560px){#vendorsGrid .vendor-card{padding:.62rem !important}.vendor-directory-logo{width:2.65rem !important;height:2.65rem !important;min-width:2.65rem !important;min-height:2.65rem !important;}}

/* Final vendor-card sizing: the same social-profile-card layout (large
   centered avatar on top, name/location/category/follow stacked below)
   in both grid and list mode -- list mode differs only in that
   grid-template-columns collapses to one column, so each card just runs
   full width instead of sharing a row with a second card. */
.vendor-card-avatar-wrap{position:relative !important;display:inline-flex !important;flex:0 0 auto !important;}
.vendor-card-verified-badge{position:absolute !important;right:-.08rem !important;bottom:-.08rem !important;width:1.1rem !important;height:1.1rem !important;border-radius:50% !important;background:var(--card) !important;box-shadow:0 0 0 2px var(--card) !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:.72rem !important;}
.vendor-card-verified-badge i{color:#16a34a !important;}
.vendors-directory-grid .vendor-card{min-height:0 !important;padding:.75rem .65rem .65rem !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:.18rem !important;}
.vendors-directory-grid .vendor-card .vendor-card-avatar-wrap,
.vendors-directory-grid .vendor-card .vendor-directory-logo{width:3.7rem !important;height:3.7rem !important;min-width:3.7rem !important;min-height:3.7rem !important;margin:0 0 .32rem !important;flex:0 0 3.7rem !important;font-size:1.3rem !important;}
.vendors-directory-grid .vendor-directory-name{font-size:.88rem !important;margin-top:0 !important;}
.vendors-directory-grid.vendors-list-mode .vendor-card .vendor-card-avatar-wrap,
.vendors-directory-grid.vendors-list-mode .vendor-card .vendor-directory-logo{width:4.4rem !important;height:4.4rem !important;min-width:4.4rem !important;min-height:4.4rem !important;flex:0 0 4.4rem !important;font-size:1.55rem !important;}
.vendors-directory-grid.vendors-list-mode .vendor-directory-name{font-size:.98rem !important;}
/* The outer card already spaces its children with a flex gap -- these
   components' own default margins were compounding on top of it, leaving
   noticeably more air between the follow button/meta row and everything
   around them than between any other two lines on the card. */
.vendors-directory-grid .vendor-card-follow-btn{margin-top:.1rem !important;padding:.26rem .8rem !important;font-size:.68rem !important;}
.vendors-directory-grid .vendor-card-meta-row{margin-top:.1rem !important;}
.vendors-directory-grid .vendor-directory-city,
.vendors-directory-grid .vendor-directory-categories{margin:0 !important;}
.vendors-directory-grid.vendors-list-mode .vendor-card-meta-row{max-width:280px !important;}
/* legacy Top-rated Vendor sizing removed */
/* legacy Top-rated Vendor row layout removed */
.vendors-map-vendor-chip{flex-basis:196px !important;min-width:196px !important;padding:.55rem .62rem !important;}
.vendors-map-vendor-chip img,.vendors-map-vendor-chip .avatar-circle{width:2.8rem !important;height:2.8rem !important;flex-basis:2.8rem !important;font-size:1rem !important;font-weight:800 !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:50% !important;}
/* Payout bank picker: searchable, alphabetical, mobile-friendly and consistent
   with Levromart's existing glass/card visual language. */
.bank-picker-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.78rem .9rem;margin:.3rem 0 .5rem;border:1px solid var(--border);
  border-radius:.85rem;background:color-mix(in srgb,var(--primary) 3%,var(--input-bg));
  color:var(--text);font:inherit;text-align:left;cursor:pointer;
}
.bank-picker-trigger:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));box-shadow:0 2px 10px color-mix(in srgb,var(--primary) 10%,transparent);}
.bank-picker-trigger > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bank-picker-trigger > i{color:var(--text-muted);flex:0 0 auto;}
.vendor-bank-picker-modal{z-index:310;padding:1rem;}
.vendor-bank-picker-content{width:min(520px,100%);max-height:min(82vh,720px);padding:1rem;overflow:hidden;display:flex;flex-direction:column;}
.vendor-bank-picker-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.8rem;}
.vendor-bank-picker-title{display:flex;align-items:center;gap:.55rem;font-size:1.05rem;font-weight:800;}
.vendor-bank-picker-title i{color:var(--primary);}
.vendor-bank-search-wrap{position:relative;margin-bottom:.65rem;}
.vendor-bank-search-wrap > i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.vendor-bank-search{width:100%;margin:0;padding:.72rem .8rem .72rem 3.05rem!important;border-radius:.8rem;background:var(--input-bg);}
.vendor-bank-picker-list{overflow-y:auto;min-height:0;padding-right:.1rem;}
.vendor-bank-option{width:100%;display:flex;align-items:center;gap:.7rem;padding:.72rem .65rem;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);text-align:left;cursor:pointer;}
.vendor-bank-option:hover,.vendor-bank-option.selected{background:color-mix(in srgb,var(--primary) 9%,transparent);}
.vendor-bank-option-icon{width:2rem;height:2rem;flex:0 0 2rem;border-radius:.65rem;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);}
.vendor-bank-option-main{min-width:0;display:flex;flex-direction:column;gap:.1rem;flex:1;}
.vendor-bank-option-main strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vendor-bank-option-main small{font-size:.7rem;color:var(--text-muted);}
.vendor-bank-option-check{color:var(--primary);flex:0 0 auto;}
.vendor-bank-option-arrow{color:var(--text-muted);font-size:.7rem;flex:0 0 auto;}
.payout-active-banner{line-height:1.45;}
@media(max-width:560px){
  .vendor-bank-picker-content{max-height:86vh;border-radius:1.1rem;padding:.85rem;}
  .vendor-bank-option{padding:.78rem .5rem;}
}
/* ---- levromart-final-2026-09-09-ui-polish-v2 ---- */
/* PRODUCT GRID, compact, square cards with predictable text flow */
@media (max-width: 900px){
  #app .grid:has(> .product-card-wrap){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.65rem !important;}
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap{height:auto !important;min-height:0 !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card{
  aspect-ratio:1/1 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  padding:.58rem !important;
  border-radius:14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-img{
  flex:0 0 41% !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card h4{
  font-size:.82rem !important;line-height:1.15 !important;margin:.42rem 0 .18rem !important;
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-card-price-block{
  margin:.28rem 0 !important;min-height:0 !important;font-size:.76rem !important;line-height:1.22 !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-card-price-block > span{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex{min-height:1.2rem !important;align-items:center !important;gap:.25rem !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex .badge{font-size:.64rem !important;padding:.18rem .35rem !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex span:last-child{font-size:.67rem !important;max-width:58% !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > p.muted{margin:.18rem 0 0 !important;font-size:.67rem !important;line-height:1.18 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-delivery-summary{margin:.18rem 0 0 !important;font-size:.64rem !important;line-height:1.18 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .card-cart-btn,
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .card-service-btn{position:absolute !important;top:auto !important;left:auto !important;right:.48rem !important;bottom:.48rem !important;width:2rem !important;height:2rem !important;min-width:2rem !important;min-height:2rem !important;border-radius:50% !important;padding:0 !important;z-index:3 !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .own-listing-badge{position:absolute !important;right:.4rem !important;bottom:.4rem !important;font-size:.58rem !important;max-width:48% !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .fav-btn{z-index:6 !important;}
.product-old-price{font-size:.72rem !important;margin-right:.18rem !important;}
.product-current-price{font-size:.82rem !important;}

/* TOP VENDOR RAIL, smaller cards, large uniform profile circles */
.top-rated-vendors-scroll{gap:.55rem !important;padding:.25rem .1rem .55rem !important;}
/* Was a fixed height:92px, which clipped the categories/delivery line and
   made these cards look nearly empty (just avatar + name + city visible). */
/* legacy Top-rated Vendor sizing removed */
.top-rated-vendors-scroll .vendor-card .vendor-directory-logo{width:3.1rem !important;height:3.1rem !important;min-width:3.1rem !important;min-height:3.1rem !important;flex:0 0 3.1rem !important;border-radius:50% !important;font-size:1.08rem !important;}
.top-rated-vendors-scroll .vendor-card .vendor-directory-copy{min-width:0 !important;flex:1 1 auto !important;overflow:hidden !important;}
.top-rated-vendors-scroll .vendor-card .vendor-directory-name{font-size:.78rem !important;line-height:1.14 !important;display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.top-rated-vendors-scroll .vendor-card .vendor-directory-city,.top-rated-vendors-scroll .vendor-card .vendor-directory-categories{font-size:.64rem !important;line-height:1.15 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.top-rated-vendors-scroll .vendor-card .badge{font-size:.58rem !important;padding:.16rem .28rem !important;margin:0 !important;}

/* MAP RAIL, compact cards, separate storefront tap from map focus */
.vendors-map-vendor-chip{flex:0 0 180px !important;min-width:180px !important;min-height:72px !important;padding:.52rem !important;}
.vendors-map-vendor-chip .vendor-directory-logo,.vendors-map-vendor-chip img,.vendors-map-vendor-chip .avatar-circle{width:2.9rem !important;height:2.9rem !important;min-width:2.9rem !important;min-height:2.9rem !important;flex:0 0 2.9rem !important;border-radius:50% !important;}
.vendors-map-vendor-chip-copy{min-width:0 !important;flex:1 1 auto !important;}
.vendors-map-vendor-chip-copy strong{font-size:.78rem !important;}
.vendors-map-vendor-chip-copy small{font-size:.63rem !important;}
/* Just the pin icon now, not a "View on map" text pill -- that text was
   eating most of this narrow card's width, truncating the vendor's own
   name down to one or two letters. The whole card is already the tap
   target, so the icon is a label, not a separate button. */
.vendors-map-vendor-chip-action{border:1px solid color-mix(in srgb,var(--primary) 38%,var(--border)) !important;border-radius:50% !important;width:1.7rem !important;height:1.7rem !important;padding:0 !important;background:color-mix(in srgb,var(--primary) 8%,transparent) !important;white-space:nowrap !important;font-size:.78rem !important;flex:0 0 1.7rem !important;}
.vendors-map-vendor-chip{cursor:pointer !important;scroll-snap-align:start !important;}
.vendors-map-vendor-chip:focus-visible{outline:2px solid var(--primary) !important;outline-offset:2px !important;}
.vendors-map-vendor-chip-action{display:inline-flex !important;align-items:center !important;justify-content:center !important;color:var(--primary) !important;}

/* CHAT, fixed WhatsApp-style header + obvious drag feedback */
.chat-page-wrap .chat-page-header{position:sticky !important;top:0 !important;z-index:80 !important;flex:0 0 auto !important;background:var(--bg) !important;}
.chat-page-wrap .chat-messages{scroll-behavior:auto !important;}
.chat-page-wrap .chat-bubble-wrap.chat-swipe-active .chat-bubble{will-change:transform !important;transition:none !important;}
.chat-page-wrap .chat-bubble-wrap.chat-swipe-active::before{left:-2.2rem !important;width:1.72rem !important;height:1.72rem !important;box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 18%,transparent) !important;}

/* Vendor verification/follower micro-badges */
.vendor-inline-verified{color:#16a34a;font-size:.72em;vertical-align:middle;}
.vendor-follower-badge{white-space:nowrap;}
.storefront-whatsapp-icon{color:#16a34a !important;}
#levromartHeaderSearchDock{z-index:90000 !important;}
#levromartHeaderSearchBackdrop{z-index:89990 !important;}
/* Notification folders */
/* ---- levromart-final-ui-polish-v3 ---- */
@media (max-width: 900px){
  #app .grid:has(> .product-card-wrap){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.62rem !important;
    align-items:stretch !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap{
    aspect-ratio:1 / 1 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:stretch !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card{
    position:relative !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    padding:.5rem !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-rows:36% auto auto auto auto 1fr !important;
    align-content:stretch !important;
    gap:0 !important;
    border-radius:14px !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-img{
    width:100% !important;height:100% !important;min-height:0 !important;flex:none !important;
    aspect-ratio:auto !important;margin:0 !important;border-radius:10px !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card h4{
    min-width:0 !important;margin:.34rem 0 .1rem !important;font-size:.78rem !important;line-height:1.12 !important;
    display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex{
    min-width:0 !important;min-height:1.05rem !important;margin:0 !important;gap:.2rem !important;align-items:center !important;overflow:hidden !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex > .flex{
    min-width:0 !important;max-width:62% !important;overflow:hidden !important;justify-content:flex-end !important;white-space:nowrap !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex .badge{
    flex:0 0 auto !important;font-size:.58rem !important;line-height:1 !important;padding:.17rem .3rem !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .flex > .flex img{
    width:1rem !important;height:1rem !important;min-width:1rem !important;min-height:1rem !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-card-price-block{
    min-width:0 !important;margin:.14rem 0 !important;font-size:.69rem !important;line-height:1.18 !important;overflow:hidden !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-card-price-block > span{
    display:block !important;min-width:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-old-price{
    font-size:.67rem !important;margin-right:.12rem !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-current-price{
    font-size:.76rem !important;font-weight:800 !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > p.muted{
    min-width:0 !important;margin:.08rem 0 0 !important;font-size:.6rem !important;line-height:1.12 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-delivery-summary{
    min-width:0 !important;margin:.08rem 0 0 !important;padding-right:2.1rem !important;font-size:.59rem !important;line-height:1.12 !important;
    display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .card-cart-btn,
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .card-service-btn{
    position:absolute !important;right:.42rem !important;bottom:.42rem !important;width:1.95rem !important;height:1.95rem !important;
    min-width:1.95rem !important;min-height:1.95rem !important;border-radius:50% !important;padding:0 !important;z-index:9 !important;
  }
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .own-listing-badge{
    position:absolute !important;right:.35rem !important;bottom:.35rem !important;max-width:48% !important;font-size:.54rem !important;
    white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  }
}
.vendors-map-vendor-chip-action{position:relative !important;z-index:3 !important;}
.chat-bubble-wrap[data-msg-wrap-id] .chat-bubble{touch-action:pan-y !important;transform-origin:center center !important;}
.chat-bubble-wrap.chat-swipe-active .chat-bubble{box-shadow:0 5px 20px color-mix(in srgb,var(--primary) 18%,transparent) !important;}
.chat-bubble-wrap.chat-swipe-active::before{opacity:1 !important;transform:translateY(-50%) scale(1) !important;}
.chat-page-wrap{display:flex !important;flex-direction:column !important;min-height:0 !important;}
.chat-page-wrap .chat-page-header{
  position:sticky !important;top:0 !important;z-index:120 !important;flex:0 0 auto !important;background:var(--bg) !important;
  backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important;
}
.chat-page-wrap .chat-messages{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;overscroll-behavior:contain !important;}