/* ---- levromart-final-2026-09-09-v4 ---- */
/* PRODUCT CARDS, compact square cards, larger image, no overlap */
@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;grid-auto-rows:1fr !important;}
/* NOTE: previously this forced aspect-ratio:1/1.12 on the whole card and
aspect-ratio:1.08/1 on the image, sized independently of the six text
fields the card actually needs room for (title, badge/vendor, price,
availability, delivery, action button). Depending on how much of those
fields a given listing actually has, that either left a lot of dead
space (short listings) or squeezed things (fuller listings). Fixing the
image to one modest height and letting the card height follow its own
content - with grid's align-items:stretch equalizing the row to the
tallest real card - fixes both without an arbitrary ratio. */
#app .grid:has(> .product-card-wrap) > .product-card-wrap{min-width:0 !important;height:auto !important;display:flex !important;}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card{height:100% !important;min-height:0 !important;display:flex !important;flex-direction:column !important;padding:.52rem !important;overflow:hidden !important;border-radius:14px !important;gap:0 !important;}
#app .grid:has(> .product-card-wrap) .product-img{height:6.5rem !important;aspect-ratio:auto !important;flex:0 0 auto !important;margin:0 !important;border-radius:10px !important;overflow:hidden !important;}
#app .grid:has(> .product-card-wrap) .product-img img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
#app .grid:has(> .product-card-wrap) .product-card-wrap h4{font-size:.78rem !important;line-height:1.12 !important;margin:.32rem 0 .12rem !important;min-height:1.75rem !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;}
#app .product-card-vendor-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:.25rem !important;min-width:0 !important;min-height:1.05rem !important;}
#app .product-card-vendor-row > .badge{font-size:.57rem !important;padding:.16rem .3rem !important;flex:0 0 auto !important;}
#app .product-card-vendor{display:flex !important;align-items:center !important;gap:.22rem !important;min-width:0 !important;max-width:62% !important;color:var(--primary) !important;font-size:.62rem !important;font-weight:700 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .product-card-vendor img,#app .product-vendor-initial{width:1rem !important;height:1rem !important;min-width:1rem !important;border-radius:50% !important;object-fit:cover !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;font-size:.46rem !important;background:color-mix(in srgb,var(--primary) 14%,transparent) !important;color:var(--primary) !important;}
#app .product-card-price-block{margin:.16rem 0 !important;font-size:.68rem !important;line-height:1.12 !important;min-height:1rem !important;overflow:hidden !important;}
#app .product-card-price-block > span{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .product-old-price{font-size:.63rem !important;margin-right:.12rem !important;}
#app .product-current-price{font-size:.78rem !important;font-weight:800 !important;color:var(--primary) !important;}
#app .product-availability{font-size:.59rem !important;line-height:1.1 !important;margin:.07rem 0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-height:.7rem !important;}
#app .product-card-delivery-wrap{min-width:0 !important;min-height:1.15rem !important;margin-top:.04rem !important;}
#app .product-card-delivery-wrap .product-delivery-summary{font-size:.58rem !important;line-height:1.08 !important;margin:0 !important;padding:0 0 0 0 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;}
#app .card-cart-btn,#app .card-service-btn{position:static !important;align-self:flex-end !important;flex:0 0 auto !important;width:1.88rem !important;height:1.88rem !important;min-width:1.88rem !important;min-height:1.88rem !important;margin-top:auto !important;border-radius:50% !important;z-index:2 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
#app .card-service-btn{pointer-events:none !important;background:color-mix(in srgb,var(--primary) 94%,transparent) !important;color:#fff !important;font-size:.72rem !important;box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 18%,transparent) !important;}
#app .own-listing-badge{align-self:flex-end !important;margin-top:auto !important;max-width:52% !important;font-size:.52rem !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
}
.vendor-home-avatar{width:3.05rem !important;height:3.05rem !important;min-width:3.05rem !important;border-radius:50% !important;object-fit:cover !important;display:flex !important;align-items:center !important;justify-content:center !important;background:color-mix(in srgb,var(--primary) 14%,var(--card)) !important;color:var(--primary) !important;font-weight:800 !important;font-size:.95rem !important;}
.vendor-home-copy{min-width:0 !important;display:flex !important;flex-direction:column !important;gap:.18rem !important;overflow:hidden !important;}
.vendor-home-copy > strong{font-size:.86rem !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.vendor-home-city{font-size:.68rem !important;color:var(--text-muted) !important;}
.vendor-home-meta{display:flex !important;gap:.2rem !important;flex-wrap:wrap !important;}
.vendor-home-meta .badge{font-size:.53rem !important;padding:.14rem .28rem !important;white-space:nowrap !important;}
.vendor-home-known{font-size:.6rem !important;color:var(--text-muted) !important;line-height:1.15 !important;display:block !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}.vendor-home-bio{opacity:.9 !important;}
/* PACKAGES, short, clean cards; the card itself opens the package */
@media (max-width:900px){
.package-recommendation-strip .package-listing-card,.package-listing-card{flex:0 0 14.5rem !important;width:14.5rem !important;min-height:0 !important;height:16.2rem !important;padding:.55rem !important;overflow:hidden !important;border-radius:13px !important;}
.package-listing-card .package-gallery{height:6.4rem !important;min-height:6.4rem !important;border-radius:9px !important;overflow:hidden !important;}
.package-listing-card .package-photo-main,.package-listing-card .package-gallery-placeholder{width:100% !important;height:100% !important;object-fit:cover !important;min-height:0 !important;}
.package-listing-card .package-card-title-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:.35rem !important;margin:.38rem 0 .12rem !important;min-width:0 !important;}
.package-listing-card .package-card-title-row strong{font-size:.78rem !important;line-height:1.1 !important;min-width:0 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;}
.package-listing-card .package-card-title-row .badge{font-size:.55rem !important;padding:.15rem .28rem !important;flex:0 0 auto !important;}
.package-card-description{font-size:.61rem !important;line-height:1.12 !important;margin:.12rem 0 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;}
.package-card-includes{font-size:.58rem !important;line-height:1.12 !important;margin:.12rem 0 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;}
.package-card-vendor,.package-card-delivery{font-size:.58rem !important;line-height:1.1 !important;margin:.1rem 0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.package-card-owner-badge{display:block !important;margin-left:auto !important;margin-top:.12rem !important;width:fit-content !important;max-width:70% !important;font-size:.52rem !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
}
/* CHAT, the header stays visible while only the messages area scrolls */
.chat-page-wrap{height:100dvh !important;max-height:100dvh !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;}
.chat-page-wrap .chat-page-header{position:sticky !important;top:0 !important;z-index:1000 !important;flex:0 0 auto !important;}
.chat-page-wrap .chat-thread{flex:1 1 auto !important;height:auto !important;min-height:0 !important;overflow:hidden !important;}
.chat-page-wrap .chat-messages{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;}
/* EASY WHATSAPP-LIKE DRAG REPLY */
.chat-bubble-wrap[data-msg-wrap-id] .chat-bubble{touch-action:pan-y !important;transition:transform .08s linear !important;}
.chat-bubble-wrap.chat-swipe-active .chat-bubble{transition:none !important;will-change:transform !important;}
/* The reply arrow grows and fades in as you drag instead of snapping to
full size the instant the gesture is recognised -- that binary jump made
the whole gesture feel dead/unresponsive even though the bubble itself
was tracking the finger underneath it. --swipe-progress is written by
setupMessageSwipeReply on every pointermove, 0 to 1. */
.chat-bubble-wrap.chat-swipe-active::before{
opacity:var(--swipe-progress,0) !important;
transform:translateY(-50%) scale(calc(.55 + .45 * var(--swipe-progress,0))) !important;
}
/* Notifications: one row per conversation, with an explicit "multiple messages" label. */
.notif-message-summary{display:flex !important;align-items:center !important;gap:.7rem !important;width:100% !important;padding:.74rem .7rem !important;border-radius:.8rem !important;background:var(--card) !important;border:1px solid var(--border) !important;color:var(--text) !important;text-align:left !important;cursor:pointer !important;box-sizing:border-box !important;}
.notif-message-summary:hover{background:color-mix(in srgb,var(--primary) 8%,var(--card)) !important;}
.notif-message-summary .notif-summary-avatar{width:2.25rem !important;height:2.25rem !important;min-width:2.25rem !important;border-radius:50% !important;object-fit:cover !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background:color-mix(in srgb,var(--primary) 14%,transparent) !important;color:var(--primary) !important;font-weight:800 !important;}
.notif-message-summary-copy{min-width:0 !important;flex:1 !important;display:flex !important;flex-direction:column !important;gap:.14rem !important;}
.notif-message-summary-title{font-weight:800 !important;font-size:.86rem !important;line-height:1.2 !important;}
.notif-message-summary-sub{font-size:.7rem !important;color:var(--text-muted) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.notif-message-summary-count{font-size:.69rem !important;color:var(--primary) !important;font-weight:700 !important;}
.notif-message-summary.unread{border-color:color-mix(in srgb,var(--primary) 32%,var(--border)) !important;background:color-mix(in srgb,var(--primary) 6%,var(--card)) !important;}
/* ---- levromart-final-qa-20260909 ---- */
/* PRODUCT CARDS, restore the pre-square card length exactly: two columns,
natural content height, compact 6.5rem image. Delivery remains visible and
the service/cart action gets its own row so it can never cover text. */
@media (max-width:640px){
#app .grid:has(> .product-card-wrap){
grid-template-columns:repeat(2,1fr) !important;
gap:.6rem !important;
align-items:stretch !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap{
aspect-ratio:auto !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{
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
padding:.6rem !important;
padding-bottom:2.85rem !important;
display:flex !important;
flex-direction:column !important;
gap:0 !important;
overflow:hidden !important;
border-radius:.8rem !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-img{
width:100% !important;
height:6.5rem !important;
min-height:6.5rem !important;
max-height:6.5rem !important;
aspect-ratio:auto !important;
flex:0 0 6.5rem !important;
margin:0 !important;
border-radius:.4rem !important;
overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-img img{
width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card h4{
font-size:.8rem !important;line-height:1.25 !important;margin:.45rem 0 .15rem !important;
min-height:0 !important;max-height:2.5em !important;display:-webkit-box !important;
-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) .product-card-vendor-row{
min-height:1.15rem !important;display:flex !important;align-items:center !important;
justify-content:space-between !important;gap:.25rem !important;overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) .product-card-vendor{
min-width:0 !important;max-width:62% !important;white-space:nowrap !important;
overflow:hidden !important;text-overflow:ellipsis !important;font-size:.64rem !important;
}
#app .grid:has(> .product-card-wrap) .product-card-vendor img,
#app .grid:has(> .product-card-wrap) .product-vendor-initial{
width:1.05rem !important;height:1.05rem !important;min-width:1.05rem !important;
border-radius:50% !important;object-fit:cover !important;display:inline-flex !important;
align-items:center !important;justify-content:center !important;font-size:.46rem !important;
}
#app .grid:has(> .product-card-wrap) .product-card-price-block{
min-height:0 !important;margin:.3rem 0 .2rem !important;font-size:.78rem !important;
line-height:1.2 !important;overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) .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-old-price{font-size:.72rem !important;margin-right:.15rem !important;}
#app .grid:has(> .product-card-wrap) .product-current-price{font-size:.82rem !important;font-weight:800 !important;color:var(--primary) !important;}
#app .grid:has(> .product-card-wrap) .product-availability,
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > p.muted{
font-size:.66rem !important;line-height:1.2 !important;margin:.2rem 0 0 !important;
white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
#app .grid:has(> .product-card-wrap) .product-card-delivery-wrap{
min-width:0 !important;min-height:1.65rem !important;margin:.18rem 0 0 !important;
padding-right:0 !important;overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) .product-delivery-summary{
margin:0 !important;padding:0 !important;font-size:.64rem !important;line-height:1.2 !important;
display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) .product-card-action-row{
display:flex !important;align-items:center !important;justify-content:flex-end !important;
min-height:2rem !important;margin-top:.35rem !important;position:relative !important;
}
#app .grid:has(> .product-card-wrap) .card-cart-btn,
#app .grid:has(> .product-card-wrap) .card-service-btn{
position:static !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
width:2rem !important;height:2rem !important;min-width:2rem !important;min-height:2rem !important;
margin:0 !important;border-radius:50% !important;flex:0 0 2rem !important;z-index:2 !important;
}
#app .grid:has(> .product-card-wrap) .card-service-btn{pointer-events:none !important;}
#app .grid:has(> .product-card-wrap) .own-listing-badge{margin:0 !important;max-width:72% !important;}
}
/* HOMEPAGE VENDOR AVATARS, one large, consistent circle, including vendors
with no uploaded picture. */
.vendor-home-avatar,
.vendors-map-vendor-chip .vendor-directory-logo,
.vendors-map-vendor-chip .avatar-circle{
width:3rem !important;height:3rem !important;min-width:3rem !important;min-height:3rem !important;
flex:0 0 3rem !important;border-radius:50% !important;display:inline-flex !important;
align-items:center !important;justify-content:center !important;object-fit:cover !important;
overflow:hidden !important;font-size:1.05rem !important;font-weight:800 !important;
}
/* MAP VENDOR RAIL, clicking the chip opens the storefront; clicking View on
map focuses the exact marker and starts the route trace. */
.vendors-map-vendor-chip{position:relative !important;overflow:hidden !important;}
.vendors-map-vendor-chip-action{position:relative !important;z-index:4 !important;white-space:nowrap !important;}
/* Animated route: the line continuously flows and gently pulses instead of
drawing once and becoming visually dead. The actual stroke colour is still
the user's current accent colour, assigned by JS. */
.levro-vendor-route-path{
stroke-dasharray:14 10 !important;
animation:levroRouteFlow 1.15s linear infinite, levroRoutePulse 1.8s ease-in-out infinite !important;
transform-box:fill-box !important;
transform-origin:center !important;
}
@keyframes levroRouteFlow{to{stroke-dashoffset:-48px;}}
@keyframes levroRoutePulse{0%,100%{opacity:.78;stroke-width:4;}50%{opacity:1;stroke-width:5;}}
@media(prefers-reduced-motion:reduce){.levro-vendor-route-path{animation:none !important;}}
/* PACKAGE CARDS, restore the original longer package-card proportions; the
redundant View package button is still absent because the card itself opens. */
.package-recommendation-strip > .package-listing-card,
.package-recommendation-strip > .card{
flex:0 0 270px !important;width:270px !important;min-width:270px !important;max-width:270px !important;
}
.package-recommendation-strip .package-listing-card,
.package-recommendation-strip .package-card{min-height:0 !important;height:auto !important;max-height:none !important;}
@media(max-width:720px){
.package-recommendation-strip > .package-listing-card,
.package-recommendation-strip > .card{flex-basis:260px !important;width:260px !important;min-width:260px !important;}
.package-recommendation-strip .package-listing-card,
.package-recommendation-strip .package-card{min-height:0 !important;}
}
/* CHAT, only the message list scrolls; header and composer stay anchored like
WhatsApp, including while the software keyboard is open. */
body.chat-full-page{height:100dvh !important;overflow:hidden !important;}
.chat-page-wrap{height:100dvh !important;max-height:100dvh !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;}
.chat-page-wrap .chat-page-header{position:sticky !important;top:0 !important;z-index:1000 !important;flex:0 0 auto !important;}
.chat-page-wrap .chat-thread{flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;}
.chat-page-wrap .chat-messages{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;}
.chat-page-wrap .chat-input-row{flex:0 0 auto !important;}
/* The service marker is no longer allowed to sit on top of delivery text. */
.product-card-action-row .card-service-btn,.product-card-action-row .card-cart-btn{position:static !important;}
/* No stale notification-folder UI can survive a re-render. */
.notif-message-summary{cursor:pointer !important;}
/* ---- levromart-final-user-fixes-20260909 ---- */
.orders-perspective-badge{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-width:1.1rem !important;height:1.1rem !important;padding:0 .3rem !important;border-radius:999px !important;background:#ef4444 !important;color:#fff !important;font-size:.62rem !important;font-weight:800 !important;line-height:1 !important;margin-left:.2rem !important;vertical-align:middle !important;}
.chat-page-wrap .chat-page-header{position:sticky !important;top:0 !important;z-index:3000 !important;flex:0 0 auto !important;transform:translateZ(0) !important;}
.chat-page-wrap .chat-thread{min-height:0 !important;overflow:hidden !important;}
.chat-page-wrap .chat-input-row{flex:0 0 auto !important;position:relative !important;z-index:3001 !important;}
/* ---- levromart-mobile-feedback-20260910 ---- */
/* --- 2) Browse-everything product/service/package cards --- */
#app .grid:has(> .product-card-wrap){
align-items:start !important;
grid-auto-rows:auto !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{
height:auto !important;
min-height:0 !important;
padding:.55rem .55rem 2.3rem !important;
}
#app .grid:has(> .product-card-wrap) .product-img{
aspect-ratio:1 / 1 !important;
height:auto !important;
width:100% !important;
}
#app .grid:has(> .product-card-wrap) .product-img img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !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;
bottom:.5rem !important; right:.5rem !important;
}
/* ---- levromart-2026-09-10-user-fixes ---- */
/* ==========================================================================
BROWSE EVERYTHING, product cards.
The previous pass (levromart-final-2026-09-09-v4) deliberately let each
card's height follow its own content, but paired that with
grid-auto-rows:1fr + align-items:stretch on the grid -- which stretches
every card in a row to match its TALLEST neighbour. A short listing next
to a long one ends up with a big dead gap between its content and the
cart button, which is exactly the "excess space under the card" being
reported. Removing the stretch and giving the card a fixed, near-square
footprint (like the trending-row cards already use) fixes the gap and
makes every card the same compact size regardless of its neighbour.
========================================================================== */
@media (max-width: 900px) {
#app .grid:has(> .product-card-wrap) {
grid-auto-rows: auto !important;
align-items: start !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap {
height: auto !important;
}
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card {
/* A fixed aspect-ratio + overflow:hidden was clipping the cart button
and "Your listing" badge on some cards -- the ratio was tuned to the
shortest possible card content, not the tallest. Using min-height
instead of a hard aspect-ratio keeps the compact, near-square look
for most cards while letting a card with more to show (rental price
line, longer delivery text) simply grow a little taller instead of
having its bottom row sliced off. overflow is visible so nothing is
ever cropped.
*/
height: auto !important;
min-height: 12.6rem !important;
aspect-ratio: unset !important;
display: flex !important;
flex-direction: column !important;
padding: 0.5rem !important;
overflow: visible !important;
}
#app .grid:has(> .product-card-wrap) .product-img {
height: 5.4rem !important;
min-height: 5.4rem !important;
max-height: 5.4rem !important;
flex: 0 0 auto !important;
}
#app .grid:has(> .product-card-wrap) .product-card-wrap h4 {
min-height: 0 !important;
margin: 0.26rem 0 0.08rem !important;
}
#app .grid:has(> .product-card-wrap) .product-availability {
display: block !important;
margin: .12rem 0 0 !important;
font-size: .66rem !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: var(--text-muted) !important;
}
#app .grid:has(> .product-card-wrap) .product-availability i {
color: var(--primary) !important;
margin-right: .12rem !important;
}
#app .grid:has(> .product-card-wrap) .product-card-delivery-wrap .product-delivery-summary {
-webkit-line-clamp: 1 !important;
}
#app .grid:has(> .product-card-wrap) .product-card-action-row {
min-height: 2.1rem !important;
margin-top: auto !important;
display: flex !important;
align-items: flex-end !important;
}
#app .grid:has(> .product-card-wrap) .card-cart-btn,
#app .grid:has(> .product-card-wrap) .card-service-btn,
#app .grid:has(> .product-card-wrap) .own-listing-badge {
position: static !important; /* was absolutely positioned in some rules, which is how it got clipped by an ancestor's overflow */
}
}
/* ==========================================================================
TOP-RATED VENDORS, narrower, centered "standing rectangle" card.
The sizing and layout for this rail are owned by the single canonical rule below.
========================================================================== */
#app .vendor-home-avatar {
width: 2.7rem !important;
height: 2.7rem !important;
min-width: 2.7rem !important;
}
#app .vendor-home-copy {
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
#app .vendor-home-copy > strong {
white-space: normal !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
line-height: 1.2 !important;
font-size: 0.8rem !important;
}
#app .vendor-home-meta {
justify-content: center !important;
flex-wrap: wrap !important;
}
#app .vendor-home-known {
white-space: normal !important;
text-align: center !important;
-webkit-line-clamp: 2 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
}
/* ==========================================================================
CHAT HEADER, stay put when the on-screen keyboard opens.
The header was already position:sticky, which is correct once the layout
viewport itself shrinks for the keyboard -- but nothing told the browser
to actually shrink the layout viewport, so Chrome/Android was only
resizing the *visual* viewport and panning the page to keep the focused
input visible, which drags a position:fixed/sticky element along with it
and reads as "the header disappears". The real fix is the
interactive-widget=resizes-content addition to the tag
above, which makes 100dvh (used below) actually shrink with the keyboard
instead of being panned past. This block just keeps the header pinned
once that's true, as a second line of defence.
========================================================================== */
.chat-page-wrap {
height: 100dvh !important;
max-height: 100dvh !important;
}
.chat-page-wrap .chat-page-header {
position: sticky !important;
top: 0 !important;
z-index: 4000 !important;
flex: 0 0 auto !important;
background: var(--bg) !important;
}
/* ---- levromart-20260911-home-vendor-polish ---- */
/* Vendor navigation: four controls only, two on each side of the centered +. */
@media (max-width:720px){
#bottomNav.has-add{
grid-template-columns:minmax(0,1fr) 4.1rem minmax(0,1fr) !important;
}
#bottomNav.has-add .bn-group{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:.08rem !important;
}
#bottomNav.has-add .bn-group .bottom-nav-item{
min-width:0 !important;
width:100% !important;
}
}
/* Homepage quick actions: distinct, app-like accent colors while keeping the
flyer-inspired circular/icon-first treatment. */
#app .levro-quick-action:nth-child(1){--quick-accent:#14b8a6 !important;}
#app .levro-quick-action:nth-child(2){--quick-accent:#f59e0b !important;}
#app .levro-quick-action:nth-child(3){--quick-accent:#6366f1 !important;}
#app .levro-quick-action:nth-child(4){--quick-accent:#3fb97f !important;}
#app .levro-quick-action:nth-child(5){--quick-accent:#ef4444 !important;}
#app .levro-quick-action:nth-child(6){--quick-accent:#3b82f6 !important;}
#app .levro-quick-icon{
background:color-mix(in srgb,var(--quick-accent) 13%,var(--card)) !important;
color:var(--quick-accent) !important;
border-color:color-mix(in srgb,var(--quick-accent) 18%,var(--border)) !important;
box-shadow:0 5px 14px color-mix(in srgb,var(--quick-accent) 12%,transparent) !important;
}
#app .levro-quick-action:hover .levro-quick-icon{
background:color-mix(in srgb,var(--quick-accent) 18%,var(--card)) !important;
}
/* Bring Home's search/carousel closer to the header; avoid the excessive top
breathing room visible on mobile while preserving the existing hierarchy. */
#app:has(.levro-home-hero){margin-top:.25rem !important;}
#app .levro-home-hero{padding-top:0 !important;margin-top:0 !important;gap:.45rem !important;}
#app .levro-home-search-wrap{margin-top:-.12rem !important;}
#app .levro-home-hero .hero-search{margin-bottom:.55rem !important;}
/* Light mode navigation: readable slate rather than heavy near-black. */
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item>span:last-child,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item i,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item .bn-icon{
color:#64748b !important;
}
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item.active,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item.active>span:last-child,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item.active i,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item.active .bn-icon{
color:#64748b !important;
}
/* ---- levromart-final-product-social-ux ---- */
/* Final source-of-truth UX pass. */
.vendor-profile-setting-note{display:block;margin:.35rem 0 .9rem;padding:.65rem .75rem;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--primary) 5%,transparent);font-size:.78rem;color:var(--text-muted)}
.vendor-commission-card{max-width:520px;margin:0 auto 1rem!important;border-radius:18px!important;padding:.85rem 1rem!important}
.vendor-commission-card .commission-main{display:flex;align-items:center;gap:.65rem}
.vendor-commission-card .commission-main h3{margin:0;flex:1}
.vendor-commission-card .commission-sub{margin:.25rem 0 .6rem;font-size:.76rem}
.vendor-commission-countdown{font-variant-numeric:tabular-nums;font-weight:800;color:var(--primary)}
.vendor-commission-info{width:28px;height:28px;min-width:28px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text-muted);display:inline-grid;place-items:center;cursor:pointer}
.vendor-products-unified-tabs{display:flex;gap:.35rem;overflow-x:auto;padding:.15rem 0 .5rem;margin:.75rem 0 .65rem;scrollbar-width:none}
.vendor-products-unified-tabs::-webkit-scrollbar{display:none}
.vendor-products-unified-tabs button{flex:1 0 auto;border:1px solid var(--border);background:var(--card);color:var(--text-muted);border-radius:999px;padding:.6rem .8rem;font:inherit;font-size:.78rem;font-weight:750;cursor:pointer;white-space:nowrap}
.vendor-products-unified-tabs button.active{background:var(--primary);border-color:var(--primary);color:#fff}
.vendor-drafts-panel{border:1px solid var(--border);border-radius:16px;padding:.75rem;margin:.65rem 0 1rem;background:color-mix(in srgb,var(--primary) 4%,var(--card))}
.vendor-drafts-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.55rem}
.vendor-draft-card{display:flex;align-items:center;gap:.65rem;border:1px solid var(--border);border-radius:13px;padding:.6rem;background:var(--card);margin-top:.45rem}
.vendor-draft-copy{min-width:0;flex:1}.vendor-draft-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vendor-draft-copy small{display:block;color:var(--text-muted);margin-top:.12rem}
.vendor-draft-actions{display:flex;gap:.35rem;flex:0 0 auto}
.vendor-product-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem!important}
.vendor-product-card-grid .card{min-width:0!important;padding:.65rem!important;border-radius:16px!important}
.vendor-product-card-grid .product-img{height:155px!important;border-radius:12px!important}
.vendor-product-card-grid h4{font-size:.9rem!important}
.vendor-product-card-grid p{font-size:.74rem!important}
.storefront-follow-count-button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.storefront-follow-count-button:hover{text-decoration:underline}
.followers-modal-list{display:grid;gap:.5rem;max-height:55vh;overflow:auto}.follower-row{display:flex;align-items:center;gap:.6rem;padding:.5rem;border:1px solid var(--border);border-radius:12px}.follower-row img,.follower-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}.follower-copy{min-width:0}.follower-copy strong{display:block}.follower-copy small{color:var(--text-muted)}
.vendor-unified-packages{margin-top:1rem}.vendor-unified-packages .vendor-product-card-grid{margin-top:.6rem}.vendor-unified-packages .product-img{height:145px!important;border-radius:12px}.vendor-map-locate-control{position:absolute;right:10px;top:10px;z-index:1000;width:42px;height:42px;border:0;border-radius:50%;background:var(--card);color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer;display:grid;place-items:center;font-size:1rem}
@media(max-width:520px){.vendor-product-card-grid .product-img{height:125px!important}.vendor-product-card-grid{gap:.5rem!important}.vendor-draft-card{align-items:flex-start}.vendor-draft-actions{flex-direction:column}}
/* ---- levromart-manual-monthly-payment-css ---- */
.manual-monthly-payment-modal-content{border-radius:22px!important}
.manual-monthly-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.manual-monthly-account-card{border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));background:color-mix(in srgb,var(--primary) 6%,var(--card));border-radius:16px;padding:.75rem .85rem;margin:.65rem 0}
.manual-monthly-account-row{display:grid;grid-template-columns:105px minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.58rem 0;border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent);font-size:.82rem}
.manual-monthly-account-row:last-child{border-bottom:0}.manual-monthly-account-row>span{color:var(--text-muted);font-size:.76rem}.manual-monthly-account-row strong{overflow-wrap:anywhere}.manual-monthly-account-row .btn{white-space:nowrap}
.manual-monthly-amount strong{font-size:1.05rem;color:var(--primary)}
.manual-monthly-instruction{line-height:1.55;font-size:.8rem}.manual-monthly-payment-modal-content label{display:block;margin:.7rem 0 .3rem;font-weight:700;font-size:.78rem}
.manual-monthly-payment-modal-content input[type=file]{width:100%;padding:.7rem;border:1px dashed var(--border);border-radius:12px;background:transparent;color:inherit}
.manual-monthly-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.manual-monthly-receipt-preview{margin-top:.55rem;border:1px solid var(--border);border-radius:12px;overflow:hidden;padding:.4rem}.manual-monthly-receipt-preview img{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:9px}.manual-monthly-existing-note{margin:.65rem 0;padding:.65rem .75rem;border-radius:12px;background:color-mix(in srgb,var(--primary) 8%,transparent);font-size:.76rem;color:var(--text-muted)}
.monthly-listing-admin-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.75rem 0 1rem;padding:1rem;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--card) 92%,transparent)}
.monthly-listing-admin-intro p{margin:.3rem 0 0;font-size:.78rem;max-width:680px}.monthly-admin-total-badge,.monthly-kind-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 .42rem;border-radius:999px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:800}.monthly-kind-badge.hidden{display:none}
.monthly-listing-kind-tabs{display:flex;gap:.35rem;overflow-x:auto;white-space:nowrap;padding-bottom:.2rem}.monthly-listing-kind-tabs button{border:1px solid var(--border);background:transparent;color:inherit;border-radius:12px;padding:.55rem .75rem;display:inline-flex;align-items:center;gap:.38rem;cursor:pointer}.monthly-listing-kind-tabs button.active{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}
.monthly-submission-card{margin:.7rem 0;padding:1rem}.monthly-submission-pending{border-color:color-mix(in srgb,#ef4444 42%,var(--border))}.monthly-submission-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.monthly-submission-thumb{width:76px;height:76px;border-radius:12px;object-fit:cover;border:1px solid var(--border);flex:0 0 76px}.monthly-submission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.8rem 0}.monthly-submission-grid>div{border:1px solid var(--border);border-radius:12px;padding:.62rem;min-width:0}.monthly-submission-grid span,.monthly-submission-grid small{display:block;color:var(--text-muted);font-size:.68rem}.monthly-submission-grid strong{display:block;margin:.16rem 0;font-size:.8rem;overflow-wrap:anywhere}.monthly-submission-receipt{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.monthly-submission-receipt span{display:block;font-size:.68rem;margin-top:.12rem}.monthly-submission-actions{display:flex;justify-content:flex-end;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}.monthly-review-note{font-size:.74rem}.monthly-vendor-pending-note{color:#d97706!important;font-size:.74rem!important}.monthly-vendor-rejected-note{color:#ef4444!important;font-size:.74rem!important}
@media(max-width:620px){.monthly-submission-grid{grid-template-columns:1fr}.monthly-listing-admin-intro{align-items:flex-start;flex-direction:column}.monthly-submission-head h3{font-size:1rem}.manual-monthly-account-row{grid-template-columns:82px minmax(0,1fr) auto}.manual-monthly-account-row .btn{padding:.38rem .48rem;font-size:.68rem}}
/* ---- levromart-payment-timing-ui ---- */
.product-card-payment-plan{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:2.25rem;height:1.55rem;margin:0 .15rem;font-size:.56rem;font-weight:900;letter-spacing:.03em;line-height:1;border-radius:999px;border:1px solid transparent;padding:0 .42rem;white-space:nowrap;}
.product-card-payment-plan.pay-before{background:#EAF6F0;color:#0A5C40;border-color:#5BA98A;}
.product-card-payment-plan.pay-after{background:#ffedd5;color:#c2410c;border-color:#fdba74;}
.product-card-payment-plan i{color:currentColor;}
.product-card-action-row .product-card-payment-plan{align-self:center;}
.product-payment-plan-notice{display:flex;flex-direction:column;gap:.18rem;margin:.65rem 0;padding:.72rem .8rem;border-radius:12px;border:1px solid var(--border);font-size:.82rem;line-height:1.35;}
.product-payment-plan-notice strong{display:flex;align-items:center;gap:.35rem;}
.product-payment-plan-notice.pay-before{background:#EAF6F0;border-color:#5BA98A;color:#0A5C40;}
.product-payment-plan-notice.pay-after{background:#fff7ed;border-color:#fdba74;color:#c2410c;}
/* ---- levromart-admin-inventory-nav-fix-20260917 ---- */
/* Admin top navigation: readable in both themes and centered when it fits. */
#app .admin-dash-tabs{
justify-content:center!important;align-items:stretch!important;
color:var(--text)!important;
padding-inline:.5rem!important;padding-right:.5rem!important;
gap:.55rem!important;
}
#app .admin-dash-tabs .dash-tab{
color:var(--text-muted)!important;background:transparent!important;
border-bottom:2px solid transparent!important;
margin-right:0!important;
}
#app .admin-dash-tabs .dash-tab i{color:currentColor!important}
#app .admin-dash-tabs .dash-tab:hover,#app .admin-dash-tabs .dash-tab:focus-visible{color:var(--primary)!important}
#app .admin-dash-tabs .dash-tab.active{color:var(--primary)!important;border-bottom-color:var(--primary)!important}
@media(max-width:900px){#app .admin-dash-tabs{justify-content:center!important;padding-inline:.65rem!important;padding-right:2rem!important}}
.admin-inventory-status-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin:.85rem 0 .8rem;padding:.3rem;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--card) 88%,transparent)}
.admin-inventory-status-tab{min-width:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text-muted);padding:.62rem .55rem;display:flex;align-items:center;justify-content:center;gap:.42rem;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.admin-inventory-status-tab strong{font-size:.72rem;min-width:1.45rem;height:1.45rem;padding:0 .3rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.admin-inventory-status-tab:hover{color:var(--primary)}
.admin-inventory-status-tab.active{color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--card));border-color:color-mix(in srgb,var(--primary) 25%,var(--border))}
.admin-inventory-status-tab.active strong{background:var(--primary);color:#fff}
@media(max-width:520px){.admin-inventory-status-tabs{gap:.3rem}.admin-inventory-status-tab{font-size:.68rem;padding:.58rem .3rem;gap:.3rem}.admin-inventory-status-tab strong{min-width:1.25rem;height:1.25rem;font-size:.62rem}}
/* ---- levromart-payment-admin-escalation-ui-20260917 ---- */
.payment-escalation-admin-panel{border-color:rgba(239,68,68,.25);background:color-mix(in srgb,#ef4444 4%,var(--card));}
.payment-escalation-admin-item{margin-top:.75rem;padding:.75rem;border:1px solid var(--border);border-radius:14px;background:var(--card);}
/* ---- levromart-review-prompt-20260917 ---- */
.levro-review-prompt-backdrop{position:fixed;inset:0;z-index:100900;background:rgba(0,0,0,.58);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem}
.levro-review-prompt-card{width:min(520px,calc(100vw - 2rem));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:22px;padding:1.15rem;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.levro-review-prompt-icon{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);font-size:1.35rem;margin:0 auto .7rem}
.levro-review-prompt-actions{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.lrp-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.lrp-logo{width:3.6rem;height:3.6rem;border-radius:50%;object-fit:cover}
.lrp-copy h2{margin:0;font-size:1.2rem}
.lrp-copy p{margin:.3rem 0 0;color:var(--text-muted);font-size:.9rem}
.lrp-stars{display:flex;gap:.35rem;justify-content:center;margin:.3rem 0}
.lrp-star{width:2.9rem;height:2.9rem;border:0;background:transparent;font-size:1.9rem;line-height:1;color:color-mix(in srgb,var(--text) 22%,transparent);cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
.lrp-star.on{color:#f59e0b}
.lrp-comment{width:100%;resize:none}
.lrp-error{color:#dc2626;font-size:.85rem}
/* ---- levromart-20260910-final-polish ---- */
/* Only the requested surfaces: request list/card, homepage quick actions and photo editor. */
#app .vendor-more-requests{width:min(100%,560px)!important;max-width:560px!important;margin:.42rem auto .72rem!important;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border))!important;border-radius:14px!important;background:color-mix(in srgb,var(--card) 96%,var(--primary) 4%)!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:.45rem!important;padding:.46rem .68rem!important;color:var(--text)!important;font-size:.66rem!important;font-weight:750!important}
#app .vendor-more-requests summary::-webkit-details-marker{display:none!important}
#app .vendor-more-requests summary i{color:var(--primary)!important;margin-right:.25rem!important;transition:transform .18s ease!important}
#app .vendor-more-requests[open] summary i{transform:rotate(180deg)!important}
#app .vendor-more-requests summary small{font-size:.56rem!important;color:var(--text-muted)!important;font-weight:600!important}
#app .vendor-more-requests-body{padding:.15rem .28rem .3rem!important;border-top:1px solid color-mix(in srgb,var(--primary) 10%,var(--border))!important}
#app .vendor-more-requests-body .vendor-request-card{margin:.3rem auto!important}
#app .vendor-request-card{width:100%!important;max-width:560px!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)!important;gap:.42rem!important;align-items:center!important;margin:.3rem auto!important;padding:.46rem .56rem!important;min-height:0!important;border-radius:13px!important}
#app .vendor-request-card .vendor-request-person{display:flex!important;align-items:center!important;gap:.4rem!important;min-width:0!important;align-self:start!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-identity-copy{min-width:0!important;display:flex!important;flex-direction:column!important;line-height:1.02!important}
#app .vendor-request-title{font-size:.77rem!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#app .vendor-request-buyer,#app .vendor-request-city{font-size:.57rem!important;line-height:1.06!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:.1rem!important}
#app .vendor-request-right{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:.18rem!important}
#app .vendor-request-type-badge{align-self:flex-start!important;width:max-content!important;height:1.38rem!important;min-width:2.25rem!important;padding:.14rem .45rem!important;border-radius:7px!important;font-size:.59rem!important;line-height:1!important}
#app .vendor-request-description{font-size:.57rem!important;line-height:1.05!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#app .vendor-request-card .vendor-interest-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:stretch!important;align-items:center!important;gap:.3rem!important;width:100%!important;margin:.16rem 0 0!important}
#app .vendor-request-card .vendor-interest-row .btn{flex:1 1 0!important;width:0!important;min-width:0!important;height:29px!important;min-height:29px!important;padding:.27rem .3rem!important;border-radius:8px!important;font-size:.57rem!important;line-height:1!important;white-space:nowrap!important;justify-content:center!important}
#app .vendor-request-card .vendor-offer-status{font-size:.56rem!important;line-height:1.04!important;margin:.12rem 0 0!important;text-align:left!important}
@media(max-width:480px){#app .vendor-request-card{grid-template-columns:minmax(0,.86fr) minmax(0,1.44fr)!important;padding:.42rem .48rem!important;gap:.36rem!important}#app .vendor-request-card .vendor-request-person .avatar-circle{width:2.1rem!important;height:2.1rem!important;min-width:2.1rem!important;min-height:2.1rem!important}#app .vendor-request-title{font-size:.71rem!important}#app .vendor-request-buyer,#app .vendor-request-city{font-size:.53rem!important}#app .vendor-request-type-badge{height:1.27rem!important;font-size:.55rem!important;padding:.12rem .38rem!important}#app .vendor-request-card .vendor-interest-row .btn{height:27px!important;min-height:27px!important;font-size:.54rem!important;padding:.23rem .22rem!important}}
/* Homepage: flyer-inspired 3 × 2 action grid, icon-first, light and modern. */
#app .levro-home-quick-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.72rem .35rem!important;width:min(100%,560px)!important;margin:.65rem auto 1.05rem!important;padding:.1rem .05rem!important}
#app .levro-quick-action{min-width:0!important;min-height:72px!important;padding:.16rem .12rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--text)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.3rem!important;font:inherit!important;font-size:.6rem!important;font-weight:750!important;text-align:center!important;cursor:pointer!important;transition:transform .15s ease!important}
#app .levro-quick-action:active{transform:scale(.96)!important}
#app .levro-quick-icon{width:2.65rem!important;height:2.65rem!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;background:color-mix(in srgb,var(--primary) 10%,var(--card))!important;color:var(--primary)!important;font-size:1.02rem!important;box-shadow:none!important;border:0!important}
@media(max-width:560px){#app .levro-home-quick-actions{gap:.55rem .18rem!important;margin:.5rem auto .9rem!important}#app .levro-quick-action{min-height:67px!important;font-size:.56rem!important}#app .levro-quick-icon{width:2.48rem!important;height:2.48rem!important;font-size:.96rem!important}}
/* Single-photo chat editor: compact icon tools and a clearly visible crop guide. */
#chatAttachmentEditorModal .chat-media-editor-content{width:min(94vw,620px)!important;max-width:620px!important}
#chatAttachmentEditorModal .chat-media-editor-tools{display:flex!important;align-items:center!important;justify-content:center!important;gap:.35rem!important}
#chatAttachmentEditorModal .chat-media-tool{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border-radius:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
#chatAttachmentEditorModal .chat-media-nav,#chatAttachmentEditorModal .chat-media-thumbs{display:none!important}
#chatAttachmentEditorModal .chat-media-caption span{font-size:.72rem!important}
#chatAttachmentEditorModal .chat-media-caption textarea{min-height:52px!important}
/* ---- levromart-20260911-final-ui-fixes ---- */
/* Legal links live under About; the persistent footer is intentionally absent from normal pages. */
body > footer.site-footer{display:none !important;}
.about-legal-links{display:flex;flex-direction:column;gap:.35rem;margin-top:1rem;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);text-align:left;}
.about-legal-links button{width:100%;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:1.25rem minmax(0,1fr) 1rem;align-items:center;gap:.7rem;padding:.8rem .9rem;font:inherit;text-align:left;cursor:pointer;}
.about-legal-links button+button{border-top:1px solid var(--border);}
.about-legal-links button>i:first-child{color:var(--primary);}
.about-legal-links button>i:last-child{color:var(--text-muted);font-size:.72rem;}
.about-legal-links button:hover{background:color-mix(in srgb,var(--primary) 5%,transparent);}
.vendor-products-toolbar{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:.8rem 0;}
.vendor-products-toolbar>input{margin:0!important;max-width:340px;flex:1 1 220px;}
.vendor-products-sort{display:flex;align-items:center;gap:.35rem;color:var(--text-muted);font-size:.74rem;font-weight:650;}
.vendor-products-sort select{margin:0;min-width:86px;}
.browse-filter-toolbar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(110px,.55fr) minmax(180px,1fr);gap:.55rem;align-items:end;margin-bottom:1.2rem;}
.browse-filter-toolbar>input,.browse-filter-toolbar>select,.browse-category-picker input,.browse-category-picker select{width:100%;min-width:0;}
.browse-category-picker{display:grid;grid-template-rows:auto auto;gap:.35rem;min-width:0;}
.browse-category-picker input{font-size:.78rem;padding:.55rem .7rem;}
@media(max-width:680px){.browse-filter-toolbar{grid-template-columns:1fr 1fr;}.browse-filter-toolbar>input{grid-column:1/-1;}.browse-category-picker{grid-column:1/-1;}}
/* Keep carousel pagination visually out of the promotional artwork. */
.home-promotional-carousel .home-promotional-dots{pointer-events:auto;}
/* ---- levromart-20260911-final-visual-polish-v2 ---- */
body > footer.site-footer{display:none !important;}
.home-promotional-carousel .home-promotional-dots{left:.9rem !important;right:auto !important;bottom:.65rem !important;transform:none !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:.3rem !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.home-promotional-carousel .home-promotional-dot{width:1.05rem !important;height:.3rem !important;flex:0 0 1.05rem !important;border-radius:999px !important;border:0 !important;background:rgba(255,255,255,.55) !important;padding:0 !important;}
.home-promotional-carousel .home-promotional-dot.active{width:1.6rem !important;height:.3rem !important;flex-basis:1.6rem !important;border-color:transparent !important;background:#fff !important;transform:none !important;}
.accent-page-dropdown-trigger,.accent-page-dropdown-body,#accentPaletteBody,#accentPalettePageBody,.settings-page-swatches,.accent-swatches{display:none !important;}
#app .levro-home-quick-actions .levro-quick-icon{background:var(--primary) !important;color:#fff !important;border:0 !important;box-shadow:none !important;}
/* ---- levromart-home-search-sticky-scroll-final ---- */
/* Homepage search sits ABOVE the hero carousel in normal flow. It remains
accessible while scrolling, contracts and becomes translucent while moving,
then restores to its normal size when scrolling settles. */
#app .levro-home-search-wrap{
position:sticky !important;
top:var(--levro-search-sticky-top,72px) !important;
z-index:120 !important;
width:100% !important;
margin:0 auto !important;
padding:.3rem 0 .45rem !important;
background:transparent !important;
transform:translateZ(0) !important;
}
#app .levro-home-search-wrap .hero-search{
position:relative !important;
inset:auto !important;
width:min(100%,760px) !important;
max-width:760px !important;
margin:0 auto !important;
transform:scale(1) !important;
transform-origin:center top !important;
opacity:1 !important;
transition:transform .22s cubic-bezier(.2,.75,.25,1),opacity .2s ease,filter .2s ease,box-shadow .22s ease !important;
will-change:transform,opacity,filter !important;
}
#app .levro-home-search-wrap.home-search-scrolling .hero-search{
transform:scale(.86) !important;
opacity:.34 !important;
filter:saturate(.62) !important;
box-shadow:none !important;
}
#app .levro-home-search-wrap:has(.hero-search:focus-within) .hero-search{
transform:scale(1) !important;
opacity:1 !important;
filter:none !important;
}
#app .levro-home-search-wrap.home-search-scrolling{
background:transparent !important;
}
@media(max-width:720px){
#app .levro-home-search-wrap{top:var(--levro-search-sticky-top,70px) !important;padding:.18rem 0 .34rem !important;}
#app .levro-home-search-wrap .hero-search{width:calc(100% - .1rem) !important;}
}
/* ---- levromart-20260910-canonical-fixes ---- */
/* Top-rated Vendors: narrow vertical cards with everything centered. */
#app .top-rated-vendors-scroll{display:flex !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:.65rem !important;overflow-x:auto !important;padding:.35rem .2rem .75rem !important;scroll-behavior:auto !important;scrollbar-width:none !important;}
#app .vendor-listing-tabs{display:flex !important;gap:.45rem !important;overflow-x:auto !important;scrollbar-width:none !important;padding:.15rem .05rem .35rem !important;margin:.65rem 0 .7rem !important;-webkit-overflow-scrolling:touch !important;}
#app .vendor-listing-tabs::-webkit-scrollbar{display:none !important;}
#app .vendor-listing-tab{flex:0 0 auto !important;border:1px solid var(--border) !important;background:var(--card) !important;color:var(--text-muted) !important;border-radius:999px !important;padding:.55rem .85rem !important;font:inherit !important;font-size:.82rem !important;font-weight:700 !important;cursor:pointer !important;white-space:nowrap !important;}
#app .vendor-listing-tab.active{background:color-mix(in srgb,var(--primary) 12%,var(--card)) !important;color:var(--primary) !important;border-color:color-mix(in srgb,var(--primary) 55%,var(--border)) !important;}
#app .vendors-directory-toolbar{display:flex !important;gap:.55rem !important;align-items:center !important;margin:.35rem 0 .65rem !important;}
#app .vendors-directory-toolbar input{flex:1 1 auto !important;min-width:0 !important;margin:0 !important;}
#app .vendors-filters-toggle{flex:0 0 auto !important;white-space:nowrap !important;min-height:44px !important;}
#app .vendors-filters-toggle.active{border-color:var(--primary) !important;color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 8%,var(--card)) !important;}
#app .vendors-filters-chevron{margin-left:.2rem !important;transition:transform .18s ease !important;}
#app .vendors-filters-toggle.active .vendors-filters-chevron{transform:rotate(180deg) !important;}
#app .vendors-filters-panel{border:1px solid var(--border) !important;border-radius:16px !important;background:color-mix(in srgb,var(--card) 94%,transparent) !important;padding:.8rem !important;margin:.25rem 0 .9rem !important;box-shadow:0 8px 24px rgba(0,0,0,.06) !important;}
#app .vendors-filter-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:.65rem !important;}
#app .vendors-filter-grid label{display:flex !important;flex-direction:column !important;gap:.3rem !important;font-size:.72rem !important;font-weight:700 !important;color:var(--text-muted) !important;}
#app .vendors-filter-grid select{margin:0 !important;min-width:0 !important;width:100% !important;}
@media(max-width:720px){#app .vendors-directory-toolbar{align-items:stretch !important;}#app .vendors-directory-toolbar input{max-width:none !important;}#app .vendors-filter-grid{grid-template-columns:1fr !important;}}
#app .top-rated-vendors-scroll::-webkit-scrollbar{display:none !important;}
#app .top-rated-vendors-scroll > .vendor-card,
#app .top-rated-vendors-scroll > .homepage-vendor-card{
box-sizing:border-box !important;flex:0 0 8rem !important;width:8rem !important;min-width:8rem !important;max-width:8rem !important;
min-height:10.2rem !important;height:auto !important;padding:.62rem .4rem !important;
display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;
gap:.32rem !important;overflow:hidden !important;text-align:center !important;
}
#app .top-rated-vendors-scroll > .vendor-card .vendor-directory-logo,
#app .top-rated-vendors-scroll > .homepage-vendor-card .vendor-home-avatar,
#app .top-rated-vendors-scroll > .homepage-vendor-card .vendor-directory-logo{
width:2.75rem !important;height:2.75rem !important;min-width:2.75rem !important;min-height:2.75rem !important;
flex:0 0 2.75rem !important;margin:0 auto !important;border-radius:50% !important;object-fit:cover !important;
}
#app .top-rated-vendors-scroll > .vendor-card .vendor-directory-copy,
#app .top-rated-vendors-scroll > .homepage-vendor-card .vendor-home-copy,
#app .top-rated-vendors-scroll > .homepage-vendor-card .vendor-directory-copy{
width:100% !important;min-width:0 !important;flex:1 1 auto !important;display:flex !important;flex-direction:column !important;
align-items:center !important;text-align:center !important;overflow:hidden !important;
}
#app .top-rated-vendors-scroll .vendor-directory-name,
#app .top-rated-vendors-scroll .vendor-home-copy > strong{
width:100% !important;font-size:.76rem !important;line-height:1.1 !important;text-align:center !important;white-space:normal !important;
display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;overflow:hidden !important;
}
#app .top-rated-vendors-scroll .vendor-directory-city,
#app .top-rated-vendors-scroll .vendor-directory-categories,
#app .top-rated-vendors-scroll .vendor-home-city,
#app .top-rated-vendors-scroll .vendor-home-known{
width:100% !important;font-size:.6rem !important;line-height:1.1 !important;text-align:center !important;
white-space:normal !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
#app .top-rated-vendors-scroll .vendor-home-meta{
width:100% !important;display:flex !important;justify-content:center !important;align-items:center !important;flex-wrap:wrap !important;gap:.2rem !important;
}
#app .top-rated-vendors-scroll .badge{font-size:.52rem !important;padding:.12rem .25rem !important;margin:0 !important;max-width:100% !important;}
/* Every card in the row is already stretched to the tallest card's height
(align-items:stretch on the row); pin the Follow button to the bottom of
that stretched space instead of letting it float right under whatever
amount of name/city/category text that particular card happens to have --
otherwise a short name means a high button and a wrapped 2-line name means
a low one, and they never line up. */
#app .top-rated-vendors-scroll .vendor-card-follow-btn{ margin-top:auto !important; }
/* Admin status tabs and primary admin navigation centered. */
#app .tabs{display:flex !important;justify-content:center !important;align-items:center !important;width:100% !important;gap:1.5rem !important;overflow-x:auto !important;flex-wrap:nowrap !important;scrollbar-width:none !important;padding:.15rem .2rem 0 !important;}
#app .tabs::-webkit-scrollbar{display:none !important;}
#app .tabs a{flex:0 0 auto !important;text-align:center !important;white-space:nowrap !important;}
#app .dash-tabs{justify-content:center !important;align-items:center !important;overflow-x:auto !important;scrollbar-width:none !important;}
#app .dash-tabs::-webkit-scrollbar{display:none !important;}
/* People: compact table without squeezing the columns into a chopped viewport. */
#app .admin-people-table-wrap{
width:min(100%,760px) !important; max-width:760px !important; margin:0 auto 1rem !important;
overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important;
overscroll-behavior-x:contain !important; touch-action:pan-x pan-y !important; scrollbar-width:thin !important;
}
#app .admin-people-table{
width:max-content !important; min-width:760px !important; max-width:none !important;
table-layout:auto !important; font-size:.72rem !important;
}
#app .admin-people-table th,#app .admin-people-table td{
padding:.5rem .55rem !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important;
}
#app .admin-people-table th{font-size:.62rem !important;}
#app .admin-people-table th:first-child,#app .admin-people-table td:first-child{width:2.5rem !important;text-align:center !important;}
#app .admin-people-table th:nth-child(2),#app .admin-people-table td:nth-child(2){min-width:8.5rem !important;}
#app .admin-people-table th:nth-child(3),#app .admin-people-table td:nth-child(3){min-width:13rem !important;}
#app .admin-people-table th:nth-child(4),#app .admin-people-table td:nth-child(4){min-width:6rem !important;}
#app .admin-people-table th:nth-child(5),#app .admin-people-table td:nth-child(5){min-width:6rem !important;}
#app .admin-people-table th:nth-child(6),#app .admin-people-table td:nth-child(6){min-width:7rem !important;}
#app .admin-people-table th:nth-child(7),#app .admin-people-table td:nth-child(7){min-width:8rem !important;}
#app .admin-people-table th:last-child,#app .admin-people-table td:last-child{min-width:7rem !important;}
/* Link Library search: keep the magnifier clear of the placeholder text. */
#app .admin-link-library-search .field-wrap{position:relative !important;width:100% !important;min-width:0 !important;}
#app .admin-link-library-search .field-wrap > i.fa-magnifying-glass{
position:absolute !important; left:1rem !important; right:auto !important; top:50% !important;
width:1.25rem !important; height:1.25rem !important; margin:0 !important; transform:translateY(-50%) !important;
display:flex !important; align-items:center !important; justify-content:center !important;
pointer-events:none !important; z-index:3 !important;
}
#app .admin-link-library-search input#adminLinkLibrarySearch{
display:block !important; box-sizing:border-box !important; width:100% !important; min-width:0 !important;
height:3.35rem !important; padding:.82rem 1rem .82rem 3.25rem !important; margin:0 !important; line-height:1.35 !important;
}
@media(max-width:720px){#app .admin-people-table-wrap{max-width:100% !important;}#app .admin-people-table{min-width:760px !important;}}
/* Customer requests icon: explicit Font Awesome hand, never generic circle. */
#app #profilePanel .profile-nav-link[data-profile-label="Requests"] .profile-item-icon i{font-family:"Font Awesome 6 Free" !important;font-weight:900 !important;}
#app #profilePanel .profile-nav-link[data-profile-label="Requests"] .profile-item-icon i:before{content:"\f256" !important;}
/* ---- levromart-20260910-link-open-fix ---- */
.admin-link-row{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:.75rem !important;align-items:center !important;}
.admin-link-copy{min-width:0 !important;}
.admin-link-url{display:block !important;width:100% !important;min-width:0 !important;}
.admin-link-open{display:inline-flex !important;align-items:center !important;gap:.3rem !important;white-space:nowrap !important;font-weight:700 !important;}
.admin-link-actions{display:flex !important;align-items:center !important;gap:.45rem !important;justify-content:flex-end !important;flex-wrap:wrap !important;}
@media(max-width:600px){.admin-link-row{grid-template-columns:1fr !important;}.admin-link-actions{justify-content:flex-start !important;}}
/* ---- levromart-request-chat-precision-20260910 ---- */
/* Request actions: compact rectangular buttons, centered as a pair. */
#app .vendor-request-card .vendor-interest-row{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:center !important;
gap:.7rem !important;
width:100% !important;
margin:1rem auto .35rem !important;
}
#app .vendor-request-card .vendor-interest-row .btn{
flex:0 0 auto !important;
width:auto !important;
min-width:140px !important;
min-height:42px !important;
height:42px !important;
padding:.55rem 1rem !important;
border-radius:12px !important;
font-size:.82rem !important;
line-height:1 !important;
justify-content:center !important;
white-space:nowrap !important;
}
@media(max-width:480px){
#app .vendor-request-card .vendor-interest-row{
flex-direction:row !important;
flex-wrap:wrap !important;
gap:.6rem !important;
}
#app .vendor-request-card .vendor-interest-row .btn{
width:auto !important;
min-width:132px !important;
min-height:40px !important;
height:40px !important;
padding:.5rem .85rem !important;
font-size:.8rem !important;
}
}
/* Dedicated chat: mimic WhatsApp's anchored shell. The header remains visible
while only the messages region scrolls, including while the OS keyboard is open. */
body.chat-full-page{
overflow:hidden !important;
position:fixed !important;
inset:0 !important;
width:100% !important;
height:100% !important;
}
body.chat-full-page > #app{
position:fixed !important;
inset:0 !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
}
.chat-page-wrap{
position:fixed !important;
left:0 !important;
right:0 !important;
top:0 !important;
height:100dvh !important;
max-height:100dvh !important;
min-height:0 !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
overscroll-behavior:none !important;
}
.chat-page-wrap .chat-page-header{
position:relative !important;
top:auto !important;
flex:0 0 auto !important;
min-height:calc(4.1rem + env(safe-area-inset-top,0px)) !important;
z-index:10000 !important;
transform:translateZ(0) !important;
will-change:auto !important;
}
.chat-page-wrap .chat-thread{
flex:1 1 auto !important;
min-height:0 !important;
height:auto !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !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;
touch-action:pan-y !important;
-webkit-overflow-scrolling:touch !important;
overscroll-behavior-y:contain !important;
overscroll-behavior-x:none !important;
scroll-behavior:auto !important;
}
.chat-page-wrap .chat-input-row{
flex:0 0 auto !important;
position:relative !important;
z-index:10001 !important;
}
/* ---- levromart-precision-20260910-final ---- */
/* Homepage: search first, then promotional carousel, then six calm action tiles. */
#app .levro-home-hero{display:block !important;margin:0 !important;}
#app .levro-home-search-wrap{margin:0 auto !important;}
#app .levro-home-quick-actions{
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:.65rem !important;margin:.25rem 0 1rem !important;width:100% !important;
}
#app .levro-quick-action{
min-width:0 !important;min-height:88px !important;padding:.72rem .42rem !important;
border:1px solid color-mix(in srgb,var(--primary) 13%,var(--border)) !important;
border-radius:16px !important;background:color-mix(in srgb,var(--primary) 4%,var(--card)) !important;
color:var(--text) !important;display:flex !important;flex-direction:column !important;
align-items:center !important;justify-content:center !important;gap:.42rem !important;
font:inherit !important;font-size:.7rem !important;font-weight:750 !important;text-align:center !important;
box-shadow:0 5px 18px rgba(15,23,42,.055) !important;cursor:pointer !important;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease !important;
}
#app .levro-quick-action:active{transform:scale(.97) !important;}
#app .levro-quick-icon{
width:2.45rem !important;height:2.45rem !important;border-radius:50% !important;
display:flex !important;align-items:center !important;justify-content:center !important;
background:color-mix(in srgb,var(--primary) 11%,var(--card)) !important;color:var(--primary) !important;
font-size:1rem !important;
}
@media(max-width:560px){
#app .levro-home-quick-actions{gap:.5rem !important;margin-top:.15rem !important;}
#app .levro-quick-action{min-height:82px !important;border-radius:14px !important;font-size:.64rem !important;padding:.58rem .28rem !important;}
#app .levro-quick-icon{width:2.25rem !important;height:2.25rem !important;font-size:.92rem !important;}
}
/* Request card: compact, modern two-column composition. Buy + actions live together. */
#app .vendor-request-card{
display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) !important;
grid-template-areas:"person right" !important;align-items:center !important;
gap:.62rem !important;width:min(100%,620px) !important;max-width:620px !important;
margin:.42rem auto !important;padding:.62rem .68rem !important;min-height:0 !important;
box-sizing:border-box !important;
}
#app .vendor-request-card .vendor-request-person{
grid-area:person !important;display:flex !important;align-items:center !important;
gap:.45rem !important;min-width:0 !important;align-self:start !important;
}
#app .vendor-request-card .vendor-request-person .avatar-circle{
width:2.5rem !important;height:2.5rem !important;min-width:2.5rem !important;min-height:2.5rem !important;
}
#app .vendor-request-identity-copy{min-width:0 !important;display:flex !important;flex-direction:column !important;line-height:1.05 !important;}
#app .vendor-request-title{font-size:.86rem !important;line-height:1.08 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .vendor-request-buyer,#app .vendor-request-city{font-size:.63rem !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;margin-top:.14rem !important;}
#app .vendor-request-right{grid-area:right !important;min-width:0 !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:.28rem !important;}
#app .vendor-request-type-badge{align-self:flex-end !important;width:max-content !important;height:1.5rem !important;min-width:2.35rem !important;padding:.18rem .55rem !important;border-radius:8px !important;font-size:.64rem !important;line-height:1 !important;}
#app .vendor-request-description{font-size:.62rem !important;line-height:1.12 !important;margin:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#app .vendor-request-card .vendor-interest-row{
display:flex !important;justify-content:flex-start !important;align-items:center !important;
gap:.42rem !important;width:100% !important;margin:.22rem 0 0 !important;flex-wrap:nowrap !important;
}
#app .vendor-request-card .vendor-interest-row .btn{
flex:1 1 0 !important;min-width:0 !important;width:auto !important;height:33px !important;min-height:33px !important;
padding:.34rem .48rem !important;border-radius:9px !important;font-size:.64rem !important;
line-height:1 !important;white-space:nowrap !important;justify-content:center !important;
}
#app .vendor-request-card .vendor-offer-status{font-size:.61rem !important;line-height:1.1 !important;text-align:left !important;margin:.18rem 0 0 !important;}
#app .vendor-more-requests{width:min(100%,620px) !important;max-width:620px !important;margin:.35rem auto .7rem !important;}
@media(max-width:480px){
#app .vendor-request-card{grid-template-columns:minmax(0,.82fr) minmax(0,1.65fr) !important;gap:.48rem !important;padding:.55rem .58rem !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-title{font-size:.77rem !important;}
#app .vendor-request-buyer,#app .vendor-request-city{font-size:.58rem !important;}
#app .vendor-request-type-badge{height:1.42rem !important;font-size:.6rem !important;padding:.16rem .46rem !important;}
#app .vendor-request-card .vendor-interest-row .btn{height:31px !important;min-height:31px !important;font-size:.6rem !important;padding:.32rem .35rem !important;}
}
/* Photo editor: this pass deliberately accepts ONE image only. Keep crop visible. */
#chatAttachmentEditorModal .chat-media-nav,#chatAttachmentEditorModal .chat-media-thumbs{display:none !important;}
#chatAttachmentEditorModal .chat-media-editor-head h3{font-size:1rem !important;}
#chatAttachmentEditorModal .chat-media-editor-tools{gap:.32rem !important;justify-content:center !important;}
#chatAttachmentEditorModal .chat-media-tool{width:42px !important;height:42px !important;min-width:42px !important;border-radius:12px !important;}
#chatAttachmentEditorModal .chat-media-caption span{font-size:.72rem !important;}
#chatAttachmentEditorModal .chat-media-caption textarea{min-height:52px !important;}
/* ---- levromart-20260910-ui-precision-v5 ---- */
/* BUYER NAV: five equal items, no vendor + action, Home centered. */
@media (max-width:720px){
#bottomNav.buyer-no-add{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
align-items:center !important;
gap:0 !important;
height:68px !important;
min-height:0 !important;
padding:.22rem .28rem !important;
box-sizing:border-box !important;
}
#bottomNav.buyer-no-add .bottom-nav-item{
width:100% !important; min-width:0 !important; height:54px !important; min-height:54px !important;
padding:.28rem .08rem !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
#bottomNav.buyer-no-add .bottom-nav-item > span:last-child{
font-size:.6rem !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important;
}
#bottomNav.buyer-no-add .bn-icon{font-size:1.05rem !important; line-height:1 !important;}
}
/* LIGHT MODE: dark/ink icons are required for contrast; dark/black modes stay white. */
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item i,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item .bn-icon{color:var(--text) !important;}
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item.active i,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item.active .bn-icon{color:var(--text) !important;}
/* REVIEW SECTION: keep the heading and the first review card visibly separated. */
#app .storefront-reviews-head{margin-bottom:.75rem !important;}
#app #reviewsList{display:grid !important;gap:.7rem !important;margin-top:0 !important;}
#app #reviewsList .review-card{margin:0 !important;}
/* QUICK-ACTION LAUNCHER: preserve a clean three-by-two rhythm under Home. */
#app .levro-home-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:.7rem .35rem !important;margin:.8rem auto 1.1rem !important;}
#app .levro-quick-action{min-height:70px !important;}
/* Navigation should feel instant when a previously visited route is reused. */
#app .instant-page-shell{contain:layout paint style !important;}
#app .bottom-nav{contain:layout paint style !important;}
/* ---- levromart-20260910-final-bugfix-pass ---- */
/* Homepage quick actions: flyer-inspired circular icon treatment. Keep the
six actions themselves borderless; only the icon gets the visual weight. */
#app .levro-home-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.78rem .35rem!important;margin:.72rem auto 1.05rem!important;padding:.05rem 0!important}
#app .levro-quick-action{min-height:74px!important;padding:.18rem .12rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--text)!important;gap:.42rem!important;font-size:.64rem!important;font-weight:760!important}
#app .levro-quick-icon{width:2.72rem!important;height:2.72rem!important;border-radius:50%!important;background:color-mix(in srgb,var(--primary) 13%,var(--card))!important;color:var(--primary)!important;border:1px solid color-mix(in srgb,var(--primary) 8%,transparent)!important;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 8%,transparent)!important;font-size:1.02rem!important}
#app .levro-quick-action:active{transform:scale(.97)!important}
@media(max-width:560px){#app .levro-home-quick-actions{gap:.62rem .15rem!important;margin:.58rem auto .92rem!important}#app .levro-quick-action{min-height:70px!important;font-size:.6rem!important}#app .levro-quick-icon{width:2.52rem!important;height:2.52rem!important;font-size:.95rem!important}}
/* Light mode: icons AND labels use the same dark ink tone for contrast,
without forcing pure black. Dark themes retain the existing white treatment. */
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item>span:last-child,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item i,
html:not([data-theme="dark"]):not([data-theme="black"]) #bottomNav .bottom-nav-item .bn-icon{color:#334155!important}
/* Reviews accordion: use a dedicated state class so a stale/overridden
.hidden rule can never leave the arrow and content out of sync. */
#app #reviewsList.reviews-collapsed{display:none!important}
#app .storefront-reviews-head{margin-bottom:.8rem!important}
#app #reviewsList{margin-top:0!important}
/* A protected route must not flash an authorization error while the restored
session is still resolving. */
#app .page-loading-shell{min-height:32vh;display:flex;align-items:center;justify-content:center;gap:.55rem;color:var(--text-muted)}
/* ---- levromart-final-requested-vendor-nav-quick-colors ---- */
/* Vendor rail: four controls, exactly two on each side of the centered +. */
@media (max-width:720px){
#bottomNav.has-add{
grid-template-columns:minmax(0,1fr) 4.1rem minmax(0,1fr) !important;
gap:.12rem !important;
}
#bottomNav.has-add .bn-group{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:.06rem !important;
}
}
/* Home's six quick actions: back to a 3-column grid (3 up, 3 down) of
compact HORIZONTAL cards -- icon, label, arrow -- per explicit correction;
not the 2-column layout, and not the old vertical icon-over-label style. */
#app .levro-home-quick-actions{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:.5rem !important;
}
#app .levro-home-quick-actions .levro-quick-action{
--quick-solid:none !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:.4rem !important;
min-height:52px !important;
padding:.55rem .5rem !important;
border-radius:13px !important;
background:color-mix(in srgb, var(--primary) 8%, var(--card)) !important;
border:1px solid color-mix(in srgb, var(--primary) 14%, var(--border)) !important;
box-shadow:none !important;
color:var(--text) !important;
text-align:left !important;
font-size:.66rem !important;
font-weight:700 !important;
}
#app .levro-home-quick-actions .levro-quick-action:hover,
#app .levro-home-quick-actions .levro-quick-action:focus-visible{
background:color-mix(in srgb, var(--primary) 13%, var(--card)) !important;
border-color:color-mix(in srgb, var(--primary) 32%, var(--border)) !important;
}
#app .levro-home-quick-actions .levro-quick-action:active{ transform:scale(.98) !important; }
#app .levro-home-quick-actions .levro-quick-icon{
flex:0 0 auto !important;
width:1.85rem !important;
height:1.85rem !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;
box-shadow:none !important;
font-size:.8rem !important;
}
#app .levro-home-quick-actions .levro-quick-label{
flex:1 1 auto !important;
min-width:0 !important;
white-space:normal !important;
line-height:1.18 !important;
}
#app .levro-home-quick-actions .levro-quick-arrow{
flex:0 0 auto !important;
font-size:.58rem !important;
color:color-mix(in srgb, var(--primary) 65%, var(--text)) !important;
opacity:.6 !important;
}
@media(max-width:420px){
#app .levro-home-quick-actions{ gap:.35rem !important; }
#app .levro-home-quick-actions .levro-quick-action{ font-size:.58rem !important; padding:.42rem .38rem !important; gap:.3rem !important; min-height:48px !important; }
#app .levro-home-quick-actions .levro-quick-icon{ width:1.6rem !important; height:1.6rem !important; font-size:.68rem !important; }
#app .levro-home-quick-actions .levro-quick-arrow{ display:none !important; }
}
/* Shop by Category rail: compact, horizontally swipeable rounded pills
(icon + name). The categories themselves come from the database; this is
only how they look. */
#app .levro-home-cat-rail{
display:flex !important; gap:.5rem !important; overflow-x:auto !important; overflow-y:hidden !important;
padding:.15rem .05rem .7rem !important; margin:0 !important;
scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important;
overscroll-behavior-x:contain; touch-action:pan-x pan-y;
}
#app .levro-home-cat-rail::-webkit-scrollbar{ display:none !important; }
#app .levro-home-cat-chip{
flex:0 0 auto !important; display:inline-flex !important; flex-direction:row !important; align-items:center !important;
gap:.45rem !important; width:auto !important; min-height:40px !important; padding:0 .85rem 0 .7rem !important;
background:var(--card) !important; border:1px solid var(--border) !important; border-radius:12px !important;
cursor:pointer !important; color:var(--text) !important; box-shadow:none !important;
}
#app .levro-home-cat-icon{
width:auto !important; height:auto !important; background:none !important; border-radius:0 !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
color:var(--cat-color, var(--primary)) !important; font-size:1rem !important; box-shadow:none !important;
}
#app .levro-home-cat-label{
font-size:.82rem !important; font-weight:600 !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)) 13%, var(--card)) !important;
border-color:var(--cat-color, var(--primary)) !important;
}
#app .levro-home-cat-chip.active .levro-home-cat-icon{ color:var(--cat-color, var(--primary)) !important; background:none !important; box-shadow:none !important; }
#app .levro-home-cat-chip.active .levro-home-cat-label{ color:var(--text) !important; font-weight:700 !important; }
/* The Home search bar (above the carousel) had a transparent background and
no border, so it was functionally invisible against the page background -
just a floating icon and faint placeholder, easy to miss entirely. Give
it real visual presence as an actual search bar. */
#app .levro-home-search-wrap .hero-search{
background:var(--card) !important; border:1px solid var(--border) !important;
border-radius:999px !important; box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
}
#app .levro-home-search-wrap .hero-search input{ background:transparent !important; }
/* ---- levromart-search-final-authoritative ---- */
/* Canonical homepage search: normal flow above the carousel at the top; after
scrolling starts it becomes a fixed dock beneath the header, shrinks/fades
while moving, then restores when scrolling settles. */
#app .levro-home-search-wrap{
position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; inset:auto !important;
z-index:130 !important; width:100% !important; max-width:none !important; margin:0 auto !important; padding:.35rem 0 .55rem !important;
background:transparent !important; transform:none !important;
}
#app .levro-home-search-wrap .hero-search{
position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; inset:auto !important;
width:min(100%,760px) !important; max-width:760px !important; margin:0 auto !important;
transform:scale(1) !important; transform-origin:center top !important; opacity:1 !important;
transition:transform .20s ease,opacity .20s ease,filter .20s ease,box-shadow .20s ease !important;
will-change:transform,opacity,filter !important;
}
#app .levro-home-search-wrap.home-search-fixed .hero-search{
position:fixed !important; top:var(--levro-search-dock-top,72px) !important; left:var(--levro-search-dock-left,50%) !important; right:auto !important; bottom:auto !important;
width:min(var(--levro-search-dock-width,calc(100% - 1.1rem)),760px) !important; max-width:760px !important; margin:0 !important;
transform:scale(1) !important; transform-origin:center top !important; opacity:1 !important; z-index:230 !important;
}
#app .levro-home-search-wrap.home-search-fixed.home-search-scrolling .hero-search{
transform:scale(.86) !important; opacity:.30 !important; filter:saturate(.62) !important; box-shadow:none !important;
}
#app .levro-home-search-wrap.home-search-fixed:has(.hero-search:focus-within) .hero-search{
transform:scale(1) !important; opacity:1 !important; filter:none !important;
}
@media(max-width:720px){
#app .levro-home-search-wrap{padding:.85rem 0 .55rem !important;}
#app .levro-home-search-wrap .hero-search{width:100% !important;}
#app .levro-home-search-wrap.home-search-fixed .hero-search{width:calc(100% - 1.1rem) !important;}
}
/* ---- levromart-retired-accent-controls ---- */
.accent-page-dropdown-trigger,#accentPaletteBody,#accentPalettePageBody,.accent-swatches,.accent-swatch,.settings-page-swatches{display:none!important;}
/* ---- levromart-final-static-brand-and-filters ---- */
:root,html[data-theme="light"],html[data-theme="dark"],html[data-theme="black"]{
--primary:#3fb97f !important;
--primary-light:#3fb97f !important;
--primary-grad:#3fb97f !important;
--brand-green:#3fb97f !important;
--brand-green-2:#3fb97f !important;
--brand-grad:#3fb97f !important;
}
/* Flat brand green surfaces (no texture overlay). */
#app .btn:not(.btn-outline),
#app .btn-primary,
#app .btn-sm:not(.btn-outline),
#app .browse-filter-trigger,
#app .browse-filter-clear,
#app .order-filter-done-btn,
#app .order-filters-trigger.active,
#app .vendor-listing-tab.active,
#app .vendor-request-tab.active,
#app .vendor-interest-btn.active,
#app .storefront-catalog-tab.active,
#app .levro-quick-icon,
#app #aiChatFab,
#app .ai-chat-fab,
#app #cartFab,
#app .cart-fab,
#app .home-promotional-dot.active,
#app .action-button.active{
background-color:#3fb97f !important;
background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
text-shadow:none !important;
}
/* Never animate the controls or marketplace cards. The Levi FAB has its own
deliberate interaction animation only when explicitly directing; ordinary
idle state is completely still. */
#app .btn,#app .btn-sm,#app button,#app .icon-btn,#app .fav-btn,
#app .cat-chip,#app .vendor-listing-tab,#app .vendor-request-tab,
#app .browse-filter-trigger,#app .browse-filter-clear,
#app .order-filters-trigger,#app .order-filter-clear-btn,#app .order-filter-done-btn,
#app .product-card-wrap,#app .vendor-card{
animation:none !important;
}
#app .ai-chat-fab:not(.directing),#app #aiChatFab:not(.directing){animation:none !important;}
/* Do not texture/clip ordinary green text. This prevents prices, stars, ₦,
ratings and labels from appearing transparent or blinking. */
#app .levro-textured-accent-text,
#app .levro-textured-accent-text *{
background-image:none !important;
background-clip:border-box !important;
-webkit-background-clip:border-box !important;
color:#3fb97f !important;
-webkit-text-fill-color:#3fb97f !important;
}
#app .product-current-price,#app .product-price,#app .price,
#app .rating,#app .stars,#app .star-display,
#app .fa-star,#app .fa-star-half-stroke,#app .fa-star-half-alt{
background-image:none !important;
-webkit-text-fill-color:currentColor !important;
animation:none !important;
}
/* Vendor directory type tabs: one clear selected pill, readable inactive pills. */
#app .vendor-listing-tabs{
display:flex !important;gap:.45rem !important;overflow-x:auto !important;
scrollbar-width:none !important;padding:.15rem .05rem .35rem !important;
}
#app .vendor-listing-tabs::-webkit-scrollbar{display:none !important;}
#app .vendor-listing-tab{
flex:0 0 auto !important;border:1px solid var(--border) !important;
border-radius:999px !important;background:var(--card) !important;
color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;
padding:.58rem .88rem !important;font:700 .82rem inherit !important;
white-space:nowrap !important;box-shadow:none !important;
}
#app .vendor-listing-tab.active{
background-color:#3fb97f !important;background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;border-color:#3fb97f !important;
}
/* Vendor directory view controls: never change size or animate when selected. */
#app .vendors-directory-view-buttons .btn,
#app #vendorsViewListBtn,#app #vendorsViewMapBtn{
min-width:40px !important;min-height:40px !important;border-radius:12px !important;
box-shadow:none !important;transition:none !important;
}
#app .vendors-directory-view-buttons .btn.active,
#app .vendors-directory-view-buttons .btn[aria-pressed="true"],
#app #vendorsViewListBtn.active,#app #vendorsViewMapBtn.active{
background-color:#3fb97f !important;background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;border-color:#3fb97f !important;
}
#app .vendors-directory-view-buttons .btn:not(.active):not([aria-pressed="true"]),
#app #vendorsViewListBtn:not(.active),#app #vendorsViewMapBtn:not(.active){
background:var(--card) !important;color:var(--text-muted) !important;
-webkit-text-fill-color:var(--text-muted) !important;border-color:var(--border) !important;
}
/* Vendor Filters is a real compact button, not an empty green rectangle. */
#app .vendors-filters-toggle{
display:inline-flex !important;align-items:center !important;justify-content:center !important;
gap:.38rem !important;flex:0 0 auto !important;white-space:nowrap !important;
min-height:42px !important;width:auto !important;padding:.58rem .9rem !important;
border:1px solid #3fb97f !important;border-radius:999px !important;
background-color:#3fb97f !important;background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;box-shadow:none !important;
}
#app .vendors-filters-toggle .vendors-filters-chevron{color:#fff !important;-webkit-text-fill-color:#fff !important;}
/* Vendor filter panel and its controls use app surfaces, not native grey. */
#app .vendors-filters-panel{
background:var(--card) !important;color:var(--text) !important;
border:1px solid var(--border) !important;border-radius:16px !important;
box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
}
#app .vendors-filters-panel select,
#app .vendors-filter-grid select{
appearance:none !important;-webkit-appearance:none !important;
background:var(--card) !important;color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;border:1px solid var(--border) !important;
border-radius:12px !important;min-height:42px !important;padding:.55rem .72rem !important;
box-shadow:none !important;
}
/* Browse Everything, restore the polished custom dropdown. It opens directly
below the Filters control on every screen size; no fixed/upward popover. */
#app .browse-filter-toolbar{
position:relative !important;display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:.55rem !important;align-items:center !important;
overflow:visible !important;margin-bottom:1.2rem !important;
}
#app .browse-filter-toolbar>input{width:100% !important;min-width:0 !important;}
#app .browse-filter-trigger{
min-width:118px !important;border:1px solid #3fb97f !important;
border-radius:999px !important;padding:.72rem .95rem !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;
gap:.45rem !important;cursor:pointer !important;font:700 .82rem inherit !important;
box-shadow:none !important;transition:none !important;
}
#app .browse-filter-chevron{font-size:.68rem !important;transition:transform .18s ease !important;}
#app .browse-filter-trigger.active .browse-filter-chevron{transform:rotate(180deg) !important;}
#app .browse-filter-panel{
position:absolute !important;right:0 !important;left:auto !important;
top:calc(100% + .45rem) !important;bottom:auto !important;
width:min(390px,calc(100vw - 1.3rem)) !important;
max-height:min(72vh,560px) !important;overflow:auto !important;z-index:500 !important;
padding:.7rem !important;background:var(--card) !important;color:var(--text) !important;
border:1px solid color-mix(in srgb,#3fb97f 20%,var(--border)) !important;
border-radius:18px !important;box-shadow:0 18px 42px rgba(15,23,42,.14) !important;
backdrop-filter:blur(22px) saturate(145%) !important;
-webkit-backdrop-filter:blur(22px) saturate(145%) !important;
}
#app .browse-filter-panel.hidden{display:none !important;}
#app .browse-filter-panel-head{
display:flex !important;align-items:center !important;justify-content:space-between !important;
gap:.6rem !important;padding:.15rem .15rem .5rem !important;
border-bottom:1px solid var(--border) !important;margin-bottom:.25rem !important;
}
#app .browse-filter-row-group{position:relative !important;border-bottom:1px solid var(--border) !important;}
#app .browse-filter-row-group:last-of-type{border-bottom:0 !important;}
#app .browse-filter-subtrigger{
width:100% !important;border:0 !important;background:transparent !important;color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;display:grid !important;
grid-template-columns:auto 1fr auto !important;align-items:center !important;gap:.6rem !important;
text-align:left !important;padding:.82rem .25rem !important;cursor:pointer !important;font:inherit !important;
}
#app .browse-filter-subtrigger span{color:var(--text-muted) !important;font-size:.75rem !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.04em !important;}
#app .browse-filter-subtrigger strong{font-size:.82rem !important;text-align:right !important;color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;}
#app .browse-filter-submenu{
position:relative !important;margin:0 0 .5rem !important;padding:.35rem !important;
border-radius:13px !important;background:color-mix(in srgb,#3fb97f 3%,var(--card)) !important;
border:1px solid var(--border) !important;
}
#app .browse-filter-submenu.hidden{display:none !important;}
#app .browse-filter-submenu button{
width:100% !important;border:0 !important;background:transparent !important;
color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;
text-align:left !important;padding:.62rem .7rem !important;border-radius:10px !important;
cursor:pointer !important;font:500 .82rem inherit !important;
}
#app .browse-filter-submenu button:hover,#app .browse-filter-submenu button:focus-visible{
background:color-mix(in srgb,#3fb97f 11%,transparent) !important;color:#3fb97f !important;
-webkit-text-fill-color:#3fb97f !important;outline:none !important;
}
#app .browse-category-submenu input{margin:0 0 .35rem !important;width:100% !important;}
#app .browse-category-submenu #browseCategoryOptions{max-height:230px !important;overflow-y:auto !important;overscroll-behavior:contain !important;}
#app .browse-filter-clear{
margin:.65rem auto .15rem !important;width:auto !important;max-width:max-content !important;
min-height:36px !important;justify-content:center !important;
border:1px solid #3fb97f !important;border-radius:999px !important;
padding:.48rem .8rem !important;
}
#app .visually-hidden-select{position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;overflow:hidden !important;}
@media(max-width:560px){
#app .browse-filter-toolbar{grid-template-columns:minmax(0,1fr) auto !important;}
#app .browse-filter-trigger{width:auto !important;min-width:112px !important;}
#app .browse-filter-panel{
position:absolute !important;top:calc(100% + .45rem) !important;bottom:auto !important;
left:0 !important;right:0 !important;width:100% !important;max-height:min(70vh,540px) !important;
}
}
/* Orders filter trigger remains a single dropdown and never uses browser-grey. */
#app .order-filters-trigger{
background:var(--card) !important;color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;border-color:color-mix(in srgb,#3fb97f 30%,var(--border)) !important;
transition:none !important;
}
#app .order-filters-trigger>span{color:#3fb97f !important;-webkit-text-fill-color:#3fb97f !important;}
#app .order-filters-panel{background:var(--card) !important;color:var(--text) !important;}
#app .order-filters-panel select{appearance:none !important;-webkit-appearance:none !important;background:var(--card) !important;color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;border:1px solid var(--border) !important;border-radius:12px !important;}
#app .order-filter-clear-btn{background:transparent !important;color:#3fb97f !important;-webkit-text-fill-color:#3fb97f !important;}
/* Keep the texture on the navigation plus/cart/Levi controls but never on
ordinary white surfaces. */
#app .bottom-nav .nav-item.active,#app .bottom-nav .nav-plus,
#app .nav-plus,#app .plus-button,#app .cart-fab,#app .ai-chat-fab{color:#fff !important;-webkit-text-fill-color:#fff !important;}
/* ---- levromart-filter-final-polish ---- */
/* Filters are controls, not hero buttons. Keep them quiet and app-native. */
#app .browse-filter-trigger,
#app .vendors-filters-toggle,
#app .order-filters-trigger{
min-height:42px !important;
border-radius:999px !important;
box-shadow:none !important;
background-image:none !important;
transition:background-color .16s ease,border-color .16s ease,color .16s ease !important;
}
/* Light mode: soft tinted surface with a restrained green outline. */
html:not([data-theme="dark"]):not([data-theme="black"]) #app .browse-filter-trigger,
html:not([data-theme="dark"]):not([data-theme="black"]) #app .vendors-filters-toggle,
html:not([data-theme="dark"]):not([data-theme="black"]) #app .order-filters-trigger{
background:color-mix(in srgb,#3fb97f 7%,var(--card)) !important;
border:1px solid color-mix(in srgb,#3fb97f 42%,var(--border)) !important;
color:#0A5C40 !important;
-webkit-text-fill-color:#0A5C40 !important;
}
html:not([data-theme="dark"]):not([data-theme="black"]) #app .browse-filter-trigger i,
html:not([data-theme="dark"]):not([data-theme="black"]) #app .vendors-filters-toggle i,
html:not([data-theme="dark"]):not([data-theme="black"]) #app .order-filters-trigger i,
html:not([data-theme="dark"]):not([data-theme="black"]) #app .order-filters-trigger span,
html:not([data-theme="dark"]):not([data-theme="black"]) #app .order-filters-trigger small{
color:#0A5C40 !important;-webkit-text-fill-color:#0A5C40 !important;
}
/* Dark/black mode: transparent glass with only the brand-green outline. */
html[data-theme="dark"] #app .browse-filter-trigger,
html[data-theme="black"] #app .browse-filter-trigger,
html[data-theme="dark"] #app .vendors-filters-toggle,
html[data-theme="black"] #app .vendors-filters-toggle,
html[data-theme="dark"] #app .order-filters-trigger,
html[data-theme="black"] #app .order-filters-trigger{
background:transparent !important;
border:1px solid rgba(16,176,128,.62) !important;
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
}
html[data-theme="dark"] #app .browse-filter-trigger i,
html[data-theme="black"] #app .browse-filter-trigger i,
html[data-theme="dark"] #app .vendors-filters-toggle i,
html[data-theme="black"] #app .vendors-filters-toggle i,
html[data-theme="dark"] #app .order-filters-trigger i,
html[data-theme="black"] #app .order-filters-trigger i{
color:#4FBE94 !important;-webkit-text-fill-color:#4FBE94 !important;
}
html[data-theme="dark"] #app .order-filters-trigger span,
html[data-theme="black"] #app .order-filters-trigger span{
color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;
}
/* When a filter is open, strengthen the outline only, never flood the bar. */
#app .browse-filter-trigger.active,
#app .vendors-filters-toggle.active,
#app .order-filters-trigger.active{
background:color-mix(in srgb,#3fb97f 7%,var(--card)) !important;
border-color:#3fb97f !important;
}
html[data-theme="dark"] #app .browse-filter-trigger.active,
html[data-theme="black"] #app .browse-filter-trigger.active,
html[data-theme="dark"] #app .vendors-filters-toggle.active,
html[data-theme="black"] #app .vendors-filters-toggle.active,
html[data-theme="dark"] #app .order-filters-trigger.active,
html[data-theme="black"] #app .order-filters-trigger.active{
background:rgba(16,176,128,.055) !important;
}
/* Filter panels: soft glass/card, never browser-grey. */
#app .browse-filter-panel,
#app .vendors-filters-panel,
#app .order-filters-panel{
background:var(--card) !important;
color:var(--text) !important;
border:1px solid color-mix(in srgb,#3fb97f 18%,var(--border)) !important;
border-radius:18px !important;
box-shadow:0 16px 36px rgba(0,0,0,.12) !important;
}
html[data-theme="dark"] #app .browse-filter-panel,
html[data-theme="black"] #app .browse-filter-panel,
html[data-theme="dark"] #app .vendors-filters-panel,
html[data-theme="black"] #app .vendors-filters-panel,
html[data-theme="dark"] #app .order-filters-panel,
html[data-theme="black"] #app .order-filters-panel{
background:color-mix(in srgb,var(--card) 92%,transparent) !important;
border-color:rgba(16,176,128,.28) !important;
}
/* Never let a filter's labels inherit a white-on-white/transparent color. */
#app .browse-filter-subtrigger,
#app .browse-filter-subtrigger strong,
#app .browse-filter-submenu button,
#app .vendors-filters-panel label,
#app .vendors-filters-panel select,
#app .order-filters-panel label,
#app .order-filters-panel select{
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
}
#app .browse-filter-subtrigger span,
#app .vendors-filters-panel label,
#app .order-filters-panel label{color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;}
/* Vendor filter is full-width on narrow screens but remains a calm outline. */
#app .vendors-directory-controls{position:relative !important;}
#app .vendors-filters-toggle{width:auto !important;}
@media(max-width:560px){#app .vendors-filters-toggle{width:100% !important;}}
/* Orders: one polished pill, with the detail summary tucked inside it. */
#app .order-filters-wrap{position:relative !important;z-index:30 !important;}
#app .order-filters-trigger{width:100% !important;display:flex !important;align-items:center !important;gap:.5rem !important;padding:.65rem .8rem !important;}
#app .order-filters-trigger>small{flex:1 1 auto !important;min-width:0 !important;text-align:left !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;}
#app .order-filters-panel{position:absolute !important;left:0 !important;right:0 !important;top:calc(100% + .45rem) !important;z-index:500 !important;}
/* No transitions on active filter state that could look like blinking. */
#app .browse-filter-trigger,
#app .vendors-filters-toggle,
#app .order-filters-trigger{animation:none !important;}
/* ---- levromart-scroll-and-order-spacing-final ---- */
/* Keep the order view switcher visually separated from the filter control. */
#app .order-list-view-controls{
align-items:center !important;
gap:.7rem !important;
}
#app .order-list-view-controls .btn{
min-height:44px !important;
padding:.62rem 1rem !important;
border-radius:16px !important;
margin:0 !important;
}
@media(max-width:520px){
#app .order-list-view-controls{gap:.6rem !important;margin-top:1rem !important;margin-left:.2rem !important;margin-right:.2rem !important;}
#app .order-list-view-controls .btn{flex:0 1 auto !important;min-width:132px !important;}
}
/* ---- levromart-levi-and-orders-final-polish ---- */
/* A routed Levi action is complete only when the assistant is out of the
way. Keep the panel physically non-interactive while hidden so it can
never sit over the destination screen after navigation. */
#aiChatPanel.hidden{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* Orders filter: give the dropdown real breathing room and replace the old
browser-looking action buttons with the same pill language used elsewhere
in Levromart. */
#app .order-filters-panel{
padding:1rem !important;
overflow:hidden !important;
}
#app .order-filters-grid{
display:grid !important;
gap:.85rem !important;
}
#app .order-filters-panel label{
display:block !important;
padding:0 .2rem !important;
font-size:.78rem !important;
font-weight:750 !important;
line-height:1.25 !important;
}
#app .order-filters-panel label select{
width:calc(100% - .8rem) !important;
margin:.38rem .4rem 0 !important;
min-height:46px !important;
padding:.65rem 2.35rem .65rem .85rem !important;
border-radius:14px !important;
box-sizing:border-box !important;
}
#app .order-filters-actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:.55rem !important;
margin-top:.95rem !important;
padding:.75rem .2rem .05rem !important;
border-top:1px solid var(--border) !important;
}
#app .order-filter-clear-btn,
#app .order-filter-done-btn{
appearance:none !important;
-webkit-appearance:none !important;
min-height:40px !important;
width:auto !important;
margin:0 !important;
padding:.55rem .9rem !important;
border-radius:999px !important;
font:700 .8rem inherit !important;
line-height:1 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:.4rem !important;
cursor:pointer !important;
box-sizing:border-box !important;
box-shadow:none !important;
text-shadow:none !important;
}
#app .order-filter-clear-btn{
background:transparent !important;
background-image:none !important;
color:#0A5C40 !important;
-webkit-text-fill-color:#0A5C40 !important;
border:1px solid color-mix(in srgb,#3fb97f 38%,var(--border)) !important;
}
#app .order-filter-done-btn{
background:#3fb97f !important;
background-image:none !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border:1px solid #3fb97f !important;
}
html[data-theme="dark"] #app .order-filter-clear-btn,
html[data-theme="black"] #app .order-filter-clear-btn{
color:#4FBE94 !important;
-webkit-text-fill-color:#4FBE94 !important;
border-color:rgba(16,176,128,.55) !important;
}
@media(max-width:520px){
#app .order-filters-actions{justify-content:stretch !important;}
#app .order-filter-clear-btn,#app .order-filter-done-btn{flex:1 1 0 !important;}
}
/* ---- levromart-20260911-feature-pack-css ---- */
/* Final spacing / hierarchy pass: the promotional carousel is the first hero
surface, but it should never visually touch the fixed app header. */
#app .levro-home-hero{margin-top:.9rem !important;}
/* Vendor directory: filters are intentionally a full-width control row above
the search field on every breakpoint. This is structural, not a flex-order
trick, so Android/iOS and desktop keep the same reading order. */
#app .vendors-directory-controls{display:block !important;margin:.75rem 0 .55rem !important;}
#app .vendors-directory-controls .vendors-filters-toggle{width:100% !important;display:flex !important;align-items:center !important;justify-content:center !important;min-height:44px !important;}
#app .vendors-directory-search{position:relative !important;width:100% !important;margin:0 0 .8rem !important;z-index:25 !important;}
#app .vendors-directory-search input{width:100% !important;max-width:none !important;margin:0 !important;min-height:46px !important;border-radius:15px !important;}
.listing-billing-choice{margin:.7rem 0;padding:.75rem;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--primary) 5%,var(--card));}
.listing-billing-choice label{font-size:.76rem;font-weight:750;margin:0 0 .35rem;display:block;}
.listing-billing-choice select{margin:0;width:100%;}
.header-search-btn{position:relative!important;}
#levromartHeaderSearchBackdrop{position:fixed;inset:0;z-index:89990;display:none;background:rgba(2,8,23,.16);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);}
#levromartHeaderSearchBackdrop.open{display:block;}
#levromartHeaderSearchDock{position:fixed;left:.75rem;right:.75rem;top:calc(58px + env(safe-area-inset-top,0px) + .45rem);z-index:205;display:none;}
#levromartHeaderSearchDock.open{display:block;}
#levromartHeaderSearchDock .header-search-shell{position:relative;max-width:760px;margin:0 auto;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.2);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:.35rem;}
#levromartHeaderSearchInput{width:100%;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:.72rem 2.65rem .72rem 2.55rem!important;border-radius:14px;}
#levromartHeaderSearchDock .header-search-close{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);}
#levromartHeaderSearchSuggest{position:absolute;left:.35rem;right:.35rem;top:calc(100% + .35rem);max-height:55vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.18);padding:.35rem;}
.levro-smart-suggestion{width:100%;display:flex;align-items:center;gap:.65rem;padding:.68rem .62rem;border:0;background:transparent;color:var(--text);border-radius:12px;text-align:left;cursor:pointer;font:inherit;}
.levro-smart-suggestion:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);}
.levro-smart-suggestion i{width:1.25rem;text-align:center;color:var(--primary);}
.levro-smart-suggestion span{display:flex;flex-direction:column;min-width:0;}
.levro-smart-suggestion strong{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.levro-smart-suggestion small{font-size:.66rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.browse-smart-search-host{position:relative!important;z-index:240!important;}
.browse-smart-search-menu{position:absolute;left:0;right:0;top:calc(100% + .35rem);max-height:22rem;overflow:auto;background:var(--card);border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:.35rem;z-index:9999;}
.order-history-search{width:100%;margin:0!important;min-height:44px;border-radius:14px!important;}
.order-search-wrap{margin:.65rem 0 .15rem;position:relative;}
.order-search-wrap i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.order-search-wrap input{padding-left:2.55rem!important;}
/* While any marketplace search field owns focus, remove the fixed bottom
navigation from the layout entirely. display:none is intentional here: a
transform alone can be re-positioned by Android WebView/Chrome when the
visual viewport shrinks for the keyboard. */
body.search-input-active .bottom-nav{display:none !important;}
body.search-input-active{--levro-search-keyboard-active:1;}
@media(max-width:720px){
#levromartHeaderSearchDock{top:calc(56px + env(safe-area-inset-top,0px) + .35rem);}
#app .browse-filter-toolbar{grid-template-columns:1fr!important;gap:.55rem!important;}
#app .browse-filter-toolbar .browse-filter-trigger{order:-2!important;}
#app .browse-filter-toolbar>input{grid-column:auto!important;order:-1!important;}
}
/* Follow controls are compact but deliberately discoverable. */
.storefront-follow-wrap{position:relative !important;display:inline-flex !important;align-items:center !important;gap:.35rem !important;}
.storefront-follow-controls{display:inline-flex;align-items:center;gap:.35rem;}
.follow-btn{min-width:98px;}
.follow-settings-btn{min-width:42px !important;padding-inline:.65rem !important;}
.follow-settings-btn[disabled]{opacity:.55;cursor:not-allowed;}
.follow-menu{width:min(350px,calc(100vw - 1.25rem)) !important;max-height:min(70vh,540px);overflow:auto;}
.follow-menu{position:absolute;right:0;top:calc(100% + .45rem);width:min(330px,calc(100vw - 2rem));background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 46px rgba(0,0,0,.2);padding:.75rem;z-index:200;}
.follow-menu.hidden{display:none;}
.follow-pref-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.75rem;}
.follow-pref-row:last-child{border-bottom:0;}
.follow-mute-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.45rem;}
.follow-mute-grid button{padding:.45rem .25rem;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;font:600 .68rem inherit;cursor:pointer;}
.follow-mute-grid button.active{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);}
.storefront-follow-wrap{position:relative;display:inline-flex;}
/* 2026-09-11 final launch polish: compact search controls, order actions,
and Android-safe search interaction. */
#app .browse-filter-toolbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 46px !important;
align-items:center !important;
gap:.55rem !important;
position:relative !important;
}
#app .browse-filter-toolbar .browse-filter-trigger{
grid-column:1 !important;
grid-row:1 !important;
width:100% !important;
margin:0 !important;
}
#app .browse-filter-toolbar .levro-compact-search-toggle{
grid-column:2 !important;
grid-row:1 !important;
width:46px !important;
height:44px !important;
margin:0 !important;
border:1px solid color-mix(in srgb,var(--primary) 62%,var(--border)) !important;
background:color-mix(in srgb,var(--primary) 7%,transparent) !important;
color:var(--primary) !important;
border-radius:14px !important;
}
#app .browse-filter-toolbar .levro-compact-search-wrap{
display:contents !important;
}
#app .browse-filter-toolbar .levro-compact-search-wrap > input{
grid-column:1 / -1 !important;
grid-row:2 !important;
display:none !important;
width:100% !important;
min-height:46px !important;
margin:0 !important;
}
#app .browse-filter-toolbar .levro-compact-search-wrap.open > input{
display:block !important;
}
#app .browse-filter-toolbar .browse-filter-panel{grid-column:1 / -1 !important;grid-row:3 !important;}
/* Vendor page: filter and search icon share one clean control row; the actual
search field drops below only when requested. */
#app .vendors-directory-controls{
display:grid !important;
grid-template-columns:minmax(0,1fr) 46px !important;
gap:.55rem !important;
align-items:center !important;
margin:.75rem 0 .55rem !important;
}
#app .vendors-directory-controls .vendors-filters-toggle{
grid-column:1 !important;
width:100% !important;
min-height:44px !important;
margin:0 !important;
}
#app .vendors-directory-controls .levro-compact-search-toggle{
grid-column:2 !important;
width:46px !important;
height:44px !important;
margin:0 !important;
border:1px solid color-mix(in srgb,var(--primary) 62%,var(--border)) !important;
background:color-mix(in srgb,var(--primary) 7%,transparent) !important;
color:var(--primary) !important;
border-radius:14px !important;
}
#app .vendors-directory-search{position:relative !important;margin:0 0 .8rem !important;width:100% !important;}
#app .vendors-directory-search .levro-compact-search-wrap > input{display:none !important;}
#app .vendors-directory-search.open .levro-compact-search-wrap > input,
#app .vendors-directory-search.levro-compact-search-wrap.open > input{display:block !important;}
/* Orders: view controls are deliberately icon-only. Search is a separate
square icon and expands into a field below the utility row. */
#app .order-list-view-controls{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:.4rem !important;
margin:.65rem .15rem .45rem !important;
}
#app .order-view-icon{
width:42px !important;
height:42px !important;
padding:0 !important;
border-radius:12px !important;
border:1px solid var(--border) !important;
background:transparent !important;
color:var(--text-muted) !important;
}
#app .order-view-icon.active{background:color-mix(in srgb,var(--primary) 12%,transparent) !important;border-color:var(--primary) !important;color:var(--primary) !important;}
#app .order-search-wrap{
display:flex !important;
align-items:center !important;
width:100% !important;
margin:.15rem 0 .55rem !important;
position:relative !important;
min-height:42px !important;
}
#app .order-search-toggle{
width:42px !important;
height:42px !important;
padding:0 !important;
border:1px solid var(--border) !important;
border-radius:12px !important;
color:var(--primary) !important;
background:color-mix(in srgb,var(--primary) 7%,transparent) !important;
flex:0 0 auto !important;
}
#app .order-search-wrap .order-search-leading{display:none !important;}
#app .order-search-wrap .order-history-search{display:none !important;flex:1 1 auto !important;margin-left:.5rem !important;min-height:42px !important;}
#app .order-search-wrap.open .order-history-search{display:block !important;}
/* Restore order action semantics. Neutral workflow actions are gray; explicit
destructive actions keep the danger/red treatment. This does not touch the
rest of the marketplace buttons. */
#app .order-actions .order-action-neutral,
#app .order-action-wrap .order-action-neutral{background:#6b7280 !important;color:#fff !important;}
#app .order-actions .btn-danger,
#app .order-action-wrap .btn-danger{background:var(--danger) !important;color:#fff !important;}
/* Header search must always be clickable even if a later renderer reuses the
header node. */
#levromartHeaderSearchButton{pointer-events:auto !important;position:relative !important;z-index:5 !important;}
#headerSearchWrap{pointer-events:auto !important;}
#levromartHeaderSearchDock{z-index:10050 !important;}
@media(max-width:720px){
#app .browse-filter-toolbar{grid-template-columns:minmax(0,1fr) 46px !important;}
#app .vendors-directory-controls{grid-template-columns:minmax(0,1fr) 46px !important;}
}
/* ================================================================
FINAL MOBILE POLISH 2, compact search, sheet stacking, storefront
hierarchy, compact order controls, and clean follow interactions.
================================================================ */
#levromartHeaderSearchDock{z-index:11000 !important;}
#levromartHeaderSearchDock .header-search-leading{display:none !important;}
#levromartHeaderSearchDock .header-search-shell{padding:.28rem !important;}
#levromartHeaderSearchInput{padding:.72rem 2.75rem .72rem 1rem !important;}
#levromartHeaderSearchSuggest{z-index:11001 !important;}
#profilePanel,#notifPanel,#settingsPanel{z-index:12000 !important;}
.drawer-backdrop{z-index:11900 !important;}
#profilePanel.open,#notifPanel.open,#settingsPanel.open{z-index:12000 !important;}
/* Browse: Filter + search icon only. The actual field appears only after tap. */
#app .browse-filter-toolbar{
grid-template-columns:minmax(0,1fr) 44px !important;
gap:.5rem !important;
margin-bottom:.85rem !important;
}
#app .browse-filter-toolbar .browse-filter-trigger{
grid-column:1 !important;grid-row:1 !important;
width:100% !important;min-width:0 !important;
}
#app .browse-filter-toolbar .browse-compact-search-slot{
grid-column:2 !important;grid-row:1 !important;
width:44px !important;height:44px !important;
}
#app .browse-filter-toolbar .levro-compact-search-toggle{
width:44px !important;height:44px !important;padding:0 !important;
border-radius:12px !important;
}
#app .browse-filter-toolbar .levro-compact-search-wrap{
display:contents !important;
}
#app .browse-filter-toolbar .levro-compact-search-wrap > input{
grid-column:1 / -1 !important;grid-row:2 !important;
display:none !important;width:100% !important;margin:0 !important;
}
#app .browse-filter-toolbar .levro-compact-search-wrap.open > input{display:block !important;}
#app .browse-filter-toolbar .browse-filter-panel{grid-column:1 / -1 !important;grid-row:3 !important;}
/* Vendor directory: filter and search icon live on one short row. */
#app .vendors-directory-controls{
grid-template-columns:minmax(0,1fr) 44px !important;
gap:.5rem !important;
}
#app .vendors-directory-controls .levro-compact-search-toggle{
width:44px !important;height:44px !important;padding:0 !important;
border-radius:12px !important;
}
#app .vendors-directory-search{display:none !important;height:0 !important;margin:0 !important;}
#app .vendors-directory-search.open{display:block !important;height:auto !important;margin:.5rem 0 .7rem !important;}
#app .vendors-directory-search.open .levro-compact-search-wrap > input{display:block !important;}
/* Orders: filter/search sit beside each other. List/table are tiny square icons. */
#app .orders-filter-search-row,
#app .order-toolbar-row{display:flex !important;align-items:center !important;gap:.5rem !important;}
#app .orders-filter-search-row .order-filters-trigger,
#app .order-toolbar-row .order-filters-trigger{flex:1 1 auto !important;min-width:0 !important;}
#app .order-search-wrap{width:44px !important;flex:0 0 44px !important;margin:0 !important;min-height:44px !important;}
#app .order-search-wrap .order-search-toggle{width:44px !important;height:44px !important;border-radius:12px !important;}
#app .order-search-wrap.open{width:100% !important;flex:1 1 100% !important;}
#app .order-search-wrap.open .order-search-toggle{display:none !important;}
#app .order-search-wrap.open .order-history-search{display:block !important;margin:0 !important;}
#app .order-list-view-controls{margin:.45rem 0 .35rem auto !important;justify-content:flex-end !important;gap:.35rem !important;}
#app .order-view-icon{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;padding:0 !important;border-radius:10px !important;}
/* The search history menu is small and sits below the active field. */
.levro-search-history-menu{position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:11002;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.16);padding:.3rem;max-height:250px;overflow:auto;}
.levro-search-history-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .55rem;color:var(--text-muted);font-size:.68rem;font-weight:750;}
.levro-search-history-clear{border:0;background:transparent;color:var(--primary);font:600 .68rem inherit;cursor:pointer;padding:.25rem .35rem;}
.levro-search-history-item{display:flex;align-items:center;gap:.45rem;width:100%;padding:.55rem .55rem;border:0;background:transparent;color:var(--text);border-radius:10px;text-align:left;font:inherit;cursor:pointer;}
.levro-search-history-item:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);}
.levro-search-history-item .history-query{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;}
.levro-search-history-item .history-remove{width:25px;height:25px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;}
.levro-search-history-item .history-remove:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent);}
#levromartHeaderSearchDock{position:fixed !important;}
#levromartHeaderSearchDock .levro-search-history-menu{top:calc(100% + .3rem);}
/* Storefront: profile hierarchy. Avatar stays circular, actions are minimal. */
.storefront-profile .storefront-avatar,
.storefront-profile .storefront-avatar-button{border-radius:50% !important;aspect-ratio:1 / 1 !important;overflow:hidden !important;}
.storefront-profile .storefront-avatar-row{position:relative !important;display:block !important;min-height:78px !important;margin-bottom:.1rem !important;}
.storefront-profile .storefront-avatar-row .storefront-avatar{position:absolute !important;left:0 !important;bottom:0 !important;margin:0 !important;}
.storefront-profile .storefront-profile-actions{position:absolute !important;right:0 !important;top:.65rem !important;display:flex !important;align-items:center !important;gap:.35rem !important;flex-wrap:nowrap !important;padding:0 !important;z-index:35 !important;}
.storefront-profile .storefront-profile-actions .storefront-social-follow,
.storefront-profile .storefront-profile-actions .follow-btn{min-height:38px !important;height:38px !important;padding:.45rem .75rem !important;border-radius:999px !important;font-size:.78rem !important;}
.storefront-profile .storefront-profile-actions .storefront-social-icon,
.storefront-profile .storefront-profile-actions .follow-settings-btn,
.storefront-profile .storefront-profile-actions .storefront-more-icon{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.storefront-profile .storefront-profile-actions .storefront-social-icon span,
.storefront-profile .storefront-profile-actions .follow-settings-label{display:none !important;}
.storefront-profile .storefront-profile-actions .storefront-more-wrap{display:inline-flex !important;position:relative !important;}
.storefront-profile .storefront-profile-actions .follow-settings-btn{min-width:40px !important;}
.storefront-profile .storefront-profile-actions .follow-settings-btn .follow-settings-label{display:none !important;}
.storefront-profile .storefront-profile-name{margin-top:.2rem !important;padding-right:7.2rem !important;}
.storefront-profile .storefront-meta{padding-right:0 !important;}
.storefront-profile .storefront-profile-actions .ms-wrap{display:inline-flex !important;position:relative !important;}
.storefront-profile .storefront-profile-actions .ms-wrap > button{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.storefront-profile .storefront-profile-actions .ms-wrap > button:not(.follow-btn){font-size:0 !important;}
.storefront-profile .storefront-profile-actions .ms-wrap > button i{font-size:1rem !important;}
.storefront-profile .storefront-profile-actions .follow-menu{top:calc(100% + .35rem) !important;right:0 !important;width:min(286px,calc(100vw - 2rem)) !important;max-height:58vh !important;padding:.55rem !important;border-radius:14px !important;z-index:12001 !important;}
.storefront-profile .follow-pref-row{padding:.34rem 0 !important;font-size:.68rem !important;}
.storefront-profile .follow-pref-row input[type=checkbox]{width:18px !important;height:18px !important;accent-color:var(--primary) !important;}
.storefront-profile .follow-mute-grid{gap:.3rem !important;margin-top:.35rem !important;}
.storefront-profile .follow-mute-grid button{padding:.38rem .2rem !important;font-size:.62rem !important;min-height:32px !important;}
.storefront-profile .follow-menu strong{font-size:.75rem !important;}
.storefront-profile .follow-menu small{font-size:.65rem !important;}
/* Compact confirm dialog is intentionally above every storefront menu. */
.modal,.modal-backdrop,.confirm-dialog,.dialog-overlay{z-index:13000 !important;}
@media(max-width:620px){
.storefront-profile .storefront-avatar-row{min-height:70px !important;}
.storefront-profile .storefront-avatar{width:76px !important;height:76px !important;}
.storefront-profile .storefront-profile-actions{top:.5rem !important;gap:.28rem !important;}
.storefront-profile .storefront-profile-actions .follow-btn{min-height:36px !important;height:36px !important;padding:.42rem .68rem !important;font-size:.75rem !important;}
.storefront-profile .storefront-profile-actions .storefront-social-icon,
.storefront-profile .storefront-profile-actions .follow-settings-btn,
.storefront-profile .storefront-profile-actions .storefront-more-icon,
.storefront-profile .storefront-profile-actions .ms-wrap > button{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;}
.storefront-profile .storefront-profile-name{padding-right:6.4rem !important;}
}
/* Final product-management + overlay polish */
.vendor-products-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;}
.vendor-products-heading h2{margin:0;}
.vendor-products-heading-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.vendor-products-menu-wrap{position:relative;display:inline-flex;}
.vendor-products-menu-btn{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border-radius:12px!important;}
.vendor-products-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:5000;min-width:190px;padding:.3rem;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 42px rgba(0,0,0,.16);}
.vendor-products-menu.hidden{display:none!important;}
.vendor-products-menu button{width:100%;display:flex;align-items:center;gap:.55rem;padding:.65rem .7rem;border:0;background:transparent;color:var(--text);border-radius:10px;font:inherit;text-align:left;cursor:pointer;}
.vendor-products-menu button:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);}
.vendor-products-menu button span{margin-left:auto;color:var(--text-muted);font-size:.75rem;}
.vendor-discarded-panel{margin:.8rem 0 1rem;padding:.8rem;border:1px solid color-mix(in srgb,var(--danger) 20%,var(--border));background:color-mix(in srgb,var(--danger) 3%,var(--card));border-radius:18px;scroll-margin-top:1rem;}
.vendor-discarded-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;margin-bottom:.65rem;}
.vendor-discarded-head>div{display:flex;flex-direction:column;gap:.18rem;}
.vendor-discarded-head strong{font-size:.95rem;}
.vendor-discarded-head .muted{font-size:.7rem;line-height:1.4;}
.vendor-discarded-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6rem;}
.vendor-discarded-card{display:flex;gap:.65rem;align-items:center;padding:.55rem;border:1px solid var(--border);border-radius:14px;background:var(--card);min-width:0;}
.vendor-discarded-card .product-img{width:76px;height:76px;flex:0 0 76px;border-radius:11px;overflow:hidden;background:var(--border);display:grid;place-items:center;}
.vendor-discarded-card .product-img img{display:block;width:100%;height:100%;object-fit:cover;}
.vendor-discarded-copy{min-width:0;display:flex;flex-direction:column;gap:.18rem;}
.vendor-discarded-copy>strong{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vendor-discarded-copy>span{font-size:.67rem;color:var(--text-muted);line-height:1.3;}
.vendor-discarded-actions{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem;}
.vendor-discarded-actions .btn{margin:0!important;min-height:34px!important;padding:.42rem .58rem!important;font-size:.68rem!important;}
.product-duplicate-notice{display:flex;align-items:flex-start;gap:.7rem;margin:.55rem 0 .85rem;padding:.7rem .8rem;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--card-bg));border-radius:14px;color:var(--text);}
.product-duplicate-notice>i{color:var(--primary);font-size:1rem;margin-top:.1rem;}
.product-duplicate-notice span{display:flex;flex-direction:column;gap:.18rem;min-width:0;}
.product-duplicate-notice strong{font-size:.84rem;}
.product-duplicate-notice small{font-size:.73rem;line-height:1.4;color:var(--text-muted);}
.vendor-product-table-actions{display:flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap;}
.vendor-product-table-actions .btn{min-width:34px;padding:.4rem .5rem;}
.vendor-duplicate-action{border-color:var(--border);}
@media(max-width:560px){.product-duplicate-notice{padding:.65rem .7rem}.product-duplicate-notice small{font-size:.7rem}.vendor-product-table-actions{flex-wrap:wrap}}
.vendor-product-actions{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;margin-top:.7rem!important;padding-top:.1rem;}
.vendor-product-actions .btn{margin:0!important;}
.vendor-products-toolbar{gap:.65rem!important;margin-top:1rem!important;}
/* Search fields are hidden until their toolbar icon is tapped. No duplicate magnifying glass belongs inside these fields. */
#app .browse-filter-toolbar>input#searchInput{display:none!important;grid-column:1/-1!important;grid-row:2!important;padding-left:1rem!important;}
#app .browse-filter-toolbar.search-open>input#searchInput{display:block!important;}
#app .browse-filter-toolbar>input#searchInput::-webkit-search-cancel-button{display:block;}
#app .vendors-directory-search{display:none!important;height:0!important;overflow:visible!important;margin:0!important;}
#app .vendors-directory-search.open{display:block!important;height:auto!important;margin:.55rem 0 .7rem!important;}
#app .vendors-directory-search input#vendorSearchInput{padding-left:1rem!important;}
#app .orders-filter-search-row{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:.5rem!important;position:relative!important;z-index:80!important;width:100%!important;}
#app .orders-filter-search-row .order-filters-wrap{flex:1 1 auto!important;min-width:0!important;}
#app .orders-filter-search-row .order-search-wrap{flex:0 0 44px!important;width:44px!important;margin:0!important;}
#app .orders-filter-search-row .order-search-wrap.open{flex:1 1 auto!important;width:auto!important;}
#app .order-search-wrap .order-history-search{padding-left:1rem!important;}
#app .order-search-wrap.open .order-search-toggle{display:none!important;}
#app .order-list-view-controls{justify-content:flex-end!important;margin:.45rem 0 .35rem!important;}
#app .order-view-icon{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;border-radius:9px!important;}
/* The global sheets always sit above search and page content. */
#levromartHeaderSearchDock{z-index:90000!important;}
#profilePanel,#notifPanel,#settingsPanel{z-index:100000!important;position:fixed!important;}
.drawer-backdrop{z-index:99990!important;}
#profilePanel.open,#notifPanel.open,#settingsPanel.open{z-index:100000!important;}
#profilePanel.open~#levromartHeaderSearchDock,#notifPanel.open~#levromartHeaderSearchDock{z-index:90000!important;}
/* Storefront hierarchy: follow/alerts/more at top-right; message/call circles beside name. */
.storefront-profile .storefront-avatar,.storefront-profile .storefront-avatar-button{width:88px!important;height:88px!important;aspect-ratio:1/1!important;border-radius:50%!important;object-fit:cover!important;}
.storefront-profile .storefront-avatar-row{min-height:66px!important;display:block!important;position:relative!important;}
.storefront-profile .storefront-avatar-row .storefront-avatar{position:absolute!important;left:0!important;bottom:0!important;margin:0!important;}
.storefront-profile .storefront-top-actions{position:absolute!important;right:0!important;top:.45rem!important;display:flex!important;align-items:center!important;gap:.35rem!important;flex-wrap:nowrap!important;z-index:50!important;}
.storefront-profile .storefront-top-actions .storefront-follow-wrap{display:flex!important;align-items:center!important;gap:.35rem!important;}
.storefront-profile .storefront-top-actions .follow-btn{min-width:104px!important;height:40px!important;min-height:40px!important;padding:.45rem .8rem!important;}
.storefront-profile .storefront-top-actions .follow-settings-btn,.storefront-profile .storefront-top-actions .storefront-more-icon{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;}
.storefront-profile .storefront-top-actions .follow-settings-label{display:none!important;}
.storefront-profile .storefront-name-row{display:flex!important;align-items:center!important;gap:.55rem!important;flex-wrap:wrap!important;margin-top:.15rem!important;}
.storefront-profile .storefront-name-row .storefront-profile-name{margin:.15rem 0!important;padding:0!important;flex:1 1 auto!important;min-width:0!important;}
.storefront-profile .storefront-name-actions{display:inline-flex!important;align-items:center!important;gap:.35rem!important;flex:0 0 auto!important;}
.storefront-profile .storefront-name-actions .storefront-social-icon{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.storefront-profile .storefront-name-actions .storefront-social-icon span{display:none!important;}
.storefront-profile .follow-menu{width:min(270px,calc(100vw - 2rem))!important;max-height:48vh!important;padding:.45rem!important;overflow:auto!important;}
.storefront-profile .follow-pref-row{min-height:34px!important;padding:.22rem .05rem!important;font-size:.67rem!important;}
.storefront-profile .follow-pref-row input[type=checkbox]{width:16px!important;height:16px!important;margin:0!important;}
.storefront-profile .follow-menu strong{font-size:.72rem!important;margin-bottom:.25rem!important;}
.storefront-profile .follow-menu small{font-size:.62rem!important;margin-top:.35rem!important;}
.storefront-profile .follow-mute-grid{grid-template-columns:repeat(3,1fr)!important;gap:.25rem!important;margin-top:.25rem!important;}
.storefront-profile .follow-mute-grid button{min-height:28px!important;padding:.28rem .18rem!important;font-size:.58rem!important;border-radius:8px!important;}
@media(max-width:620px){
.vendor-products-heading-actions{width:100%;}
.vendor-products-heading-actions>.btn{flex:1 1 auto;}
.vendor-products-menu-wrap{margin-left:auto;}
.storefront-profile .storefront-avatar,.storefront-profile .storefront-avatar-button{width:76px!important;height:76px!important;}
.storefront-profile .storefront-avatar-row{min-height:62px!important;}
.storefront-profile .storefront-top-actions{top:.35rem!important;right:0!important;gap:.25rem!important;}
.storefront-profile .storefront-top-actions .follow-btn{min-width:92px!important;height:38px!important;min-height:38px!important;padding:.4rem .62rem!important;font-size:.72rem!important;}
.storefront-profile .storefront-top-actions .follow-settings-btn,.storefront-profile .storefront-top-actions .storefront-more-icon{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;}
.storefront-profile .storefront-name-row{gap:.35rem!important;align-items:center!important;}
.storefront-profile .storefront-name-row .storefront-profile-name{font-size:1.28rem!important;flex:1 1 calc(100% - 86px)!important;}
.storefront-profile .storefront-name-actions .storefront-social-icon{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;}
}
/* ---- levromart-launch-final-ux-v4 ---- */
/* ================================================================
LAUNCH FINAL UX, one source of truth for compact search/sheets/storefront
================================================================ */
/* Search fields never contain a decorative/leading search icon. The icon is
the control beside the filter, not part of the input. */
#app .browse-filter-toolbar,
#app .vendors-directory-controls,
#app .orders-filter-search-row{
position:relative !important;
z-index:80 !important;
}
#app .browse-filter-toolbar{
display:grid !important;
grid-template-columns:minmax(0,1fr) 42px !important;
grid-auto-rows:auto !important;
gap:.5rem !important;
align-items:center !important;
}
#app .browse-filter-toolbar > .browse-filter-trigger{
grid-column:1 !important;grid-row:1 !important;width:100% !important;margin:0 !important;
}
#app .browse-filter-toolbar > .browse-compact-search-slot{
display:block !important;grid-column:2 !important;grid-row:1 !important;width:42px !important;height:42px !important;
}
#app .browse-filter-toolbar > .browse-compact-search-slot.levro-compact-search-wrap{
display:block !important;
}
#app .browse-filter-toolbar > .browse-compact-search-slot > .levro-compact-search-toggle{
width:42px !important;height:42px !important;margin:0 !important;padding:0 !important;border-radius:12px !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;
color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 7%,var(--card)) !important;
border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border)) !important;
}
#app .browse-filter-toolbar > .browse-compact-search-slot > #searchInput,
#app .browse-filter-toolbar > #searchInput{
grid-column:1 / -1 !important;grid-row:2 !important;width:100% !important;margin:0 !important;
display:none !important;padding-left:1rem !important;padding-right:1rem !important;
}
#app .browse-filter-toolbar > .browse-compact-search-slot.open > #searchInput,
#app .browse-filter-toolbar > #searchInput:focus{
display:block !important;
}
#app .browse-filter-toolbar > .browse-filter-panel{grid-column:1 / -1 !important;grid-row:3 !important;}
#app .vendors-directory-controls{
display:grid !important;grid-template-columns:minmax(0,1fr) 42px !important;gap:.5rem !important;align-items:center !important;
}
#app .vendors-directory-controls > .vendors-filters-toggle{grid-column:1 !important;width:100% !important;margin:0 !important;}
#app .vendors-directory-controls > .levro-compact-search-toggle{
grid-column:2 !important;width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;
padding:0 !important;border-radius:12px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
color:var(--primary) !important;background:color-mix(in srgb,var(--primary) 7%,var(--card)) !important;
border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border)) !important;
}
#app .vendors-directory-search{display:none !important;height:0 !important;margin:0 !important;overflow:visible !important;position:relative !important;z-index:90 !important;}
#app .vendors-directory-search.open{display:block !important;height:auto !important;margin:.5rem 0 .7rem !important;}
#app .vendors-directory-search > input,
#app .vendors-directory-search.open > input{display:block !important;width:100% !important;margin:0 !important;padding-left:1rem !important;padding-right:1rem !important;}
#app .vendors-directory-search:not(.open) > input{display:none !important;}
/* Order filter + search are peers. List/table are tiny controls aligned right
below them. No second/stacked search icon. */
#app .orders-filter-search-row{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:.5rem !important;width:100% !important;}
#app .orders-filter-search-row .order-filters-wrap{flex:1 1 auto !important;min-width:0 !important;}
#app .orders-filter-search-row .order-search-wrap{flex:0 0 42px !important;width:42px !important;min-height:42px !important;margin:0 !important;position:relative !important;}
#app .orders-filter-search-row .order-search-toggle{width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;padding:0 !important;border-radius:12px !important;}
#app .orders-filter-search-row .order-search-wrap.open{flex:1 1 auto !important;width:auto !important;}
#app .orders-filter-search-row .order-search-wrap.open .order-search-toggle{display:none !important;}
#app .orders-filter-search-row .order-history-search{display:none !important;margin:0 !important;width:100% !important;padding-left:1rem !important;}
#app .orders-filter-search-row .order-search-wrap.open .order-history-search{display:block !important;}
#app .order-list-view-controls{display:flex !important;justify-content:flex-end !important;align-items:center !important;gap:.3rem !important;width:100% !important;margin:.38rem 0 .35rem !important;}
#app .order-view-icon{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;padding:0 !important;border-radius:9px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
/* Native search affordances must not add a second icon. */
#app input[type="search"]::-webkit-search-decoration,
#app input[type="search"]::-webkit-search-results-button,
#app input[type="search"]::-webkit-search-results-decoration{display:none !important;}
#levromartHeaderSearchInput::-webkit-search-cancel-button{display:block !important;}
/* Sheets always win the stacking contest. Search is below profile/notification
but above ordinary page content. */
#levromartHeaderSearchDock{z-index:90000 !important;}
#profilePanel,#notifPanel,#settingsPanel{z-index:100000 !important;position:fixed !important;isolation:isolate !important;}
.drawer-backdrop{z-index:99990 !important;}
.modal,.confirm-dialog,.dialog-overlay{z-index:130000 !important;}
#avatarCropModal,#vendorProfileImageLightbox,#mediaActionSheet{position:fixed!important;z-index:2147483500!important;}
/* Storefront: one clean action row at the top-right and message/call circles
beside the vendor name. */
.storefront-profile .storefront-avatar,
.storefront-profile .storefront-avatar-button{
width:82px !important;height:82px !important;min-width:82px !important;min-height:82px !important;
aspect-ratio:1 / 1 !important;border-radius:50% !important;overflow:hidden !important;display:grid !important;place-items:center !important;
}
.storefront-profile .storefront-avatar img,
.storefront-profile .storefront-avatar-button img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;display:block !important;}
.storefront-profile .storefront-profile-actions{position:absolute !important;right:0 !important;top:.45rem !important;display:flex !important;align-items:center !important;gap:.35rem !important;z-index:60 !important;}
.storefront-profile .storefront-profile-actions .follow-btn{min-width:104px !important;height:40px !important;min-height:40px !important;padding:.45rem .75rem !important;border-radius:999px !important;}
.storefront-profile .storefront-profile-actions .follow-settings-btn,
.storefront-profile .storefront-profile-actions .storefront-more-icon{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.storefront-profile .storefront-profile-actions .follow-settings-label{display:none !important;}
.storefront-profile .storefront-name-row{display:flex !important;align-items:center !important;gap:.45rem !important;flex-wrap:nowrap !important;margin-top:.3rem !important;padding-right:0 !important;}
.storefront-profile .storefront-name-row .storefront-profile-name{flex:1 1 auto !important;min-width:0 !important;margin:.1rem 0 !important;padding-right:0 !important;font-size:1.35rem !important;}
.storefront-profile .storefront-name-actions{display:inline-flex !important;align-items:center !important;gap:.3rem !important;flex:0 0 auto !important;}
.storefront-profile .storefront-name-actions .storefront-social-icon{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.storefront-profile .storefront-name-actions .storefront-social-icon span{display:none !important;}
.storefront-profile .storefront-name-actions .ms-wrap > button{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.storefront-profile .storefront-name-actions .ms-wrap > button span{display:none !important;}
/* Notification preferences are deliberately compact so the mute controls stay
visible without a huge dropdown. */
.storefront-profile .follow-menu{width:min(285px,calc(100vw - 2rem)) !important;max-height:52vh !important;overflow:auto !important;padding:.55rem !important;border-radius:14px !important;z-index:100001 !important;}
.storefront-profile .follow-menu strong{font-size:.72rem !important;margin-bottom:.2rem !important;}
.storefront-profile .follow-pref-row{min-height:31px !important;padding:.2rem .05rem !important;font-size:.66rem !important;}
.storefront-profile .follow-pref-row input[type=checkbox]{width:16px !important;height:16px !important;margin:0 !important;}
.storefront-profile .follow-menu small{font-size:.6rem !important;margin-top:.3rem !important;}
.storefront-profile .follow-mute-grid{gap:.25rem !important;margin-top:.25rem !important;}
.storefront-profile .follow-mute-grid button{min-height:28px !important;padding:.25rem .15rem !important;font-size:.57rem !important;border-radius:8px !important;}
/* Product manager action spacing: metadata and buttons are visually separated. */
#app .vendor-product-actions{display:flex !important;flex-wrap:wrap !important;gap:.55rem !important;margin-top:.65rem !important;padding-top:.15rem !important;}
#app .vendor-product-actions .btn{margin:0 !important;min-width:0 !important;}
#app .vendor-product-actions + *{margin-top:.5rem !important;}
#app .vendor-discarded-actions{display:flex !important;flex-wrap:wrap !important;gap:.45rem !important;margin-top:.45rem !important;}
#app .vendor-discarded-actions .btn{margin:0 !important;}
@media(max-width:620px){
.storefront-profile .storefront-avatar,.storefront-profile .storefront-avatar-button{width:74px !important;height:74px !important;min-width:74px !important;min-height:74px !important;}
.storefront-profile .storefront-profile-actions{top:.35rem !important;gap:.25rem !important;}
.storefront-profile .storefront-profile-actions .follow-btn{min-width:92px !important;height:36px !important;min-height:36px !important;padding:.4rem .6rem !important;font-size:.72rem !important;}
.storefront-profile .storefront-profile-actions .follow-settings-btn,.storefront-profile .storefront-profile-actions .storefront-more-icon{width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;}
.storefront-profile .storefront-name-row{gap:.3rem !important;}
.storefront-profile .storefront-name-row .storefront-profile-name{font-size:1.18rem !important;}
.storefront-profile .storefront-name-actions .storefront-social-icon,.storefront-profile .storefront-name-actions .ms-wrap > button{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;}
}
/* ---- levromart-final-source-of-truth-search-css ---- */
/* Final search UX: one source-of-truth geometry. The controls remain compact,
and the full search surface opens only on demand. */
#levromartHeaderSearchBackdrop{position:fixed!important;inset:0!important;z-index:200000!important;display:none!important;background:rgba(15,23,42,.18)!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important;cursor:pointer!important;}
#levromartHeaderSearchBackdrop.open{display:block!important;}
#levromartHeaderSearchDock{position:fixed!important;left:12px!important;right:12px!important;top:calc(92px + env(safe-area-inset-top,0px))!important;z-index:200001!important;display:none!important;pointer-events:none!important;}
#levromartHeaderSearchDock.open{display:block!important;pointer-events:auto!important;}
#levromartHeaderSearchDock .header-search-space{width:min(760px,100%);margin:0 auto;background:color-mix(in srgb,var(--card) 97%,transparent);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:22px;box-shadow:0 24px 70px rgba(15,23,42,.22);overflow:hidden;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
#levromartHeaderSearchDock .header-search-bar{display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent);}
#levromartHeaderSearchDock .header-search-bar>i{color:var(--primary);font-size:1.05rem;margin-left:.35rem;}
#levromartHeaderSearchInput{flex:1;min-width:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:.75rem .15rem!important;font-size:1rem!important;}
#levromartHeaderSearchInput:focus{outline:none!important;box-shadow:none!important;}
#levromartHeaderSearchDock .header-search-close{width:38px;height:38px;min-width:38px;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;}
#levromartHeaderSearchDock .header-search-close:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary);}
#levromartHeaderSearchDock .header-search-content{max-height:min(68vh,620px);overflow:auto;padding:.35rem .35rem .65rem;}
.levro-search-section{padding:.7rem .55rem .35rem;}
.levro-search-section-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.15rem .35rem .55rem;color:var(--text);font-size:.82rem;}
.levro-search-clear-all{border:0;background:none;color:var(--primary);font-size:.72rem;font-weight:700;padding:.25rem;cursor:pointer;}
.levro-search-history-list{display:flex;flex-direction:column;}
.levro-search-history-row{display:flex;align-items:center;border-radius:12px;}
.levro-search-history-row:hover{background:color-mix(in srgb,var(--primary) 6%,transparent);}
.levro-search-history-use{flex:1;min-width:0;display:flex;align-items:center;gap:.7rem;padding:.68rem .55rem;border:0;background:none;text-align:left;color:var(--text);font:inherit;cursor:pointer;}
.levro-search-history-use i{width:20px;text-align:center;color:var(--muted);}
.levro-search-history-use span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.levro-search-history-remove{width:36px;height:36px;margin-right:.25rem;border:0;background:transparent;color:var(--muted);border-radius:50%;cursor:pointer;display:grid;place-items:center;}
.levro-search-history-remove:hover{background:color-mix(in srgb,var(--danger) 9%,transparent);color:var(--danger);}
.levro-search-empty-history p,.levro-search-no-results{margin:.15rem .35rem .5rem;color:var(--muted);font-size:.76rem;line-height:1.45;}
.levro-search-recommendations{display:flex;flex-wrap:wrap;gap:.45rem;}
.levro-search-recommendation{display:inline-flex;align-items:center;gap:.42rem;padding:.55rem .7rem;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--primary) 6%,var(--card));color:var(--text);font-size:.72rem;font-weight:650;cursor:pointer;}
.levro-search-recommendation i{color:var(--primary);}
.levro-smart-result{width:100%;display:flex;align-items:center;gap:.75rem;padding:.7rem .55rem;border:0;background:transparent;text-align:left;color:var(--text);border-radius:12px;cursor:pointer;}
.levro-smart-result:hover{background:color-mix(in srgb,var(--primary) 7%,transparent);}
.levro-smart-result>i{width:26px;text-align:center;color:var(--primary);}
.levro-smart-result span{display:flex;flex-direction:column;min-width:0;}
.levro-smart-result strong{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.levro-smart-result small{margin-top:.12rem;color:var(--muted);font-size:.67rem;}
/* Browse Everything: filter + exactly one search icon. */
#app .browse-filter-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:.5rem!important;align-items:start!important;position:relative!important;}
#app .browse-filter-toolbar>.browse-filter-trigger{grid-column:1!important;grid-row:1!important;width:100%!important;margin:0!important;}
#app .browse-filter-toolbar>.levro-final-search-toggle{grid-column:2!important;grid-row:1!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;margin:0!important;border-radius:13px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
#app .browse-filter-toolbar>.browse-compact-search-slot,#app .browse-filter-toolbar>.levro-compact-search-toggle{display:none!important;}
#app .browse-filter-toolbar>input#searchInput{grid-column:1/-1!important;grid-row:2!important;display:none!important;width:100%!important;margin:0!important;}
#app .browse-filter-toolbar.final-search-open>input#searchInput{display:block!important;}
#app .browse-filter-toolbar>.levro-compact-history{grid-column:1/-1!important;grid-row:3!important;position:relative!important;z-index:100!important;display:none;}
#app .browse-filter-toolbar.final-search-open>.levro-compact-history{display:block!important;}
/* Vendors: same geometry as Browse. */
#app .vendors-directory-controls{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:.5rem!important;align-items:center!important;}
#app .vendors-directory-controls>.vendors-filters-toggle{grid-column:1!important;width:100%!important;margin:0!important;}
#app .vendors-directory-controls>.levro-final-search-toggle{grid-column:2!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;margin:0!important;border-radius:13px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
#app .vendors-directory-search{display:none!important;height:auto!important;margin:0!important;overflow:visible!important;position:relative!important;}
#app .vendors-directory-search.final-search-open{display:block!important;margin:.5rem 0 .7rem!important;}
#app .vendors-directory-search.final-search-open>input{display:block!important;width:100%!important;margin:0!important;}
#app .vendors-directory-search>.levro-compact-history{position:relative!important;z-index:100!important;display:none;}
#app .vendors-directory-search.final-search-open>.levro-compact-history{display:block!important;}
/* Orders: the icon is a peer of the filter, never a new line underneath it. */
#app .orders-filter-search-row{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:.5rem!important;width:100%!important;position:relative!important;}
#app .orders-filter-search-row>.order-filters-wrap{flex:1 1 auto!important;min-width:0!important;}
#app .orders-filter-search-row>.orders-search-slot{display:none!important;}
#app .orders-filter-search-row>.final-order-search-wrap{position:relative!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;display:flex!important;align-items:center!important;margin:0!important;}
#app .orders-filter-search-row>.final-order-search-wrap.final-order-open{flex:1 1 auto!important;width:auto!important;min-width:0!important;}
#app .final-order-search-wrap>.order-search-toggle{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:13px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
#app .final-order-search-wrap.final-order-open>.order-search-toggle{display:none!important;}
#app .final-order-search-wrap>.order-history-search{display:none!important;flex:1!important;width:100%!important;min-width:0!important;margin:0!important;}
#app .final-order-search-wrap.final-order-open>.order-history-search{display:block!important;}
#app .final-order-search-wrap>.levro-compact-history{position:absolute!important;left:0!important;right:0!important;top:calc(100% + .35rem)!important;z-index:150!important;display:none;}
#app .final-order-search-wrap.final-order-open>.levro-compact-history{display:block!important;}
.levro-compact-history{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 36px rgba(15,23,42,.14);padding:.3rem;}
.levro-compact-history-head{display:flex;align-items:center;justify-content:space-between;padding:.42rem .45rem .35rem;font-size:.72rem;color:var(--muted);}
.levro-compact-history-head button{border:0;background:none;color:var(--primary);font-size:.67rem;font-weight:700;cursor:pointer;}
.levro-compact-history-row{display:flex;align-items:center;gap:.2rem;border-radius:10px;}
.levro-compact-history-row:hover{background:color-mix(in srgb,var(--primary) 6%,transparent);}
.levro-compact-history-row button{border:0;background:transparent;color:var(--text);cursor:pointer;}
.levro-compact-history-row .compact-use{flex:1;text-align:left;padding:.55rem .45rem;font-size:.73rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.levro-compact-history-row .compact-use i{margin-right:.5rem;color:var(--muted);}
.levro-compact-history-row .compact-remove{width:32px;height:32px;border-radius:50%;color:var(--muted);}
.levro-compact-history-row .compact-remove:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent);}
.levro-compact-history-empty{margin:.25rem .45rem .55rem;color:var(--muted);font-size:.7rem;}
.vendor-inline-verified{color:#16a34a!important;font-size:.72em!important;vertical-align:middle!important;}
.vendor-follower-badge{white-space:nowrap!important;}
@media(max-width:620px){
#levromartHeaderSearchDock{left:8px!important;right:8px!important;top:calc(86px + env(safe-area-inset-top,0px))!important;}
#levromartHeaderSearchDock .header-search-content{max-height:70vh!important;}
#app .orders-filter-search-row{gap:.35rem!important;}
#app .orders-filter-search-row>.final-order-search-wrap{flex-basis:42px!important;width:42px!important;min-width:42px!important;}
#app .final-order-search-wrap>.order-search-toggle{width:42px!important;height:42px!important;min-width:42px!important;}
}
/* ---- levromart-final-follow-repair-css ---- */
.storefront-follow-wrap{position:relative!important;display:inline-flex!important;z-index:80!important;}
.storefront-follow-controls{display:flex!important;align-items:center!important;gap:.35rem!important;}
.storefront-follow-wrap .follow-btn{min-width:104px!important;height:40px!important;min-height:40px!important;border-radius:999px!important;padding:.45rem .8rem!important;white-space:nowrap!important;}
.storefront-follow-wrap .follow-settings-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.storefront-follow-wrap .follow-settings-btn:disabled{opacity:.5!important;cursor:not-allowed!important;}
.storefront-follow-wrap .follow-menu{position:absolute!important;right:0!important;top:calc(100% + .45rem)!important;width:min(290px,calc(100vw - 2rem))!important;background:var(--card,#fff)!important;color:var(--text,#1f2937)!important;border:1px solid var(--border,#dbe3ea)!important;border-radius:16px!important;padding:.7rem!important;box-shadow:0 18px 45px rgba(15,23,42,.2)!important;z-index:100000!important;}
.storefront-follow-wrap .follow-menu.hidden{display:none!important;}
.storefront-follow-wrap .follow-menu>strong{display:block!important;font-size:.82rem!important;margin-bottom:.45rem!important;}
.follow-pref-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.75rem!important;padding:.38rem 0!important;font-size:.75rem!important;}
.follow-mute-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:.35rem!important;margin-top:.35rem!important;}
.follow-mute-grid button{border:1px solid var(--border,#dbe3ea)!important;background:transparent!important;border-radius:9px!important;padding:.4rem .25rem!important;cursor:pointer!important;color:inherit!important;font-size:.68rem!important;}
.follow-mute-grid button.active{background:color-mix(in srgb,var(--primary) 12%,transparent)!important;border-color:var(--primary)!important;color:var(--primary)!important;font-weight:700!important;}
@media(max-width:620px){.storefront-follow-wrap .follow-btn{min-width:92px!important;height:38px!important;min-height:38px!important;font-size:.75rem!important;}.storefront-follow-wrap .follow-settings-btn{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;}}
/* ---- levromart-discarded-bulk-css ---- */
.vendor-discarded-bulkbar{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:0 0 .65rem;padding:.55rem .65rem;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--card) 92%,transparent);font-size:.75rem}
.vendor-discarded-bulkbar label{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;cursor:pointer}
.vendor-discarded-bulkbar .btn{margin-left:auto!important}
.vendor-discarded-card{position:relative!important;align-items:flex-start!important}
.discarded-select{display:grid;place-items:center;flex:0 0 auto;padding-top:.2rem;cursor:pointer}
.discarded-select input{width:18px;height:18px;accent-color:var(--primary)}
/* ---- levromart-hard-top-search-css ---- */
#levromartHeaderSearchBackdrop{z-index:2147483000!important}
#levromartHeaderSearchDock{z-index:2147483001!important}
#levromartHeaderSearchButton{position:relative!important;z-index:2147483002!important;cursor:pointer!important}
/* ---- levromart-phase1-urgent-final-css ---- */
#app .vendor-product-actions .btn-danger,#app .vendor-discarded-actions .btn-danger,#app button[data-status="delete"]{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}
#app .vendor-admin-action[data-status="rejected"]{background:#d97706!important;border-color:#d97706!important;color:#fff!important}
#app .vendor-admin-action[data-status="verified"]{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
#app .vendor-edit-action{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important}
#app .vendor-pause-action{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
#app button[onclick*="exportFinancePdf"]{background:transparent!important;border:1px solid var(--border)!important;color:var(--text-muted)!important}
#app .vendor-products-heading-actions button[onclick*="toggleVendorProductsView"]{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important}
#app .vendor-products-heading-actions button[onclick*="toggleVendorProductsView"]:nth-child(2){background:#64748b!important;border-color:#64748b!important}
#app .vendor-products-unified-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.45rem!important;margin:.65rem 0 .9rem!important;overflow:visible!important}
#app .vendor-products-unified-tabs button{min-height:42px!important;padding:.55rem .5rem!important;border:1px solid var(--border)!important;background:var(--card)!important;color:var(--text-muted)!important;border-radius:12px!important;font-size:.76rem!important;font-weight:750!important}
#app .vendor-products-unified-tabs button.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
#app .vendor-product-card-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:.65rem!important}
#app .vendor-product-card-grid>.card{min-width:0!important;width:100%!important}
#app .vendor-notification-menu,#app .follow-menu{width:min(300px,calc(100vw - 2rem))!important;max-width:min(300px,calc(100vw - 2rem))!important;max-height:58vh!important;overflow:auto!important;padding:.55rem!important}
#app .follow-menu .follow-pref-row{min-height:42px!important;padding:.28rem .25rem!important}
#app .follow-menu .follow-mute-grid{grid-template-columns:repeat(4,1fr)!important}
#app .order-filters-panel{width:min(300px,calc(100vw - 2rem))!important;max-width:min(300px,calc(100vw - 2rem))!important;max-height:48vh!important;overflow:auto!important;padding:.7rem!important}
#app .orders-filter-search-row{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;width:100%!important;gap:.45rem!important}
#app .orders-filter-search-row>.order-filters-wrap{flex:1 1 auto!important;min-width:0!important}
#app .orders-filter-search-row>.final-order-search-wrap{flex:0 0 42px!important;width:42px!important;min-width:42px!important}
#levromartHeaderSearchBackdrop{background:rgba(15,23,42,.10)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
#levromartHeaderSearchDock .phase1-search-shell{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--card)!important}
#confirmModal,#textPromptModal,#notReceivedModal,#suggestionModal,#storefrontShareModal,#productRegionsModal{z-index:2147483600!important}
#confirmModal .modal-content,#textPromptModal .modal-content,#notReceivedModal .modal-content,#suggestionModal .modal-content,#storefrontShareModal .modal-content,#productRegionsModal .modal-content{position:relative!important;z-index:2147483601!important}
.profile-request-badge{margin-left:.4rem!important;font-size:.62rem!important;min-width:1.25rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.profile-request-badge.hidden{display:none!important}
.rating-five-star{background:#7c3aed!important;color:#fff!important;border-color:#7c3aed!important}
.password-field-wrap{position:relative!important;width:100%!important}.password-field-wrap>input{width:100%!important;padding-right:3rem!important;box-sizing:border-box!important}.password-visibility-toggle{position:absolute!important;right:.45rem!important;top:50%!important;transform:translateY(-50%)!important;width:40px!important;height:40px!important;border:0!important;background:transparent!important;color:var(--text-muted)!important;border-radius:10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.password-visibility-toggle:hover{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 7%,transparent)!important}
.storefront-own-message-icon{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
@media(max-width:520px){#app .vendor-products-unified-tabs button{font-size:.7rem!important;padding:.5rem .3rem!important}#app .vendor-product-card-grid{gap:.5rem!important}}
/* ---- levromart-astra-final-qa-css ---- */
/* Astra final QA: request picker */
.req-category-picker-wrap{position:relative}.req-category-picker{width:100%;min-height:46px;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.85rem;background:color-mix(in srgb,var(--primary) 3%,var(--input-bg));color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:.6rem;font:inherit;cursor:pointer;text-align:left}.req-category-picker:hover,.req-category-picker[aria-expanded="true"]{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}.req-category-picker i{color:var(--text-muted);font-size:.75rem}.req-category-picker-modal{position:fixed;inset:0;z-index:2147483605;background:rgba(2,8,23,.48);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:1rem}.req-category-picker-sheet{width:min(520px,100%);max-height:min(78vh,680px);overflow:hidden;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.35);display:flex;flex-direction:column;color:var(--text)}.req-category-picker-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:1rem 1rem .7rem}.req-category-picker-head strong{display:block;font-size:1rem}.req-category-picker-head small{display:block;color:var(--text-muted);font-size:.7rem;margin-top:.15rem}.req-category-search{margin:0 .8rem .65rem;position:relative}.req-category-search i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}.req-category-search input{padding-left:2.4rem;margin:0;background:var(--input-bg);border-radius:13px}.req-category-results{overflow:auto;padding:.25rem .7rem .8rem}.req-category-option{width:100%;border:1px solid transparent;background:transparent;color:var(--text);padding:.72rem .7rem;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:.7rem;text-align:left;cursor:pointer;font:inherit}.req-category-option:hover,.req-category-option.selected{background:color-mix(in srgb,var(--primary) 10%,transparent);border-color:color-mix(in srgb,var(--primary) 24%,var(--border))}.req-category-option strong{display:block;font-size:.84rem}.req-category-option small{display:block;color:var(--text-muted);font-size:.68rem;margin-top:.12rem}.req-category-option>i{color:var(--primary);font-size:.8rem}.req-category-empty{padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.8rem}
/* Compact vendor mute popup */
#app .follow-menu .follow-mute-grid{grid-template-columns:repeat(4,1fr)!important}.follow-mute-grid button[data-mute]{min-height:36px}.follow-mute-grid button[data-mute="always"]{grid-column:auto!important}.follow-menu{width:min(320px,calc(100vw - 1.5rem))!important;max-height:52vh!important}
/* Softer five-star rating */
.rating-five-star{background:color-mix(in srgb,#8b5cf6 12%,transparent)!important;color:#8b5cf6!important;border:1px solid color-mix(in srgb,#8b5cf6 38%,transparent)!important;box-shadow:0 0 0 1px color-mix(in srgb,#8b5cf6 8%,transparent) inset!important}
/* Listing forms stay inside viewport */
#productModal .modal-content,#packageModal .modal-content{max-width:min(720px,calc(100vw - 1rem))!important;overflow-x:hidden!important}#productModal,#packageModal{overflow-x:hidden!important}#productModal input,#productModal select,#productModal textarea,#packageModal input,#packageModal select,#packageModal textarea{max-width:100%!important;min-width:0!important}.product-detail-card,.owner-listing-management{overflow-x:hidden!important}
/* Variety choices directly beneath the main product image. */
.product-gallery-varieties{margin:.65rem 0 .9rem;padding:.7rem;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--primary) 3%,var(--card));}
.product-gallery-varieties-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;}
.product-gallery-varieties-head strong{font-size:.8rem;}
.product-gallery-varieties-list{display:flex;gap:.5rem;overflow-x:auto;padding:.05rem 0 .15rem;scrollbar-width:none;}
.product-gallery-varieties-list::-webkit-scrollbar{display:none;}
.product-gallery-variety{flex:0 0 112px;display:flex;flex-direction:column;gap:.28rem;padding:.45rem;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;font:inherit;}
.product-gallery-variety.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent);}
.product-gallery-variety img,.product-gallery-variety-placeholder{width:100%;height:74px;border-radius:9px;object-fit:cover;background:color-mix(in srgb,var(--primary) 8%,var(--input-bg));}
.product-gallery-variety-placeholder{display:flex;align-items:center;justify-content:center;color:var(--primary);}
.product-gallery-variety strong{font-size:.72rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-gallery-variety small{font-size:.66rem;color:var(--text-muted);line-height:1.2;}
@media(max-width:520px){.product-gallery-variety{flex-basis:104px;}.product-gallery-variety img,.product-gallery-variety-placeholder{height:68px;}}
/* Selected variety summary */
.selected-variant-summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;margin:.55rem 0 .8rem;padding:.65rem .75rem;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));background:color-mix(in srgb,var(--primary) 5%,var(--card));border-radius:13px}.selected-variant-summary span{font-size:.68rem}.selected-variant-summary strong{font-size:.8rem}.selected-variant-summary strong:last-child{color:var(--primary)}
/* Owner listing details */
.owner-listing-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.owner-listing-head h3{font-size:1rem}.owner-listing-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:.85rem 0}.owner-listing-stats>div{padding:.6rem .45rem;border:1px solid var(--border);border-radius:11px;text-align:center}.owner-listing-stats span{display:block;color:var(--text-muted);font-size:.65rem}.owner-listing-stats strong{display:block;margin-top:.15rem;font-size:.82rem}.owner-listing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}.owner-listing-variant-note{font-size:.72rem;margin:.65rem 0 0}.owner-listing-variant-note i{color:var(--primary)}
/* Admin people */
.admin-people-table-xscroll{overflow:auto;max-height:58vh;border:1px solid var(--border);border-radius:14px;background:var(--card)}.admin-people-table{min-width:900px}.admin-phone-btn{border:0;background:transparent;color:var(--primary);font:inherit;cursor:pointer;padding:.25rem .35rem;border-radius:8px}.admin-phone-btn:hover{background:color-mix(in srgb,var(--primary) 9%,transparent)}.admin-new-tag{background:color-mix(in srgb,var(--primary) 14%,transparent)!important;color:var(--primary)!important;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}.admin-joined-cell{font-variant-numeric:tabular-nums}
/* Search mode hides fixed UI but preserves deliberate internal scrollers */
body.search-input-active #bottomNav,body.search-input-active #aiChatFab,body.search-input-active #cartFab{display:none!important;visibility:hidden!important;pointer-events:none!important}
/* Neutral back actions */
#app .settings-back-btn,#app button[onclick*="navigate('home')"].btn-sm,#app button[onclick*="navigate('vendorDashboard')"].btn-outline{background:#6b7280!important;border-color:#6b7280!important;color:#fff!important}
/* Levi icon: subtle green texture only on the icon */
#aiChatFab .ai-chat-fab-logo{filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.12))!important;-webkit-filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.12))!important;background:transparent!important;border-radius:0!important}
/* Periodic route trace: trace, pause, trace */
.levro-vendor-route-path{stroke-dasharray:16 12!important;animation:levroRouteTracePause 4.8s ease-in-out infinite!important}@keyframes levroRouteTracePause{0%{stroke-dashoffset:0;opacity:.76;stroke-width:4}45%{stroke-dashoffset:-180px;opacity:1;stroke-width:5}62%{stroke-dashoffset:-180px;opacity:.86;stroke-width:4}100%{stroke-dashoffset:-180px;opacity:.76;stroke-width:4}}@media(prefers-reduced-motion:reduce){.levro-vendor-route-path{animation:none!important}}
@media(max-width:520px){.owner-listing-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.selected-variant-summary{grid-template-columns:1fr auto}.selected-variant-summary span{grid-column:1/-1}}
.vendor-products-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.6rem!important}.vendor-products-search-compact{position:relative;flex:0 0 auto}.vendor-product-search-toggle{width:42px!important;height:42px!important;min-width:42px!important;border:1px solid var(--border)!important;border-radius:12px!important;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 5%,var(--card))!important}.vendor-product-search-popover{position:absolute;right:0;top:calc(100% + .4rem);z-index:300;width:min(340px,calc(100vw - 2rem));display:none;align-items:center;gap:.4rem;padding:.35rem;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-float)}.vendor-product-search-popover.open{display:flex}.vendor-product-search-popover>i{color:var(--text-muted);margin-left:.4rem}.vendor-product-search-popover input{margin:0!important;border:0!important;box-shadow:none!important;min-width:0}.vendor-product-search-close{flex:0 0 38px;width:38px;height:38px}
/* ---- levromart-refinement-20260912 ---- */
.req-category-search,.req-sector-search{position:relative;display:flex;align-items:center;gap:.45rem}.req-category-search>i,.req-sector-search>i{position:absolute;left:.85rem;z-index:2;color:var(--text-muted);pointer-events:none}.req-category-search input,.req-sector-search input{padding:.72rem 2.65rem .72rem 2.6rem!important;min-width:0!important;width:100%!important;box-sizing:border-box!important}.req-category-picker,.req-sector-picker{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .85rem;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--text);border-radius:13px;font:inherit;text-align:left;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.08)}.req-category-picker>span,.req-sector-picker>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.req-category-picker-modal,.req-sector-picker-modal{position:fixed;inset:0;z-index:14000;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(2,6,23,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:levroPickerIn .16s ease both}.req-category-picker-sheet,.req-sector-picker-sheet{width:min(520px,94vw);max-height:min(78vh,680px);overflow:hidden;background:color-mix(in srgb,var(--card) 95%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.32);padding:.9rem}.req-category-results{max-height:54vh;overflow:auto;margin-top:.65rem;display:flex;flex-direction:column;gap:.25rem}.req-picker-row{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .75rem;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}.req-picker-row:hover,.req-picker-row.selected{background:color-mix(in srgb,var(--primary) 9%,transparent);border-color:color-mix(in srgb,var(--primary) 26%,transparent)}.req-picker-row i{opacity:0;color:var(--primary)}.req-picker-row.selected i{opacity:1}.req-category-empty{padding:1rem;text-align:center;color:var(--text-muted);font-size:.8rem}@keyframes levroPickerIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#bottomNav{min-height:52px!important;height:52px!important;padding:.16rem .22rem max(.16rem,env(safe-area-inset-bottom,0px))!important;border-radius:17px!important}#bottomNav .bottom-nav-item{min-height:40px!important;height:40px!important;padding:.12rem .08rem!important;font-size:.72rem!important}#bottomNav .bottom-nav-item i,#bottomNav .bottom-nav-item .bn-icon{font-size:.9rem!important}#bottomNav .bottom-nav-add{width:40px!important;height:40px!important;top:0!important;border:0!important;box-shadow:none!important}#bottomNav.nav-scroll-shrink{transform:translateY(2px) scale(.965)!important;opacity:.82!important}@media(max-width:720px){#bottomNav{left:.58rem!important;right:.58rem!important;bottom:calc(.42rem + env(safe-area-inset-bottom,0px))!important}#bottomNav .bottom-nav-item{min-height:40px!important;height:40px!important;font-size:.61rem!important}}
#aiChatFab{position:fixed!important;isolation:isolate!important;overflow:visible!important}#aiChatFab::before{content:""!important;position:absolute!important;inset:0!important;border-radius:50%!important;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 28%),radial-gradient(circle at 72% 75%,rgba(0,0,0,.09),transparent 42%),repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,rgba(0,0,0,.025) 2px 4px),color-mix(in srgb,var(--primary) 92%,#3fb97f)!important;opacity:.96!important;z-index:1!important;pointer-events:none!important}#aiChatFab::after{content:none!important;display:none!important}#aiChatFab .ai-chat-fab-logo{display:block!important;position:absolute!important;inset:17%!important;width:66%!important;height:66%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;opacity:1!important;visibility:visible!important;pointer-events:none!important;z-index:2!important;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.12))!important;-webkit-filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.12))!important;background:transparent!important;border-radius:0!important}
body.search-input-active #bottomNav,body.search-input-active #aiChatFab,body.search-input-active #cartFab{display:none!important}
#app [data-levro-back]{background:#6b7280!important;border-color:#6b7280!important;color:#fff!important}.ai-history-select-toolbar{display:flex;align-items:center;gap:.45rem;padding:.1rem 0 .55rem}.ai-history-select-toolbar>strong{flex:1;font-size:.76rem}.ai-history-batch-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:.38rem .62rem;font:inherit;font-size:.7rem}.ai-history-danger{color:var(--danger)!important}.ai-chat-history-item.selected{border-color:color-mix(in srgb,var(--primary) 42%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--card))}.ai-history-check{width:1.55rem;height:1.55rem;border-radius:50%;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent}.ai-history-check.active{background:var(--primary);border-color:var(--primary);color:#fff}
#aiChatFab::after{content:none!important;display:none!important}
.levro-route-neon-core{filter:drop-shadow(0 0 3px rgba(34,197,94,.45)) drop-shadow(0 0 7px rgba(34,197,94,.18))}
@media(prefers-reduced-motion:reduce){.req-category-picker-modal,.req-sector-picker-modal{animation:none}#bottomNav{transition:none!important}#bottomNav.nav-scroll-shrink{transform:none!important;opacity:1!important}}
/* ---- levromart-precision-refinement-v2 ---- */
.chat-header-back{width:2.25rem!important;height:2.25rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:var(--text)!important}
.chat-header-back:hover,.chat-header-back:focus-visible{background:transparent!important;box-shadow:none!important}
.chat-pinned-strip{padding:.35rem .6rem;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;z-index:3}
.chat-pinned-strip:empty{display:none}
.chat-pinned-strip-inner{display:flex;align-items:center;gap:.45rem;min-width:0}.chat-pinned-label{flex:0 0 auto;font-size:.68rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.chat-pinned-items{display:flex;gap:.38rem;overflow-x:auto;scrollbar-width:none;min-width:0}.chat-pinned-items::-webkit-scrollbar{display:none}.chat-pinned-item{flex:0 0 auto;display:flex;align-items:center;gap:.42rem;max-width:210px;padding:.36rem .5rem;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:12px;text-align:left;cursor:pointer;min-height:44px}.chat-pinned-item img{width:34px;height:34px;border-radius:8px;object-fit:cover;background:var(--border);flex:0 0 34px}.chat-pinned-item-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);flex:0 0 34px}.chat-pinned-item span:last-child{min-width:0}.chat-pinned-item strong{display:block;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-pinned-item small{display:block;color:var(--text-muted);font-size:.62rem;margin-top:.08rem}.chat-message-jump-highlight{animation:levroMessageJump 1.5s ease both;outline:2px solid color-mix(in srgb,var(--primary) 60%,transparent);outline-offset:2px}@keyframes levroMessageJump{0%,100%{background-color:inherit}15%,55%{background:color-mix(in srgb,var(--primary) 18%,transparent)}}
.product-variant-picker-list{display:flex;justify-content:center!important;flex-wrap:wrap;gap:.45rem}.product-variant-choice{min-width:120px}.selected-variant-summary{grid-template-columns:1fr auto!important}.selected-variant-summary>div{min-width:0}.selected-variant-summary strong:last-child{justify-self:end}
@media(max-width:520px){.product-variant-choice{min-width:0;flex:1 1 120px}.selected-variant-summary{grid-template-columns:minmax(0,1fr) auto!important}}
body.search-input-active #bottomNav,body.search-input-active #aiChatFab,body.search-input-active #cartFab{display:none!important}
#bottomNav{height:50px!important;min-height:50px!important;border-radius:999px!important;background:color-mix(in srgb,var(--card) 72%,transparent)!important;backdrop-filter:blur(18px) saturate(150%)!important;-webkit-backdrop-filter:blur(18px) saturate(150%)!important;border:1px solid color-mix(in srgb,var(--text) 8%,transparent)!important;box-shadow:0 12px 30px rgba(0,0,0,.16)!important;padding:.12rem .18rem max(.12rem,env(safe-area-inset-bottom,0px))!important}
#bottomNav .bottom-nav-item{height:38px!important;min-height:38px!important;border-radius:999px!important;padding:.08rem .1rem!important}.nav-scroll-shrink{opacity:.72!important;transform:translateY(2px) scale(.97)!important}
#bottomNav .bottom-nav-add{position:relative!important;margin:0!important;align-self:center!important;justify-self:center!important}
@media(max-width:720px){#bottomNav{left:.7rem!important;right:.7rem!important;bottom:calc(.35rem + env(safe-area-inset-bottom,0px))!important}.bottom-nav-add{flex:0 0 40px!important}.bn-group{gap:.08rem!important}}
.admin-dash-tabs{display:flex!important;flex:0 0 auto!important;width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;justify-content:flex-start!important;align-items:stretch!important;gap:.35rem!important;padding-inline:.45rem!important;padding-right:2.75rem!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x!important;overscroll-behavior-x:contain!important;scroll-padding-inline:.45rem!important;overscroll-behavior-y:none!important}.admin-dash-tabs::-webkit-scrollbar{display:none}.admin-dash-tabs .dash-tab{flex:0 0 auto!important;min-width:max-content!important;white-space:nowrap!important}
.levro-route-neon-core{filter:drop-shadow(0 0 3px rgba(34,197,94,.38)) drop-shadow(0 0 8px rgba(34,197,94,.14))!important}
.req-category-picker,.req-sector-picker{margin-top:.3rem}.req-category-picker-wrap,.req-sector-picker{width:100%}.req-category-search input,.req-sector-search input{padding-left:2.75rem!important;padding-right:2.8rem!important}
@media(prefers-reduced-motion:reduce){.chat-message-jump-highlight{animation:none!important;outline:2px solid var(--primary)}#bottomNav.nav-scroll-shrink{transform:none!important;opacity:1!important}}
/* ---- levromart-v4-source-owned-refinement ---- */
#bottomNav{left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;margin:0!important;height:58px!important;min-height:58px!important;border-radius:0!important;padding:4px 8px max(4px,env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;background:color-mix(in srgb,var(--card) 94%,transparent)!important;backdrop-filter:blur(16px) saturate(125%)!important;-webkit-backdrop-filter:blur(16px) saturate(125%)!important;border:0!important;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)!important;box-shadow:0 -5px 18px rgba(0,0,0,.10)!important;transform:translate3d(0,0,0)!important;transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;will-change:transform}
#bottomNav.nav-scroll-hide{transform:translate3d(0,calc(100% - 8px),0)!important}
#bottomNav .bottom-nav-item{height:48px!important;min-height:48px!important;max-width:124px!important;border-radius:0!important;background:transparent!important;border:0!important;padding:3px 6px!important;font-size:.65rem!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;color:var(--text-muted)!important}
#bottomNav .bottom-nav-item .bn-icon{width:32px!important;height:28px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:currentColor!important;position:relative!important}
#bottomNav .bottom-nav-item.active{background:transparent!important;color:var(--text-muted)!important}
#bottomNav .bottom-nav-item.active .bn-icon,#bottomNav .bottom-nav-item.active .bn-icon i{background:transparent!important;color:var(--primary)!important}
#bottomNav .bottom-nav-item.active>span:last-child{color:var(--text-muted)!important;font-weight:600!important}
#bottomNav .bn-badge{position:absolute!important;top:-.28rem!important;right:-.38rem!important;min-width:1.1rem!important;width:1.1rem!important;height:1.1rem!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;line-height:1!important;font-size:.58rem!important;background:var(--danger)!important;color:#fff!important;box-shadow:0 0 0 2px var(--card)!important}
#bottomNav .bottom-nav-add{position:relative!important;inset:auto!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex:0 0 42px!important;margin:0!important;border-radius:50%!important;border:1px solid color-mix(in srgb,var(--primary) 42%,transparent)!important;background:var(--primary)!important;color:#fff!important;box-shadow:0 3px 10px rgba(0,0,0,.18)!important;display:flex!important;align-items:center!important;justify-content:center!important}
#bottomNav .bn-group{display:flex!important;align-items:center!important;justify-content:center!important;gap:.1rem!important;min-width:0!important;flex:1 1 0!important}
body.search-input-active #bottomNav{display:flex!important;visibility:visible!important;pointer-events:none!important;transform:translate3d(0,100%,0)!important}
body.search-input-active #aiChatFab,body.search-input-active #cartFab{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
/* Levi: fixed, bounded, draggable and persistent. The actual mark is rendered
as a white SVG so the textured green background cannot recolour its arcs. */
#aiChatFab{position:fixed!important;isolation:isolate!important;left:auto!important;top:auto!important;right:18px!important;bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;z-index:470!important;touch-action:none!important;cursor:grab!important;user-select:none!important;-webkit-user-select:none!important}
#aiChatFab.hidden{display:none!important}
#aiChatFab.dragging{cursor:grabbing!important}
#aiChatFab .ai-chat-fab-logo{opacity:1!important;visibility:visible!important;pointer-events:none!important}
/* A subtle diagonal gradient anchored to the app's own brand green
(var(--primary)), not a generic flat bright green -- the earlier
textured/paper-grain version read too dark, but a single flat bright
green read as too loud and disconnected from the rest of the app's
shade. This sits between the two. */
#aiChatFab::before{content:""!important;position:absolute!important;inset:0!important;border-radius:50%!important;overflow:hidden!important;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.24),transparent 46%),linear-gradient(155deg,color-mix(in srgb, var(--primary) 72%, #22c55e),var(--primary))!important;opacity:1!important;z-index:1!important;pointer-events:none!important}
#aiChatFab::after{content:none!important;display:none!important}
.levro-route-neon-core{filter:drop-shadow(0 0 2px rgba(34,197,94,.24)) drop-shadow(0 0 5px rgba(34,197,94,.07))!important}
.chat-header-back{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:2.35rem!important;height:2.35rem!important;padding:0!important}
@media(max-width:520px){#bottomNav{height:54px!important;min-height:54px!important;padding-top:3px!important}#bottomNav .bottom-nav-item{height:44px!important;min-height:44px!important;font-size:.61rem!important}#bottomNav .bottom-nav-add{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex-basis:40px!important}}
@media(prefers-reduced-motion:reduce){#bottomNav{transition:none!important}.chat-message-jump-highlight{animation:none!important;outline:2px solid var(--primary)!important}.ai-chat-fab{transition:none!important}}
/* ---- levromart-astra-final-20260913 ---- */
.listing-engagement-settings{margin:.8rem 0;padding:.8rem;border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--primary) 3%,var(--card))}.listing-engagement-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.5rem}.listing-engagement-head strong{font-size:.82rem}.listing-engagement-head .muted{font-size:.68rem}.inline-toggle-row{display:flex!important;justify-content:space-between;align-items:center;gap:.7rem}.inline-toggle-row input{width:18px!important;height:18px!important;accent-color:var(--primary)}.notifications-page-host .notif-category-badge{display:none!important}.notifications-page-host .notif-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .25rem;margin-left:.28rem;border-radius:999px;background:var(--danger);color:#fff;font-size:.56rem;font-weight:850}.notifications-page-host .notif-message-summary{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}.product-card-like-row{min-height:0}.product-like-indicator{font-size:.64rem;color:var(--muted)}.product-like-indicator.hidden,.package-card-engagement-count.hidden{display:none!important}.trending-card-action-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:.55rem!important}.trending-card-action-row>.card-comment-btn{grid-column:1;justify-self:start!important}.trending-card-action-row>.product-card-action-left{grid-column:2;justify-self:end!important;display:flex!important;align-items:center!important;gap:.35rem!important}.product-comments-toggle.disabled,.card-comment-btn.disabled{opacity:.42!important;pointer-events:none!important}.product-comment-row[data-depth]{position:relative!important;border-left:1px solid color-mix(in srgb,var(--muted) 28%,transparent)!important;padding-left:.62rem!important;margin-left:1rem!important}.product-comment-row[data-depth]:before{content:"";position:absolute;left:-1px;top:0;width:9px;height:15px;border-left:1px solid color-mix(in srgb,var(--muted) 28%,transparent);border-bottom:1px solid color-mix(in srgb,var(--muted) 28%,transparent);border-bottom-left-radius:7px}.product-comment-row{display:grid!important;grid-template-columns:2rem minmax(0,1fr)!important;column-gap:.55rem!important;align-items:start!important}.product-comment-main{min-width:0!important}.product-comment-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:.5rem!important;width:100%!important;min-width:0!important}.product-comment-head strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.product-comment-head .muted{font-size:.62rem!important;white-space:nowrap!important;text-align:right!important;justify-self:end!important;color:var(--text-muted)!important}.product-comment-body-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:.55rem!important;margin-top:.12rem!important}.product-comment-body{min-width:0!important;font-size:.78rem!important;line-height:1.42!important;overflow-wrap:anywhere!important}.product-comment-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:.48rem!important;margin:0!important;padding:.02rem 0 0!important;flex:none!important;flex-wrap:nowrap!important}.product-comment-action{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;border:0!important;border-radius:50%!important;padding:0!important;background:transparent!important;color:var(--muted)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:.67rem!important;line-height:1!important;box-shadow:none!important}.product-comment-action i{font-size:.68rem!important}.product-comment-action .comment-like-count{font-size:.55rem!important;margin-left:.12rem!important}.product-comment-action.active{color:var(--primary)!important}.product-comment-action.danger{color:var(--danger)!important}.product-comment-action:active{transform:scale(.92)!important;background:color-mix(in srgb,var(--primary) 8%,transparent)!important}.product-comments-empty{font-size:.74rem!important;color:var(--text-muted)!important;text-align:left!important;padding:.45rem 0 .7rem!important}.comment-view-more{border:0;background:transparent;color:var(--primary);font-size:.72rem;font-weight:750;padding:.25rem 0 .25rem 2.65rem;cursor:pointer}.comment-hidden-replies.hidden{display:none}.product-comment-compose-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:end!important;gap:.45rem!important}.package-card-comment-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);padding-top:.45rem;margin-top:.5rem}.package-card-comment-btn{border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:999px;font:inherit;font-size:.7rem}.browse-filter-trigger{width:42px!important;min-width:42px!important;padding:0!important;justify-content:center!important}.browse-filter-trigger .browse-filter-chevron{font-size:.58rem!important}#aiChatFab,#cartFab{right:18px!important;left:auto!important;transform:none!important}.ai-chat-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}.cart-fab{bottom:calc(160px + env(safe-area-inset-bottom,0px))!important}@media(max-width:520px){.product-comment-row{margin-left:-.32rem!important}.browse-filter-trigger{width:40px!important;min-width:40px!important}.notifications-page-host .notif-item{grid-template-columns:.4rem 2rem minmax(0,1fr)!important}.product-gallery-variant-meta{flex-wrap:wrap!important}.product-gallery-variant-meta #productGalleryVariantPrice{margin-left:0!important;width:100%!important}.levromart-comment-sheet-card{max-height:90vh!important}.product-comment-row{column-gap:.48rem!important}.product-comment-actions{gap:.38rem!important}.product-comment-action{width:22px!important;height:22px!important;min-width:22px!important;font-size:.62rem!important}.product-comment-action i{font-size:.63rem!important}.product-comment-head{gap:.35rem!important}.product-comment-head .muted{font-size:.59rem!important}}
/* ---- levromart-final-20260913-payment-comments-timer ---- */
/* Listing activation / expiry timer */
#app .listing-expiry-inline{
display:inline-flex!important;
align-items:center!important;
gap:.28rem!important;
margin-left:.35rem!important;
color:var(--primary)!important;
font-size:.72rem!important;
font-weight:800!important;
white-space:nowrap!important;
}
#app .listing-expiry-inline.expiring-soon{color:#f59e0b!important;}
#app .listing-expiry-inline.expired{color:var(--danger,#ef4444)!important;}
#app .vendor-product-actions{display:flex!important;align-items:center!important;gap:.45rem!important;flex-wrap:wrap!important;}
#app .product-card-action-row{justify-content:space-between!important;}
#app .product-card-action-row>.card-comment-btn{order:1!important;margin-right:auto!important;}
#app .product-card-action-row>.product-card-action-left{order:2!important;margin-left:auto!important;justify-content:flex-end!important;display:flex!important;align-items:center!important;gap:.4rem!important;}
#app .product-card-action-row .card-service-btn,
#app .product-card-action-row .card-cart-btn{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin-left:auto!important;flex:0 0 auto!important;}
#app .product-card-delivery-wrap{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:.22rem!important;}
#app .product-variety-indicator{
display:inline-flex!important;
align-items:center!important;
gap:.22rem!important;
color:var(--text-muted)!important;
font-size:.64rem!important;
font-weight:800!important;
line-height:1.2!important;
}
#app .comment-replies-toggle{border:0!important;background:transparent!important;color:var(--primary)!important;font:inherit!important;font-size:.72rem!important;font-weight:750!important;padding:.25rem 0 .25rem 2.65rem!important;cursor:pointer!important;text-align:left!important;display:block!important;}#app .comment-replies-dropdown{display:flex!important;flex-direction:column!important;gap:.15rem!important;}#app .comment-replies-dropdown.hidden{display:none!important;}\n#app .notifications-page-shell{padding-left:.35rem!important;padding-right:.35rem!important;}
#app .notifications-page-shell .notif-list-scroll{padding-left:0!important;padding-right:0!important;}
#app .notifications-page-shell .notif-item-wrap{width:100%!important;}
#app .notifications-page-shell .notif-item{width:100%!important;margin:0!important;padding-left:.2rem!important;padding-right:.2rem!important;}
@media(max-width:720px){
#app .notifications-page-shell{padding-left:.2rem!important;padding-right:.2rem!important;}
#app .listing-expiry-inline{font-size:.68rem!important;}
}
/* The old experimental comments sheet is intentionally disabled. Comments are
back in the original inline product/package detail flow. */
#levromartCommentSheet{display:none!important;} #app .product-comments-loading{display:none!important;}
body.levromart-comment-sheet-open{overflow:auto!important;}
/* ---- levromart-payment-resolution-final-20260917 ---- */
.payment-confirmation-card{border-color:color-mix(in srgb,var(--primary) 35%,var(--border));background:color-mix(in srgb,var(--primary) 4%,var(--card));}
.payment-confirmation-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.8rem;}
.payment-reported-badge{background:rgba(245,158,11,.13);color:#d97706;}
[data-theme="dark"] .payment-reported-badge{color:#fbbf24;}
.order-status-badge-payment-unresolved{background:rgba(147,51,234,.12)!important;color:#7e22ce!important;border:1px solid rgba(147,51,234,.28)!important;-webkit-text-fill-color:#7e22ce!important;}
[data-theme="dark"] .order-status-badge-payment-unresolved{color:#d8b4fe!important;-webkit-text-fill-color:#d8b4fe!important;}
.payment-reason-modal{position:fixed;inset:0;z-index:100800;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);}
.payment-reason-modal.hidden{display:none;}
.payment-reason-card{width:min(540px,calc(100vw - 2rem));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:20px;padding:1rem;box-shadow:0 24px 80px rgba(0,0,0,.38);}
.payment-reason-card textarea{width:100%;box-sizing:border-box;min-height:120px;margin-top:.55rem;resize:vertical;}
.payment-reason-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:.7rem;}
.payment-resolution-admin-card{margin:.65rem 0;padding:.75rem;border-radius:14px;background:color-mix(in srgb,var(--primary) 5%,var(--card));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));}
/* ---- levromart-bounded-gallery-accordion-fix-20260917 ---- */
.product-gallery-return-main{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;margin:.55rem auto 0;padding:.5rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer;}
.product-gallery-return-main.hidden{display:none!important;}
#productVariantPricing .variant-row-topbar{align-items:stretch;}
#productVariantPricing .variant-accordion-toggle{min-width:0;flex:1;display:flex;align-items:center;gap:.55rem;border:0;background:transparent;color:var(--text);padding:0;text-align:left;cursor:pointer;font:inherit;}
#productVariantPricing .variant-accordion-thumb{width:42px;height:42px;flex:0 0 42px;border-radius:9px;object-fit:cover;border:1px solid var(--border);background:var(--input-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--primary);}
#productVariantPricing .variant-accordion-title{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1rem;}
#productVariantPricing .variant-accordion-title .variant-row-title{font-size:.82rem;}
#productVariantPricing .variant-accordion-title small{font-size:.68rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#productVariantPricing .variant-accordion-chevron{font-size:.72rem;color:var(--text-muted);margin-right:.15rem;}
#productVariantPricing .variant-accordion-body.hidden{display:none!important;}
#productVariantPricing .variant-price-row.is-collapsed .variant-row-topbar{border-bottom:0;}
@media(max-width:520px){#productVariantPricing .variant-accordion-thumb{width:38px;height:38px;flex-basis:38px;}#productVariantPricing .variant-accordion-title small{max-width:11rem;}}
/* ---- levromart-calm-final-guard ---- */
html[data-levro-motion="calm"] *,html[data-levro-motion="calm"] *::before,html[data-levro-motion="calm"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-levro-motion="calm"] .product-card-wrap:hover,html[data-levro-motion="calm"] .vendor-card:hover{transform:none!important}html[data-levro-motion="calm"] .ai-chat-fab.scroll-faded,html[data-levro-motion="calm"] #cartFab.scroll-faded{opacity:1!important;transform:none!important}html[data-levro-motion="calm"] .nav-scroll-hide,html[data-levro-motion="calm"] .nav-scroll-shrink{transform:none!important;opacity:1!important}html[data-levro-motion="calm"] .home-search-fixed,html[data-levro-motion="calm"] .home-search-scrolling{transform:none!important}
/* ---- levromart-inventory-accordion-final ---- */
.admin-inventory-accordion-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.admin-inventory-accordion-summary .admin-inventory-stat{padding:0;min-width:0;background:var(--card)!important;color:var(--text);border:1px solid var(--border);overflow:hidden}.admin-inventory-stat summary{list-style:none;display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.75rem .8rem;cursor:pointer}.admin-inventory-stat summary::-webkit-details-marker{display:none}.admin-inventory-stat summary span{font-size:.75rem;font-weight:700;color:var(--text-muted)}.admin-inventory-stat summary strong{font-size:1.15rem;color:var(--text)}.admin-inventory-stat summary i{font-size:.7rem;color:var(--text-muted);transition:transform .15s}.admin-inventory-stat[open] summary i{transform:rotate(180deg)}.admin-inventory-stat-body{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .8rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-muted)}@media(max-width:620px){.admin-inventory-accordion-summary{grid-template-columns:1fr}.admin-inventory-stat-body{padding:.55rem .7rem}}
/* ---- levromart-light-controls-final ---- */
/* Selection/filter/toggle controls (tabs, follow, quick-action icons,
add-to-cart) get a light tint + thin outline for their "on" state instead
of a solid filled block -- that treatment stays reserved for genuine
primary actions (Pay, Save, Submit, the chat/cart FABs) elsewhere in the
app. This is the very last style block in the document specifically so it
wins over the older solid-fill rules earlier in this file. */
#app .vendor-listing-tab.active,
#app .vendor-request-tab.active,
#app .storefront-catalog-tab.active,
#app .catalog-type-tab.active,
#app .vendors-directory-view-buttons .btn.active,
#app .vendors-directory-view-buttons .btn[aria-pressed="true"],
#app #vendorsViewGridBtn.active,
#app #vendorsViewListBtn.active,
#app #vendorsViewMapBtn.active{
background-color:color-mix(in srgb,var(--text) 10%,var(--card)) !important;
background-image:none !important;
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
border:1px solid color-mix(in srgb,var(--text) 20%,var(--border)) !important;
box-shadow:none !important;
text-shadow:none !important;
}
/* Follow/Following, the storefront's bell and "..." menu, and the Message
button are all plain navigation/utility controls, not brand accents --
neutral in both states so they don't compete with real accent color. */
#app .follow-btn:not(.btn-outline),
#app .vendor-card-follow-btn.following{
background-color:color-mix(in srgb,var(--text) 10%,var(--card)) !important;
background-image:none !important;
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
border:1px solid color-mix(in srgb,var(--text) 16%,var(--border)) !important;
box-shadow:none !important;
text-shadow:none !important;
}
#app .follow-btn.btn-outline,
#app .follow-settings-btn,
#app .storefront-more-icon,
#app .btn.storefront-social-icon{
background-color:transparent !important;
background-image:none !important;
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
border:1px solid color-mix(in srgb,var(--text) 30%,var(--border)) !important;
box-shadow:none !important;
text-shadow:none !important;
}
#app .follow-settings-btn[disabled]{ opacity:.45 !important; }
#app .storefront-catalog-tab.active .tab-count{
background:color-mix(in srgb,var(--text) 14%,transparent) !important;
color:var(--text) !important;
-webkit-text-fill-color:var(--text) !important;
}
/* Six homepage quick-action icons: a light tinted circle with a readable
colored icon, matching the existing Healthcare-category look, not a
solid green disc. */
#app .levro-quick-icon,
#app .levro-home-quick-actions .levro-quick-icon{
background-color:color-mix(in srgb,var(--primary) 13%,var(--card)) !important;
background-image:none !important;
color:var(--primary) !important;
-webkit-text-fill-color:var(--primary) !important;
box-shadow:none !important;
border:1px solid color-mix(in srgb,var(--primary) 10%,transparent) !important;
}
/* Add-to-cart controls: light outlined circle instead of a solid disc.
(Also re-targets the higher-specificity compact-card selector added
earlier for the button-overlap fix, which still hardcodes solid green.) */
#app .card-cart-btn,#app .card-service-btn,
#app .product-card-compact .card-cart-btn,
#app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn{
background-color:color-mix(in srgb,var(--primary) 12%,var(--card)) !important;
background-image:none !important;
color:var(--primary) !important;
-webkit-text-fill-color:var(--primary) !important;
border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border)) !important;
box-shadow:none !important;
}
#app .card-cart-btn.added{
background-color:color-mix(in srgb,var(--success,#16a34a) 16%,var(--card)) !important;
color:var(--success,#16a34a) !important;
-webkit-text-fill-color:var(--success,#16a34a) !important;
border-color:color-mix(in srgb,var(--success,#16a34a) 40%,var(--border)) !important;
}
/* Add-listing: a normal small nav icon like its siblings, not an oversized
floating solid-green circle. */
#bottomNav.has-add .bottom-nav-add,
#bottomNav .bottom-nav-add{
position:static !important;top:auto !important;margin:0 !important;
width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;
flex:0 0 auto !important;flex-basis:auto !important;
background:none !important;background-image:none !important;
border:0 !important;box-shadow:none !important;color:var(--text) !important;
display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
gap:.15rem !important;font-size:.6rem !important;padding:.2rem .15rem !important;transform:none !important;
}
#bottomNav.has-add .bottom-nav-add .bn-icon,
#bottomNav .bottom-nav-add .bn-icon{
width:auto !important;height:auto !important;border-radius:.6rem !important;
background:color-mix(in srgb,var(--primary) 13%,var(--card)) !important;
color:var(--primary) !important;font-size:1.05rem !important;line-height:1 !important;
display:flex !important;align-items:center !important;justify-content:center !important;
padding:.32rem .55rem !important;
}
#bottomNav .bottom-nav-add:active{transform:scale(.94) !important;}
/* ---- levromart-final-manual-monthly-ui-20260913 ---- */
.manual-monthly-payment-modal-content{max-height:min(90vh,760px);overflow:auto}
.manual-monthly-account-row{grid-template-columns:96px minmax(0,1fr) auto!important}
.product-comment-compose-row>.icon-btn,
.package-comment-compose-row>.icon-btn,
.product-comment-composer .product-comment-send-btn,
.package-comment-composer .product-comment-send-btn{
width:42px!important;height:42px!important;min-width: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;align-self:end!important;
margin:0 0 .15rem 0!important;background:var(--primary)!important;color:#fff!important;border:0!important;
}
.product-comment-compose-row>.icon-btn i,.package-comment-compose-row>.icon-btn i{font-size:.95rem!important}
.product-comment-row{margin-left:-.55rem!important;margin-right:0!important}
.product-comment-row[data-depth]{margin-left:.05rem!important;padding-left:.5rem!important}
.product-comment-avatar{margin-left:0!important}
.product-comment-action.active,.product-comment-action.active i{color:#ef4444!important}
.admin-phone-copy-btn{border:0!important;background:transparent!important;color:var(--primary)!important;padding:.18rem!important;margin-left:.12rem!important;cursor:pointer}
.admin-phone-copy-btn i{font-size:.72rem!important}
@media(max-width:620px){
.manual-monthly-account-row{grid-template-columns:76px minmax(0,1fr) auto!important}
.product-comment-compose-row>.icon-btn,.package-comment-compose-row>.icon-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
.product-comment-row{margin-left:-.7rem!important}
.product-comment-row[data-depth]{margin-left:0!important}
}
/* Scoped integration corrections. */
#app .product-comment-compose-row > button{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;border-radius:50%!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 40px!important;}
#app .notifications-page-host .notif-tabs{gap:.45rem!important;justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:.35rem .15rem!important;}
#app .notifications-page-host .notif-tab{flex:0 0 auto!important;padding:.5rem .7rem!important;}
#app .vendor-products-unified-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.admin-vendor-filters{display:flex;gap:.6rem;margin:.75rem 0}.admin-vendor-filters input{flex:1;min-width:0}.admin-vendor-filters select{width:auto}
#app details.admin-vendor-card,#app details.monthly-submission-card{padding:.65rem!important;margin-bottom:.55rem!important;}
#app details>summary{cursor:pointer;list-style:none;gap:.6rem;align-items:center;}
#app details.monthly-submission-card>summary{display:flex!important;flex-direction:row!important;justify-content:space-between;}
#app .monthly-submission-head h3{font-size:.9rem!important}#app .monthly-submission-thumb{width:44px!important;height:44px!important;object-fit:cover}
.variety-choice-image{position:relative;display:block}.variety-choice-image img{width:76px;height:76px;object-fit:cover;border-radius:8px}.variety-image-position{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.7);color:white;padding:2px 5px;border-radius:5px;font-size:.65rem}
.vendor-distance{display:block;text-align:center;font-size:.7rem;color:var(--text-muted);margin:.2rem 0;}
#productVariantPricing .variant-price-row{grid-template-columns:28px 64px minmax(0,1fr) minmax(0,1fr) 28px;align-items:start}
#productVariantPricing .variant-price-row:after{content:none}#productVariantPricing .variant-dnd-handle{touch-action:none!important}
#productVariantPricing .variant-name{grid-column:3/5}#productVariantPricing .variant-price-remove{grid-column:5;grid-row:1}
#productVariantPricing .variant-sale-price{grid-column:3}#productVariantPricing .variant-discount-price{grid-column:4}
#productVariantPricing .variant-upload-label,#productVariantPricing .variant-description,#productVariantPricing .variant-extra-fields,#productVariantPricing .variant-quantity{grid-column:2/5;width:100%;min-width:0;box-sizing:border-box}
#productVariantPricing .variant-extra-fields{display:flex;gap:.4rem}#productVariantPricing .variant-extra-fields input{min-width:0;width:50%}
.vendors-directory-soft-empty{min-height:8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;text-align:center;color:var(--text-muted);font-size:.78rem;grid-column:1/-1;}
.vendors-directory-soft-empty i{font-size:1.35rem;color:var(--primary);}
/* ---- levromart-order-payment-flat-colors-final ---- */
/* Final order-payment controls: use the requested solid colors with no brand texture. */
#app .btn.btn-sm.order-remind-btn,
#app .btn.btn-sm.order-remind-btn:hover,
#app .btn.btn-sm.order-remind-btn:focus,
#app .btn.btn-sm.order-remind-btn:active {
background:#2563eb !important;
background-color:#2563eb !important;
background-image:none !important;
background-blend-mode:normal !important;
border-color:#2563eb !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
box-shadow:0 5px 14px rgba(37,99,235,.24) !important;
}
#app .delivery-balance-direct-btn,
#app .delivery-balance-direct-btn:hover,
#app .delivery-balance-direct-btn:focus,
#app .delivery-balance-direct-btn:active,
#app .delivery-balance-manual-btn,
#app .delivery-balance-manual-btn:hover,
#app .delivery-balance-manual-btn:focus,
#app .delivery-balance-manual-btn:active {
background:#2563eb !important;
background-color:#2563eb !important;
background-image:none !important;
background-blend-mode:normal !important;
border-color:#2563eb !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
box-shadow:0 5px 14px rgba(37,99,235,.22) !important;
}
#app .delivery-balance-paystack-btn,
#app .delivery-balance-paystack-btn:hover,
#app .delivery-balance-paystack-btn:focus,
#app .delivery-balance-paystack-btn:active {
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
background-blend-mode:normal !important;
border-color:#2563eb !important;
color:#2563eb !important;
-webkit-text-fill-color:#2563eb !important;
}
/* ---- levromart-auth-log-speed-fix ---- */
.admin-auth-log-filters{display:flex;gap:.35rem;overflow-x:auto;padding:.25rem 0 .65rem;scrollbar-width:none}.admin-auth-log-filters::-webkit-scrollbar{display:none}.admin-auth-log-filters .range-tab{flex:0 0 auto;border:1px solid var(--border);background:var(--card);color:var(--text-muted);border-radius:999px;padding:.48rem .8rem;cursor:pointer;font:inherit;font-size:.78rem}.admin-auth-log-filters .range-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.admin-auth-log-table-wrap{max-height:56vh;overflow:auto}.admin-auth-log-table{min-width:980px}.admin-auth-log-table th,.admin-auth-log-table td{white-space:nowrap}.admin-auth-log-table td:nth-child(6){max-width:260px;overflow:hidden;text-overflow:ellipsis}.conv-unread-badge{background:#ef4444!important;color:#fff!important;border:0!important;min-width:1.25rem;height:1.25rem;padding:0 .34rem;border-radius:999px;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;line-height:1}.chat-bubble[data-msg-id^="temp-"]{opacity:.82}.chat-bubble[data-msg-id^="temp-"] .chat-time-text::after{content:" · sending";opacity:.62;font-size:.68em}
/* ---- levromart-notification-chat-stability-final ---- */
/* Notifications must keep one stable horizontal row from first paint through
fresh-data hydration. Flex is deliberately used instead of the earlier
multi-column grid so cached rows and live rows have identical geometry. */
#notifPanel .notif-list-scroll,
.notifications-page-host .notif-list-scroll{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
#notifPanel .notif-item-wrap,
.notifications-page-host .notif-item-wrap{
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
#notifPanel .notif-item,
.notifications-page-host .notif-item{
width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
gap:.65rem !important;
padding:.72rem .55rem !important;
min-height:60px !important;
transform:none !important;
transition:none !important;
animation:none !important;
}
#notifPanel .notif-item > .notif-select-check,
.notifications-page-host .notif-item > .notif-select-check{
flex:0 0 1.35rem !important;
}
#notifPanel .notif-item > img.avatar-circle,
#notifPanel .notif-item > .avatar-circle,
.notifications-page-host .notif-item > img.avatar-circle,
.notifications-page-host .notif-item > .avatar-circle,
.notifications-page-host .notif-item > .notification-system-icon,
#notifPanel .notif-item > .notification-system-icon{
width:2.15rem !important;
height:2.15rem !important;
min-width:2.15rem !important;
flex:0 0 2.15rem !important;
object-fit:cover !important;
}
#notifPanel .notif-copy,
.notifications-page-host .notif-copy{
min-width:0 !important;
flex:1 1 auto !important;
width:auto !important;
overflow:hidden !important;
}
#notifPanel .notif-copy strong,
.notifications-page-host .notif-copy strong{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
line-height:1.25 !important;
}
#notifPanel .notif-copy > .muted,
.notifications-page-host .notif-copy > .muted{
display:block !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
line-height:1.35 !important;
}
/* A notification tap must not animate or reflow the card. */
#notifPanel .notif-item:active,
.notifications-page-host .notif-item:active{
transform:none !important;
animation:none !important;
}
/* Product payment timing: explicit seller choice and card-visible status.
Keep this component on the app theme surface in both light and dark modes. */
.listing-payment-timing-settings{margin-top:.8rem;padding:.9rem;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);}
.payment-timing-title{display:block;margin:0 0 .55rem;font-weight:800;color:var(--text);}
.payment-timing-choice{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
.payment-timing-option{appearance:none;border:1px solid var(--border);background:var(--card);border-radius:14px;padding:.7rem .75rem;display:flex;align-items:flex-start;gap:.6rem;text-align:left;cursor:pointer;color:var(--text);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;min-width:0;}
.payment-timing-option strong{display:block;font-size:.8rem;line-height:1.2;}
.payment-timing-option small{display:block;margin-top:.2rem;font-size:.68rem;line-height:1.25;color:var(--text-muted);}
.payment-timing-option-dot{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;flex:0 0 auto;margin-top:.12rem;}
.payment-timing-option.pay-before{color:#0A5C40;}
.payment-timing-option.pay-after{color:#fb923c;}
.payment-timing-option.pay-before.selected{background:color-mix(in srgb,var(--card) 88%,#5BA98A 12%);border-color:#5BA98A;box-shadow:0 0 0 2px rgba(91,169,138,.16);}
.payment-timing-option.pay-after.selected{background:color-mix(in srgb,var(--card) 88%,#fb923c 12%);border-color:#fb923c;box-shadow:0 0 0 2px rgba(249,115,22,.12);}
.payment-timing-option.selected .payment-timing-option-dot{background:currentColor;box-shadow:inset 0 0 0 2px var(--card);}
.payment-timing-hint{font-size:.76rem;margin:.55rem 0 0;color:var(--text-muted);}
@media(max-width:520px){.payment-timing-choice{grid-template-columns:1fr;}}
/* Seller-selected delivery payment percentage. */
.payment-deposit-percent-wrap{margin-top:.65rem;padding:.7rem .75rem;border:1px solid color-mix(in srgb,#3b82f6 18%,var(--border));border-radius:12px;background:#eff6ff;}
.payment-deposit-percent-wrap label{margin:0;color:#1e3a8a;font-weight:800;font-size:.76rem;}
.payment-deposit-percent-wrap input{margin:.3rem 0 .15rem;}
.payment-deposit-percent-note{font-size:.7rem;margin:0;color:#475569;}
/* Card payment/delivery status cues. */
.product-card-payment-plan.pay-before{background:#EAF6F0!important;color:#0A5C40!important;border-color:#5BA98A!important;}
.product-card-payment-plan.pay-after{background:#ffedd5!important;color:#c2410c!important;border-color:#fdba74!important;}
/* Service negotiation UI, scoped only to service listings. */
.service-vendor-info-block{border:1px solid var(--border);border-radius:.9rem;padding:.8rem;margin:.8rem 0;background:color-mix(in srgb,var(--primary) 3%,var(--card-bg,transparent));}
.service-vendor-info-head{display:flex;align-items:center;gap:.7rem;}
.service-vendor-avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;}
.service-vendor-rating{font-size:.82rem;color:var(--text-muted);margin-top:.15rem;}
.service-vendor-contact-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem;}
.service-description-block{margin-top:.9rem;}
.service-description-block h3{margin:0 0 .35rem;}
.service-description-block p{margin:0;line-height:1.55;white-space:pre-wrap;}
.service-price-hint{margin-top:.8rem;padding:.7rem .8rem;border-radius:.75rem;background:color-mix(in srgb,var(--primary) 8%,transparent);font-size:.84rem;line-height:1.45;}
.service-price-hint i{color:var(--primary);margin-right:.3rem;}
.service-request-card textarea{min-height:100px;resize:vertical;}
.service-offers-card{margin-top:1rem;}
.service-offers-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.6rem;}
.service-offers-head h3{margin:0;}
.service-offer-row{border-top:1px solid var(--border);padding:.75rem 0;}
.service-offer-row:first-of-type{border-top:0;padding-top:.1rem;}
.service-offer-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.service-offer-description{margin:.4rem 0;white-space:pre-wrap;line-height:1.45;}
.service-offer-meta{display:flex;gap:.7rem;flex-wrap:wrap;font-size:.78rem;color:var(--text-muted);}
.service-offer-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.6rem;}
.service-offer-waiting{display:block;margin-top:.55rem;font-size:.82rem;}
.service-payment-confirm-card{border-color:color-mix(in srgb,var(--primary) 35%,var(--border));}
@media(max-width:560px){.service-offers-head{align-items:flex-start;flex-direction:column}.service-vendor-contact-actions .btn{flex:1 1 auto;justify-content:center}}
/* ---- levromart-vendors-v2 ---- */
:root[data-theme="dark"] body #app .profile-view-full-link,:root[data-theme="black"] body #app .profile-view-full-link,:root[data-theme="dark"] body #app .profile-view-full-link i,:root[data-theme="black"] body #app .profile-view-full-link i,:root[data-theme="dark"] body #app .section-title-link,:root[data-theme="black"] body #app .section-title-link,:root[data-theme="dark"] body #app .storefront-read-more,:root[data-theme="black"] body #app .storefront-read-more,:root[data-theme="dark"] body #app [class*="read-more"],:root[data-theme="black"] body #app [class*="read-more"],:root[data-theme="dark"] body #app [class*="readmore"],:root[data-theme="black"] body #app [class*="readmore"],:root[data-theme="dark"] body #app .link-btn,:root[data-theme="black"] body #app .link-btn,:root[data-theme="dark"] body #app a.text-link,:root[data-theme="black"] body #app a.text-link,:root[data-theme="dark"] body #app .storefront-stat-link,:root[data-theme="black"] body #app .storefront-stat-link,:root[data-theme="dark"] body #app .drawer-link-green,:root[data-theme="black"] body #app .drawer-link-green,:root[data-theme="dark"] body #app [style*="color:var(--primary)"],:root[data-theme="black"] body #app [style*="color:var(--primary)"],:root[data-theme="dark"] body #app [style*="color: var(--primary)"],:root[data-theme="black"] body #app [style*="color: var(--primary)"],:root[data-theme="dark"] body #app .fn-tag.fn-following,:root[data-theme="black"] body #app .fn-tag.fn-following,:root[data-theme="dark"] body #app .modal .icon-btn i.fa-xmark,:root[data-theme="black"] body #app .modal .icon-btn i.fa-xmark,:root[data-theme="dark"] body #app .vd-chip-all i,:root[data-theme="black"] body #app .vd-chip-all i,:root[data-theme="dark"] body #app .pd-link,:root[data-theme="black"] body #app .pd-link{color:#6ee7a8!important;-webkit-text-fill-color:#6ee7a8!important}
:root[data-theme="dark"] body .modal .icon-btn i,:root[data-theme="black"] body .modal .icon-btn i{color:#6ee7a8!important}
.fp-page{padding-bottom:5rem}
.fp-head{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .9rem}.fp-head h2{margin:0;font-size:1.25rem;flex:1}.fp-count{font-size:.8rem;color:var(--text-muted)}
.fp-search{display:flex;align-items:center;gap:.6rem;min-height:2.9rem;padding:0 .95rem;border-radius:14px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:var(--card);color:var(--text-muted);margin-bottom:.8rem}
.fp-search input{flex:1;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;height:auto!important;font:inherit;color:var(--text)}
.fp-tabs{display:flex;gap:.4rem;margin-bottom:.8rem}
.fp-tab{flex:1;min-height:2.5rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:var(--card);color:var(--text-muted);font:inherit;font-weight:700;font-size:.86rem;cursor:pointer}
.fp-tab b{margin-left:.25rem;font-weight:700;opacity:.8}
html body #app .fp-tab.active{background:var(--text)!important;color:var(--bg,#fff)!important;border-color:transparent!important;-webkit-text-fill-color:var(--bg,#fff)!important}
.fp-list{display:flex;flex-direction:column;gap:.55rem}
.fp-row{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 9%,transparent)}
.fp-row.clickable{cursor:pointer}
.fp-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1rem}.fp-copy strong{font-size:.95rem}.fp-copy .muted{font-size:.78rem}
.fp-go{color:var(--text-muted);font-size:.8rem}
/* lighter green text everywhere in dark mode */
:root[data-theme="dark"] body #app a,:root[data-theme="black"] body #app a{--lg:#6ee7a8}
:root[data-theme="dark"] body #app .view-full-profile,:root[data-theme="black"] body #app .view-full-profile,:root[data-theme="dark"] body #app [class*="profile-link"],:root[data-theme="black"] body #app [class*="profile-link"],:root[data-theme="dark"] body #app .section-title-link,:root[data-theme="black"] body #app .section-title-link,:root[data-theme="dark"] body #app .vd-chip i,:root[data-theme="black"] body #app .vd-chip i:not([style]){color:#6ee7a8!important}
:root[data-theme="dark"] body #app .storefront-distance-link,:root[data-theme="black"] body #app .storefront-distance-link,:root[data-theme="dark"] body #app .search-result-distance,:root[data-theme="black"] body #app .search-result-distance,:root[data-theme="dark"] body #app .storefront-distance-link *,:root[data-theme="black"] body #app .storefront-distance-link *{color:#7df2b6!important;-webkit-text-fill-color:#7df2b6!important}
:root[data-theme="dark"] body #app .vc2-loc,:root[data-theme="black"] body #app .vc2-loc,:root[data-theme="dark"] body #app .vc2-where,:root[data-theme="black"] body #app .vc2-where{color:#b9c5d1!important}
html body #bottomNav .bottom-nav-add,html body #bottomNav .bottom-nav-item.bottom-nav-add,html body #bottomNav .bottom-nav-item.bottom-nav-add.active,:root[data-theme="dark"] body #bottomNav .bottom-nav-add,:root[data-theme="black"] body #bottomNav .bottom-nav-add{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;color:var(--text)!important;border-radius:0!important}
html body #bottomNav .bottom-nav-add{position:relative!important;top:0!important;width:auto!important;height:auto!important;min-width:0!important;margin:0!important;padding:.2rem .15rem!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:.15rem!important;font-size:.56rem!important;transform:none!important}
html body #bottomNav .bottom-nav-add .bn-icon{font-size:1.05rem!important;padding:.15rem .6rem!important;margin:0!important}
html body #bottomNav .bottom-nav-add .bn-icon,html body #bottomNav .bottom-nav-add>i:first-child,html body #bottomNav .bottom-nav-add *{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
html body #bottomNav .bottom-nav-item.active,html body #bottomNav .bottom-nav-item.active span,html body #bottomNav .bottom-nav-item.active i{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
html body #bottomNav .bottom-nav-item.active{background:transparent!important}
html body #bottomNav .bottom-nav-item.active .bn-icon,html body #bottomNav .bottom-nav-item.active>i:first-child{background:color-mix(in srgb,var(--text) 9%,transparent)!important;border-radius:.6rem}
html body #bottomNav .bottom-nav-item.active span:last-child{font-weight:700!important}
html body #app .product-detail-vendor-link{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--text) 30%,transparent);text-underline-offset:3px}
html body #app .pd-chip{background:color-mix(in srgb,var(--text) 9%,transparent)!important;color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice,:root[data-theme="black"] body #app .product-payment-plan-notice,:root[data-theme="dark"] body #app .product-payment-plan-notice *,:root[data-theme="black"] body #app .product-payment-plan-notice *{color:#e6fff1!important;-webkit-text-fill-color:#e6fff1!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice i,:root[data-theme="black"] body #app .product-payment-plan-notice i{color:#5eeaa0!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice,:root[data-theme="black"] body #app .product-payment-plan-notice{background:rgba(34,197,94,.10)!important;box-shadow:inset 0 0 0 1px rgba(94,234,160,.28)!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice.pay-after,:root[data-theme="black"] body #app .product-payment-plan-notice.pay-after,:root[data-theme="dark"] body #app .product-payment-plan-notice.pay-after *,:root[data-theme="black"] body #app .product-payment-plan-notice.pay-after *{color:#fff3d6!important;-webkit-text-fill-color:#fff3d6!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice.pay-after,:root[data-theme="black"] body #app .product-payment-plan-notice.pay-after{background:rgba(245,158,11,.10)!important;box-shadow:inset 0 0 0 1px rgba(251,191,36,.28)!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice.pay-after i,:root[data-theme="black"] body #app .product-payment-plan-notice.pay-after i{color:#fbbf24!important}
:root[data-theme="dark"] body #app .price-breakdown-table,:root[data-theme="black"] body #app .price-breakdown-table,:root[data-theme="dark"] body #app .price-breakdown-table *,:root[data-theme="black"] body #app .price-breakdown-table *{color:#eef2f7!important;-webkit-text-fill-color:#eef2f7!important}
:root[data-theme="dark"] body #app .price-breakdown-table,:root[data-theme="black"] body #app .price-breakdown-table{background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important}
:root[data-theme="dark"] body #app .price-breakdown-table .muted,:root[data-theme="black"] body #app .price-breakdown-table .muted,:root[data-theme="dark"] body #app .price-breakdown-table span:first-child,:root[data-theme="black"] body #app .price-breakdown-table span:first-child{color:#b6c0cc!important;-webkit-text-fill-color:#b6c0cc!important}
:root[data-theme="dark"] body #app .product-price-hero,:root[data-theme="black"] body #app .product-price-hero{background:transparent!important;box-shadow:none!important}
:root[data-theme="dark"] body #app .product-price-hero *:not(.badge),:root[data-theme="black"] body #app .product-price-hero *:not(.badge){color:#f1f5f9!important;-webkit-text-fill-color:#f1f5f9!important}
:root[data-theme="dark"] body #app .product-price-hero .pph-label,:root[data-theme="black"] body #app .product-price-hero .pph-label{color:#94a3b8!important;-webkit-text-fill-color:#94a3b8!important}
:root[data-theme="dark"] body #app .delivery-method-row label:has(input:checked),:root[data-theme="black"] body #app .delivery-method-row label:has(input:checked){background:rgba(34,197,94,.08)!important;border-color:rgba(94,234,160,.55)!important}
:root[data-theme="dark"] body #app .delivery-method-row label:has(input:checked) *,:root[data-theme="black"] body #app .delivery-method-row label:has(input:checked) *{color:#f1f5f9!important;-webkit-text-fill-color:#f1f5f9!important}
:root[data-theme="dark"] body #app .delivery-method-row input[type=radio],:root[data-theme="black"] body #app .delivery-method-row input[type=radio]{accent-color:#22c55e}
:root[data-theme="dark"] body #app .df-label,:root[data-theme="black"] body #app .df-label{color:#cfd8e3!important}
:root[data-theme="dark"] body #app .df-label i,:root[data-theme="black"] body #app .df-label i{color:#5eeaa0!important}
:root[data-theme="dark"] body #app .storefront-follow-controls .follow-btn:not(.btn-outline),:root[data-theme="black"] body #app .storefront-follow-controls .follow-btn:not(.btn-outline){background:rgba(255,255,255,.12)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
:root[data-theme="dark"] body #app .vc2 button.vc2-follow.following,:root[data-theme="black"] body #app .vc2 button.vc2-follow.following{background:rgba(255,255,255,.12)!important;color:#fff!important}
:root[data-theme="dark"] body #app .vc2-tags em,:root[data-theme="black"] body #app .vc2-tags em{background:rgba(255,255,255,.1);color:#cdd6e0}
:root[data-theme="dark"] body #app .product-card-total-line,:root[data-theme="black"] body #app .product-card-total-line{color:#aab5c2!important;border-top-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] body #app .product-card-total-line strong,:root[data-theme="black"] body #app .product-card-total-line strong{color:#fff!important}
html body #app .product-card-compact .card h4{margin:.6rem 0 .15rem!important;padding:0 .85rem!important;font-size:.92rem!important;line-height:1.3!important;font-weight:700;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:2.6em;word-break:break-word}
html body #app .product-card-compact-footer{padding:0 .85rem!important;min-height:2.5rem}
html body #app .product-card-total-line{margin:.3rem .85rem .75rem!important}
html body #app .card-cart-btn:not(.added),html body #app .product-card-compact .card-cart-btn:not(.added),html body #app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn:not(.added){width:2.2rem!important;height:2.2rem!important;min-width:2.2rem!important;border-radius:11px!important;font-size:.88rem!important}
html body #app .delivery-method-row:not(.cart-delivery *) label:has(input:checked),html body #app .cart-delivery .delivery-method-row label:has(input:checked){border-color:color-mix(in srgb,var(--primary,#3fb97f) 55%,transparent)!important;background:color-mix(in srgb,var(--primary,#3fb97f) 5%,transparent)!important;box-shadow:none!important}
html body #app .delivery-method-row label:has(input:checked) strong,html body #app .delivery-method-row label:has(input:checked) .delivery-fee-inline{color:var(--text)!important}
html body #app .delivery-method-row input[type=radio]{accent-color:var(--primary,#3fb97f)}
html body #app .product-price-hero{border:0!important;background:transparent!important;box-shadow:none!important}
html body #app .product-price-hero .pph-label{color:var(--text-muted)!important}
html body #app .product-price-hero *:not(.pph-label):not(.badge){color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
html body #app .price-breakdown-table{background:linear-gradient(160deg,color-mix(in srgb,#8b5cf6 8%,var(--card)),var(--card))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#8b5cf6 20%,transparent)!important}
html body #app .card-cart-btn:not(.added),html body #app .product-card-compact .card-cart-btn:not(.added),html body #app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn:not(.added){width:2.6rem!important;height:2.6rem!important;min-width:2.6rem!important;border-radius:13px!important;border:0!important;outline:0!important;background:linear-gradient(135deg,#22c55e,#0d9f6e)!important;background-image:linear-gradient(135deg,#22c55e,#0d9f6e)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 4px 12px rgba(13,159,110,.32)!important}
html body #app .card-cart-btn:not(.added) i{color:#fff!important;-webkit-text-fill-color:#fff!important}
/* order panel */
html body #app .pd-total-box,html body #app .product-detail-order,html body #app .pd-order{border-radius:20px}
html body #app .pd-total-box .product-payment-plan-notice,html body #app .product-payment-plan-notice{border-radius:14px!important;border:0!important;background:linear-gradient(135deg,color-mix(in srgb,#22c55e 16%,var(--card)),color-mix(in srgb,#22c55e 6%,var(--card)))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#22c55e 30%,transparent)}
html body #app .product-payment-plan-notice.pay-after{background:linear-gradient(135deg,color-mix(in srgb,#f59e0b 18%,var(--card)),color-mix(in srgb,#f59e0b 6%,var(--card)))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 35%,transparent)}
html body #app .delivery-method-row label{border-radius:14px!important;padding:.85rem 1rem!important}
html body #app .price-breakdown-table{border-radius:16px!important;border:0!important;background:linear-gradient(160deg,color-mix(in srgb,#22c55e 10%,var(--card)),var(--card))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#22c55e 22%,transparent)!important}
html body #app .price-breakdown-table *{color:var(--text)}
html body #app .price-breakdown-table .muted,html body #app .price-breakdown-table span:first-child{color:var(--text-muted)}
html body #app button.btn:not(.btn-outline):not(.btn-sm)[onclick*="laceOrder"],html body #app button.btn[onclick*="placeOrder"],html body #app button.btn[onclick*="submitBuy"],html body #app button.btn[onclick*="buyNow"]{background:linear-gradient(135deg,#22c55e,#0d9f6e)!important;border:0!important;color:#fff!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(13,159,110,.34)!important;font-weight:700}
html body #app button#productAddToCartBtn{border-radius:14px!important;border:1.5px solid color-mix(in srgb,#22c55e 55%,transparent)!important;color:#0d9f6e!important;background:color-mix(in srgb,#22c55e 8%,var(--card))!important}
:root[data-theme="dark"] .lb-page .lb-tab.active,:root[data-theme="black"] .lb-page .lb-tab.active{color:#5eeaa0!important;border-bottom-color:#5eeaa0!important}
:root[data-theme="dark"] .lb-page .lb-tab:not(.active),:root[data-theme="black"] .lb-page .lb-tab:not(.active){color:#9aa7b4}
:root[data-theme="dark"] .lb-page .lb-chip.active,:root[data-theme="black"] .lb-page .lb-chip.active{color:#c9c2ff}
#app .card-cart-btn{width:2.6rem!important;height:2.6rem!important;min-width:2.6rem!important;border-radius:13px!important;border:0!important;background:linear-gradient(135deg,#22c55e,#0d9f6e)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 4px 12px rgba(13,159,110,.32)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:1rem}
#app .card-cart-btn i{color:#fff!important}
#app .card-cart-btn:active{transform:scale(.94)}
#app .product-card-compact .card h4{margin:.55rem .7rem .2rem!important;font-size:.92rem!important;line-height:1.3!important;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
#app .product-card-compact-footer{align-items:center!important;padding:0 .7rem!important;margin:.15rem 0 0!important;min-height:2.8rem}
#app .product-card-compact-price{font-size:1rem!important;font-weight:800}
#app .product-card-total-line{margin:.35rem .7rem .75rem!important;padding-top:.5rem;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent);font-size:.76rem!important;color:var(--text-muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .product-card-total-line strong{color:var(--text);font-weight:700}
.lb-page .lb-hero{padding:.9rem 1rem .85rem!important}
.lb-hero-sub{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85)}
.lb-hero-meta:empty,.lb-hero-meta:has(#lbHeroPills:empty){display:none}
.lb-hero-meta{margin-top:.6rem!important}
.lb-page .lb-reward{padding:.6rem .8rem!important;gap:.65rem!important}
.lb-page .lb-reward strong{font-size:.88rem!important}
.lb-page .lb-reward span{font-size:.76rem!important;margin-top:.05rem}
.lb-page .lb-reward-ico{width:2.1rem!important;height:2.1rem!important;font-size:.9rem!important}
.lb-page .lb-tabs{gap:.15rem}
.lb-page .lb-tab{font-size:.86rem!important}
.lb-page .lb-me{padding:.7rem .85rem!important}
.lb-page .lb-me-copy strong{font-size:.9rem}
.lb-page .lb-me-copy span{font-size:.76rem}
#app .home-lb-card{position:relative;overflow:visible;border-radius:18px;padding:.8rem .95rem;border:1px solid color-mix(in srgb,#f5b301 42%,var(--border))!important;background:linear-gradient(120deg,color-mix(in srgb,#ffd24d 20%,var(--card)) 0%,color-mix(in srgb,#f5b301 8%,var(--card)) 55%,var(--card) 100%)!important;box-shadow:0 6px 20px color-mix(in srgb,#f5b301 18%,transparent)!important}
#app .home-lb-ico{width:2.9rem;height:2.9rem;border-radius:14px;font-size:1.25rem;border:0!important;background:linear-gradient(145deg,#fff0a8 0%,#ffcf33 38%,#f5a300 72%,#d98200 100%)!important;color:#5b3300!important;box-shadow:0 6px 16px rgba(245,163,0,.55),inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -2px 4px rgba(150,80,0,.25)!important;position:relative;overflow:hidden}
#app .home-lb-ico i{color:#5b3300!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
#app .home-lb-ico .lb-shine{position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);pointer-events:none}
#app .home-lb-copy strong{font-size:.98rem;font-weight:800;letter-spacing:-.01em}
#app .home-lb-card>i.go{color:#d98200;font-size:.9rem}
#app ~ .toast-stack,.toast-stack{width:auto;max-width:min(92vw,26rem)}
#toastStack .toast,.toast-stack .toast{width:auto;max-width:100%;margin:0 auto;gap:.55rem;padding:.6rem 1rem .6rem .8rem;border-radius:999px;font-size:.85rem;font-weight:600;line-height:1.25;background:color-mix(in srgb,var(--card,#fff) 92%,transparent);border:1px solid color-mix(in srgb,var(--text,#111) 10%,transparent);box-shadow:0 8px 24px rgba(15,23,42,.16);transform:translateY(10px) scale(.98)}
#toastStack .toast.show,.toast-stack .toast.show{transform:translateY(0) scale(1)}
#toastStack .toast i,.toast-stack .toast i{font-size:1rem;flex:0 0 auto}
#toastStack .toast-success i{color:#16a34a}#toastStack .toast-error i{color:#ef4444}#toastStack .toast-info i{color:#3fb97f}
#app .vc2-feat .vc2-tags{overflow:hidden;max-width:100%}
#app .vc2-feat .vc2-tags em{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-nudge{position:absolute;right:.9rem;top:-.95rem;z-index:3;display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:999px;background:#1f2937;color:#fff;font-size:.78rem;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;opacity:0;white-space:nowrap}
.lb-nudge i{color:#ffd24d}
.lb-nudge::after{content:"";position:absolute;bottom:-5px;right:2.2rem;width:10px;height:10px;background:#1f2937;transform:rotate(45deg)}
#app .vc2-feat .vc2-body{padding:2.4rem .8rem 0;align-items:center;gap:.35rem}
.vc2-meta{display:flex;align-items:center;justify-content:center;gap:.35rem;max-width:100%;font-size:.8rem;color:var(--vd-muted,#64748b);white-space:nowrap;overflow:hidden}
.vc2-meta b{font-weight:400;opacity:.6}
.vc2-star{font-weight:700;color:var(--text);flex:0 0 auto}.vc2-star i{color:#f59e0b;font-size:.72rem}.vc2-star small{font-weight:500;color:var(--vd-muted,#64748b)}
.vc2-where{overflow:hidden;text-overflow:ellipsis;min-width:0}
#app .vc2-feat .vc2-tags{padding:.35rem .8rem 0;min-height:1.9rem}
#app .vc2-feat .vc2-actions{padding:.6rem .8rem .8rem;margin-top:auto}
#app .vc2 button.vc2-follow{width:100%;flex:1 1 100%;min-height:2.6rem;border-radius:12px!important}
.vc2>.vc2-more{position:absolute;top:.45rem;right:.45rem;z-index:2;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.88);color:#1f2937;display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:0 1px 4px rgba(0,0,0,.18)}
#app .hscroll.top-rated-vendors-scroll{align-items:stretch!important}
#app .vc2-feat{height:auto}
#app .vc2-feat .vc2-name{min-height:2.4em;display:-webkit-box;align-items:center}
#app .vc2-feat .vc2-tags{min-height:2.3rem;align-items:center}
#app .vc2-feat .vc2-actions{margin-top:auto!important}
#app .vc2 button.vc2-follow{background:linear-gradient(135deg,#22c55e,#0d9f6e)!important;color:#fff!important;border:0!important;box-shadow:0 4px 12px rgba(13,159,110,.32)!important;font-weight:700}
#app .vc2 button.vc2-follow.following{background:color-mix(in srgb,var(--text) 8%,var(--card))!important;color:var(--text)!important;box-shadow:none!important}
#app .storefront-follow-controls .follow-btn.btn-outline{background:linear-gradient(135deg,#22c55e,#0d9f6e)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;box-shadow:0 4px 12px rgba(13,159,110,.3)!important}
#app .storefront-follow-controls .follow-btn:not(.btn-outline){background:color-mix(in srgb,var(--text) 8%,var(--card))!important;color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;border:0!important;box-shadow:none!important}
.vc2-feat{text-align:center}
.vc2-feat .vc2-banner{height:4.6rem}
.vc2-feat .vc2-logo{left:50%;top:2.6rem;margin-left:-1.85rem}
.vc2-feat .vc2-body{padding:2.35rem .8rem .2rem;align-items:center;gap:.3rem;min-height:0}
.vc2-feat .vc2-name{text-align:center;font-size:.95rem;-webkit-line-clamp:2}
.vc2-feat .vc2-rate{display:none}
.vc2-feat .vc2-loc{text-align:center;max-width:100%}
.vc2-feat .vc2-tags{justify-content:center;padding:.5rem .8rem .2rem;min-height:0}
.vc2-feat .vc2-actions{padding:.7rem .8rem .9rem;gap:.5rem}
.vc2-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:.25rem;height:2.5rem;padding:0 .75rem;border-radius:12px;background:color-mix(in srgb,#f59e0b 13%,var(--card));font-size:.82rem;font-weight:700;color:var(--text)}
.vc2-pill i{color:#f59e0b;font-size:.75rem}.vc2-pill small{color:var(--vd-muted,#64748b);font-weight:500;font-size:.72rem}
#app .vc2-follow{background:linear-gradient(135deg,#1fbf75,#0e9f5f)!important;color:#fff!important;border:0!important;font-weight:700;box-shadow:0 3px 10px rgba(14,159,95,.28)!important}
#app .vc2-follow.following{background:color-mix(in srgb,var(--text) 7%,var(--card))!important;color:var(--text)!important;box-shadow:none!important}
#app .hscroll.top-rated-vendors-scroll>.vc2{flex:0 0 11.2rem!important;width:11.2rem!important;min-width:0!important;max-width:11.2rem!important}
#app .vd-views #vendorsViewGridBtn,#app .vd-views #vendorsViewListBtn,#app .vd-views #vendorsViewMapBtn{box-sizing:border-box!important;flex:0 0 2.6rem!important;width:2.6rem!important;height:2.4rem!important;min-width:2.6rem!important;min-height:2.4rem!important;max-width:2.6rem!important;padding:0!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
#app .vd-views button.vd-view i{font-size:1rem!important;width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center;line-height:1}
#app .home-lb-copy strong{font-size:.95rem;font-weight:700}
.vd-chip:not(.vd-chip-all){background:color-mix(in srgb,var(--cc) 9%,var(--card));border-color:color-mix(in srgb,var(--cc) 24%,transparent)}
.vd-chip:not(.vd-chip-all) i{color:var(--cc)}
#app .vd-chip.active:not(.vd-chip-all) i{color:#fff!important}
#app .vd-title-ico{width:2.4rem!important;height:2.4rem!important;border-radius:12px!important;background:transparent!important;border:1.5px solid color-mix(in srgb,var(--vd-g) 45%,transparent)!important;color:var(--vd-gt)!important}
#app .vd-title h2{font-size:1.25rem!important;letter-spacing:-.01em}
.vd-head{margin:.6rem 0 1.1rem!important}
.top-rated-vendors-scroll .vc2{flex:0 0 12.5rem;width:12.5rem;scroll-snap-align:start}
/* Vendors page only: cards, category chips, view controls */
.vd-views{display:inline-flex;gap:.3rem;padding:.25rem;border-radius:14px;background:color-mix(in srgb,var(--text) 5%,var(--card));border:1px solid var(--vd-line)}
#app .vd-page .vd-views button.vd-view{width:2.5rem;height:2.3rem;border:0!important;border-radius:10px;background:transparent!important;color:var(--vd-muted)!important;box-shadow:none!important}
#app .vd-page .vd-views button.vd-view i{color:inherit!important;font-size:.95rem}
#app .vd-views #vendorsViewGridBtn.active,#app .vd-views #vendorsViewListBtn.active,#app .vd-views #vendorsViewMapBtn.active,#app .vd-page .vd-views button.vd-view.active{background:var(--vd-g)!important;color:#fff!important;box-shadow:0 2px 8px color-mix(in srgb,var(--vd-g) 35%,transparent)!important}
#app .vd-views #vendorsViewGridBtn.active i,#app .vd-views #vendorsViewListBtn.active i,#app .vd-views #vendorsViewMapBtn.active i,#app .vd-page .vd-views button.vd-view.active i{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}
.vd-chips{display:flex;gap:.5rem;overflow-x:auto;margin:0 -1rem .85rem;padding:.1rem 1rem .35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vd-chips::-webkit-scrollbar{display:none}
.vd-chips[hidden]{display:none}
.vd-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:0 1rem;border-radius:14px;border:1px solid var(--vd-line);background:var(--card);color:var(--text);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.vd-chip i{font-size:1rem;color:var(--vd-gt)}
#app .vd-chip.active{background:var(--vd-g)!important;border-color:var(--vd-g)!important;color:#fff!important}
#app .vd-chip.active i{color:#fff!important}
.vc2{position:relative;display:flex;flex-direction:column;align-items:stretch!important;text-align:left;min-width:0;border-radius:18px;background:var(--card);border:1px solid var(--vd-line);overflow:hidden;cursor:pointer;box-shadow:0 2px 10px rgba(15,23,42,.06);-webkit-tap-highlight-color:transparent;transition:transform .18s,box-shadow .18s}
.vc2:active{transform:scale(.99)}
.vc2-banner{height:5.6rem;background:linear-gradient(135deg,color-mix(in srgb,var(--vd-g) 38%,var(--card)),color-mix(in srgb,var(--vd-g) 14%,var(--card)));overflow:hidden}
.vc2-banner img{width:100%;height:100%;object-fit:cover;display:block}
.vc2-logo{position:absolute;left:.7rem;top:3.35rem;width:3.7rem;height:3.7rem;border-radius:50%;background:#fff;border:3px solid var(--card);box-shadow:0 2px 8px rgba(15,23,42,.18);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vc2-logo .vd-initials span{font-size:1.15rem!important}
.vc2-logo img,.vc2-logo .vd-initials{width:100%;height:100%;border-radius:50%;object-fit:cover}
.vc2-body{display:flex;flex-direction:column;gap:.18rem;padding:.55rem .7rem .2rem 4.75rem;min-width:0;min-height:5.2rem}
.vc2-name{font-size:.95rem;line-height:1.2;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vc2-rate{font-size:.78rem;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:.25rem}
.vc2-rate i{color:#f59e0b;font-size:.72rem}.vc2-rate small{color:var(--vd-muted);font-weight:500;font-size:.76rem}
.vc2-loc{font-size:.78rem;color:var(--vd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc2-loc i{margin-right:.2rem;opacity:.8}.vc2-loc b{font-weight:400}
.vc2-tags{display:flex;flex-wrap:wrap;gap:.3rem;padding:.35rem .7rem .1rem;min-height:1.9rem}
.vc2-tags em{font-style:normal;font-size:.72rem;font-weight:600;padding:.22rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--text) 6%,var(--card));color:var(--vd-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc2-actions{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem .65rem}
#app .vc2-follow{flex:1;min-width:0;margin:0!important;min-height:2.4rem;border-radius:12px!important;border:0!important;background:color-mix(in srgb,var(--vd-g) 14%,var(--card))!important;color:var(--vd-gt)!important;font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
#app .vc2-follow.following{background:var(--vd-g)!important;color:#fff!important}
.vc2-own{flex:1;text-align:center;font-size:.8rem;font-weight:700;color:var(--vd-muted);min-height:2.4rem;line-height:2.4rem}
.vc2-more{flex:0 0 auto;width:2.2rem;height:2.4rem;border:0;background:transparent;color:var(--text);font-size:1rem;cursor:pointer;border-radius:10px}
.vc2-menu{position:fixed;z-index:3000;min-width:10.5rem;padding:.3rem;border-radius:14px;background:var(--card);border:1px solid var(--vd-line,rgba(0,0,0,.1));box-shadow:0 10px 30px rgba(15,23,42,.2)}
.vc2-menu button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.65rem .75rem;border:0;background:transparent;color:var(--text);font:inherit;font-size:.9rem;font-weight:600;border-radius:10px;cursor:pointer;text-align:left}
.vc2-menu button:active{background:color-mix(in srgb,var(--text) 6%,transparent)}
/* ---- levromart-bank-install-final-fix-20260916 ---- */
/* Vendor-application bank picker: keep the trigger above any surrounding layers. */
.bank-picker-trigger{position:relative;z-index:20;cursor:pointer;pointer-events:auto!important;}
#vendorApplyBankPickerModal{z-index:100000!important;}
/* Browser-like install strip. It appears only when the browser can install the PWA
(or on iOS where the Add to Home Screen instructions are useful). */
#levroInstallBanner{display:none;position:relative;z-index:9000;width:100%;box-sizing:border-box;padding:10px 14px;border-bottom:1px solid var(--border,#dfe4ea);background:var(--surface,#fff);box-shadow:0 2px 10px rgba(0,0,0,.08);}
#levroInstallBanner.is-visible{display:flex;align-items:center;gap:12px;}
#levroInstallBanner .levro-install-icon{width:42px;height:42px;flex:0 0 42px;border-radius:10px;overflow:hidden;background:var(--primary,#3fb97f);display:flex;align-items:center;justify-content:center;}
#levroInstallBanner .levro-install-icon img{width:100%;height:100%;object-fit:cover;}
#levroInstallBanner .levro-install-copy{min-width:0;flex:1;line-height:1.2;}
#levroInstallBanner .levro-install-copy strong{display:block;font-size:.95rem;color:var(--text,#172033);}
#levroInstallBanner .levro-install-copy span{display:block;font-size:.78rem;color:var(--muted,#667085);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#levroInstallBanner .levro-install-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;}
#levroInstallBanner button{border:0;border-radius:9px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer;}
#levroInstallBanner .levro-install-btn{background:var(--primary,#3fb97f);color:#fff;}
#levroInstallBanner .levro-install-close{background:transparent;color:var(--muted,#667085);font-size:1.15rem;padding:7px;}
@media(max-width:480px){#levroInstallBanner{padding:9px 10px;gap:9px;}#levroInstallBanner .levro-install-icon{width:38px;height:38px;flex-basis:38px;}#levroInstallBanner .levro-install-copy strong{font-size:.88rem;}#levroInstallBanner .levro-install-copy span{font-size:.72rem;}#levroInstallBanner .levro-install-btn{padding:8px 10px;}}
/* ---- levromart-bank-list-visible-and-install-banner-final-20260916 ---- */
/* Final bank-picker visibility fix. */
#vendorApplyBankPickerModal{
position:fixed !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
z-index:1000000 !important;
padding:12px !important;
box-sizing:border-box !important;
background:rgba(2,8,23,.62) !important;
overflow-y:auto !important;
}
#vendorApplyBankPickerModal .vendor-bank-picker-content{
display:flex !important;
flex-direction:column !important;
width:min(560px,100%) !important;
max-height:min(86vh,760px) !important;
min-height:240px !important;
box-sizing:border-box !important;
overflow:hidden !important;
background:var(--surface,#fff) !important;
color:var(--text,#172033) !important;
border-radius:18px !important;
padding:16px !important;
}
#vendorApplyBankPickerModal .vendor-bank-picker-list{
display:block !important;
flex:1 1 auto !important;
min-height:80px !important;
max-height:52vh !important;
overflow-y:auto !important;
overflow-x:hidden !important;
visibility:visible !important;
opacity:1 !important;
color:var(--text,#172033) !important;
background:var(--surface,#fff) !important;
-webkit-overflow-scrolling:touch !important;
}
#vendorApplyBankPickerModal .vendor-bank-option{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
width:100% !important;
min-height:58px !important;
color:var(--text,#172033) !important;
background:transparent !important;
}
#vendorApplyBankPickerModal .vendor-bank-option-main strong,
#vendorApplyBankPickerModal .vendor-bank-option-main small{
color:inherit !important;
}
#vendorApplyBankPickerModal .vendor-bank-option-main small{
color:var(--text-muted,#667085) !important;
}
#vendorApplyBankPickerModal .vendor-bank-picker-empty{
display:block !important;
padding:18px 12px !important;
color:var(--text-muted,#667085) !important;
text-align:center !important;
}
/* Browser install banner: visible on normal browser sessions, hidden only
when the PWA is already installed. */
#levroInstallBanner{
display:none !important;
}
#levroInstallBanner.is-visible{
display:flex !important;
}
/* ---- levromart-vendor-application-final-polish-20260916 ---- */
/* Vendor application: clean themed sector picker and compact actions. */
.vendor-application-sector-wrap{position:relative;margin-top:.25rem}
.vendor-application-sector-trigger{
width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;
gap:.75rem;padding:.75rem .9rem;border:1px solid var(--border);
background:var(--input-bg,var(--card));color:var(--text);border-radius:13px;
font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;
}
.vendor-application-sector-trigger:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
.vendor-application-sector-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vendor-application-sector-modal{
position:fixed;inset:0;z-index:16000;display:flex;align-items:center;justify-content:center;
padding:1rem;background:rgba(2,6,23,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.vendor-application-sector-sheet{
width:min(520px,94vw);max-height:min(80vh,700px);overflow:hidden;
background:var(--card);color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));
border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.34);padding:.9rem;
display:flex;flex-direction:column;
}
.vendor-application-sector-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}
.vendor-application-sector-head strong{font-size:1.05rem}
.vendor-application-sector-search{position:relative}
.vendor-application-sector-search i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.vendor-application-sector-search input{
width:100%;box-sizing:border-box;padding:.75rem .9rem .75rem 3.15rem!important;
border:1px solid var(--border);border-radius:13px;background:var(--input-bg,var(--card));color:var(--text);
}
.vendor-application-sector-results{
overflow:auto;margin-top:.7rem;display:flex;flex-direction:column;gap:.2rem;
-webkit-overflow-scrolling:touch;
}
.vendor-application-sector-option{
width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:.7rem;
padding:.7rem .8rem;border:1px solid transparent;border-radius:12px;
background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;
}
.vendor-application-sector-option:hover,.vendor-application-sector-option.selected{
background:color-mix(in srgb,var(--primary) 10%,transparent);
border-color:color-mix(in srgb,var(--primary) 25%,var(--border));
}
.vendor-application-sector-option i{color:var(--primary)}
.vendor-application-sector-other{
margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--border);
}
.vendor-application-actions{display:flex;gap:.65rem;margin-top:.8rem}
.vendor-application-actions .btn{margin-top:0!important;flex:1 1 0}
.vendor-application-cancel{background:#dc2626!important;color:#fff!important;border:1px solid #dc2626!important}
@media(max-width:480px){
.vendor-application-sector-sheet{width:calc(100vw - 24px)}
.vendor-application-actions{position:sticky;bottom:0;background:var(--card);padding-top:.55rem}
}
/* ---- levromart-admin-delete-password-only-20260916 ---- */
/* The deletion flow no longer asks for the old 11-digit phone confirmation. */
/* ---- levromart-vendor-recycle-bin-final-20260916 ---- */
.admin-vendor-card .badge.warning{background:color-mix(in srgb,#f59e0b 16%,transparent);color:#b45309}
[data-theme="dark"] .admin-vendor-card .badge.warning{color:#fbbf24}
/* ---- levromart-admin-reject-inventory-fix-20260916 ---- */
/* Admin vendor rejection + inventory: intentionally scoped to the requested
admin workflows. No changes to bottom navigation or marketplace surfaces. */
.admin-reject-reason-modal{
position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;
padding:1rem;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.admin-reject-reason-modal.hidden{display:none}
.admin-reject-reason-card{
width:min(560px,calc(100vw - 2rem));border:1px solid rgba(128,128,128,.28);
border-radius:22px;padding:1.1rem;background:var(--card-bg,#111);
color:var(--text,#fff);box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.admin-reject-reason-card h3{margin:0 0 .5rem;font-size:1.2rem}
.admin-reject-reason-card p{margin:.25rem 0 1rem;color:var(--muted,#9ca3af)}
.admin-reject-reason-card textarea{
width:100%;min-height:130px;resize:vertical;box-sizing:border-box;
border:1px solid rgba(128,128,128,.35);border-radius:14px;padding:.85rem;
background:transparent;color:inherit;font:inherit;
}
.admin-reject-reason-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:.75rem}
.admin-inventory-summary{display:flex;gap:.7rem;flex-wrap:wrap;margin:.8rem 0}
.admin-inventory-stat{padding:.8rem 1rem;border:1px solid rgba(128,128,128,.22);border-radius:15px;background:var(--card-bg,#111);min-width:135px}
.admin-inventory-stat strong{display:block;font-size:1.25rem}
.admin-inventory-stat span{font-size:.82rem;color:var(--muted,#9ca3af)}
.admin-inventory-controls{display:flex;gap:.65rem;flex-wrap:wrap;margin:.8rem 0}
.admin-inventory-controls input,.admin-inventory-controls select{
min-height:46px;border:1px solid rgba(128,128,128,.28);border-radius:12px;
background:var(--card-bg,#111);color:inherit;padding:.65rem .8rem;font:inherit;
}
.admin-inventory-controls input{flex:1 1 280px}
.admin-inventory-controls select{flex:0 1 220px}
.admin-inventory-controls .admin-inventory-status-select{flex:0 1 200px;font-weight:700}
.admin-inventory-controls .btn{flex:0 0 auto;min-height:46px}
.admin-inventory-table-wrap{overflow-x:auto;border:1px solid rgba(128,128,128,.2);border-radius:16px}
.admin-inventory-table{width:100%;border-collapse:collapse;min-width:760px}
.admin-inventory-table th,.admin-inventory-table td{padding:.75rem .7rem;border-bottom:1px solid rgba(128,128,128,.16);text-align:left}
.admin-inventory-table th{font-size:.82rem;white-space:nowrap}
.admin-inventory-table tbody tr:last-child td{border-bottom:0}
.admin-inventory-table .num{text-align:right}
.admin-inventory-months{margin-top:1rem}
.admin-inventory-months summary{cursor:pointer;font-weight:700}
.admin-inventory-status{font-size:.78rem;padding:.2rem .5rem;border-radius:999px;background:rgba(16,185,129,.12);color:#3fb97f}
.admin-inventory-status.removed{background:rgba(239,68,68,.12);color:#ef4444}
/* ---- levromart-admin-delete-following-20260917 ---- */
.admin-inventory-table th:last-child,.admin-inventory-table td:last-child{min-width:92px;text-align:center;}
.admin-inventory-delete-btn{padding:.38rem .55rem!important;font-size:.72rem!important;white-space:nowrap;}
.customer-following-page{max-width:900px;margin:0 auto;padding-bottom:1rem;}
.customer-following-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
.customer-following-head h2{font-size:1.2rem;}
.customer-following-grid{display:grid;gap:.65rem;}
.customer-following-card{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;padding:.75rem;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);cursor:pointer;font:inherit;box-shadow:var(--shadow-sm,0 2px 10px rgba(0,0,0,.05));}
.customer-following-card:hover{border-color:color-mix(in srgb,var(--primary) 30%,var(--border));}
.customer-following-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--primary) 12%,var(--card));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--primary);}
.customer-following-avatar img{width:100%;height:100%;object-fit:cover;}
.customer-following-copy{min-width:0;display:flex;flex-direction:column;gap:.14rem;flex:1;}
.customer-following-copy strong{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.customer-following-copy span{font-size:.76rem;color:var(--text-muted);}
.customer-following-card>i{color:var(--text-muted);font-size:.78rem;}
.profile-customer-following-header{cursor:pointer;border-radius:14px;}
.profile-customer-following-header:hover{background:color-mix(in srgb,var(--primary) 5%,transparent);}
@media(max-width:520px){.admin-inventory-table th:last-child,.admin-inventory-table td:last-child{min-width:80px}.admin-inventory-delete-btn{font-size:.65rem!important;padding:.35rem .42rem!important}.customer-following-head h2{font-size:1.05rem;}}
.vendor-followers-list{display:flex;flex-direction:column;gap:.15rem;}
.vendor-follower-row{display:flex;align-items:center;gap:.75rem;padding:.65rem .2rem;border-bottom:1px solid var(--border);}
.vendor-follower-row:last-child{border-bottom:0;}
.vendor-follower-copy{min-width:0;display:flex;flex-direction:column;gap:.14rem;}
.vendor-follower-copy strong{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vendor-follower-copy span{font-size:.76rem;color:var(--text-muted);}
/* ---- levromart-admin-performance-final-20260916 ---- */
.admin-vendor-card .badge.success{background:rgba(22,163,74,.14);color:#16a34a}
.admin-vendor-card .badge.warning{background:rgba(245,158,11,.15);color:#d97706}
.admin-vendor-card .badge.danger{background:rgba(239,68,68,.14);color:#dc2626}
[data-theme="dark"] .admin-vendor-card .badge.success{color:#3fb97f}
[data-theme="dark"] .admin-vendor-card .badge.warning{color:#fbbf24}
[data-theme="dark"] .admin-vendor-card .badge.danger{color:#f87171}
/* ---- levromart-admin-speed-final-20260916 ---- */
/* Keep admin status badges visually distinct without changing the admin layout. */
.admin-vendor-card .badge.success{background:rgba(22,163,74,.14)!important;color:#16a34a!important}
.admin-vendor-card .badge.warning{background:rgba(245,158,11,.15)!important;color:#d97706!important}
.admin-vendor-card .badge.danger{background:rgba(239,68,68,.14)!important;color:#dc2626!important}
[data-theme="dark"] .admin-vendor-card .badge.success{color:#3fb97f!important}
[data-theme="dark"] .admin-vendor-card .badge.warning{color:#fbbf24!important}
[data-theme="dark"] .admin-vendor-card .badge.danger{color:#f87171!important}
/* ---- levromart-absolute-final-admin-ui-20260917 ---- */
#app .admin-dash-tabs{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;box-sizing:border-box!important;padding:0!important;margin:.8rem 0 1.3rem!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x!important;}
#app .admin-dash-tabs::-webkit-scrollbar{display:none!important}
#app .admin-dash-tabs-inner{display:flex!important;align-items:stretch!important;justify-content:center!important;gap:.55rem!important;min-width:100%!important;width:max-content!important;box-sizing:border-box!important;padding:0 .65rem!important;}
#app .admin-dash-tabs .dash-tab{color:var(--text-muted)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;flex:0 0 auto!important;min-width:max-content!important;margin:0!important;padding:.2rem .35rem .65rem!important;white-space:nowrap!important;}
#app .admin-dash-tabs .dash-tab i{color:currentColor!important}
#app .admin-dash-tabs .dash-tab:hover,#app .admin-dash-tabs .dash-tab:focus-visible{color:var(--primary)!important}
#app .admin-dash-tabs .dash-tab.active{color:var(--primary)!important;border-bottom-color:var(--primary)!important}
@media(max-width:900px){#app .admin-dash-tabs-inner{justify-content:center!important;min-width:max-content!important;padding-inline:.65rem!important;}}
/* ---- levromart-service-editor-final-20260917 ---- */
#productVariantPricing .service-variety-only{display:none}
#productVariantPricing.is-service-editor .service-variety-only{display:block}
#productVariantPricing.is-service-editor .product-variety-only{display:none}
#productVariantPricing.is-service-editor .variant-row-title::after{content:" · Service option";font-weight:600;color:var(--text-muted);font-size:.72rem}
#productVariantPricing.is-service-editor .variant-price-note{max-width:44rem}
/* ---- levromart-payment-followup-modal-20260917 ---- */
.levro-payment-followup-backdrop{position:fixed;inset:0;z-index:100850;background:rgba(0,0,0,.62);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:1rem}
.levro-payment-followup-card{width:min(520px,calc(100vw - 2rem));background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:22px;padding:1.2rem;box-shadow:0 24px 90px rgba(0,0,0,.4)}
.levro-payment-followup-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--warning) 14%,var(--card));color:var(--warning);font-size:1.4rem;margin:0 auto .75rem}
.levro-payment-followup-actions{display:grid;grid-template-columns:1fr;gap:.55rem;margin-top:1rem}
.levro-payment-followup-actions .btn{width:100%}
.levro-payment-followup-meta{margin-top:.7rem;padding:.65rem .75rem;border-radius:13px;background:color-mix(in srgb,var(--primary) 5%,var(--card));border:1px solid var(--border);font-size:.78rem}
/* ---- levromart-admin-nav-final-hardening-20260917 ---- */
#app .admin-dash-tabs{display:block!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;color:var(--text)!important;text-align:center!important}
#app .admin-dash-tabs::-webkit-scrollbar{display:none!important}
#app .admin-dash-tabs-inner{display:flex!important;width:max-content!important;min-width:100%!important;justify-content:center!important;align-items:stretch!important;gap:.65rem!important;margin:0 auto!important;padding:0 .75rem!important;box-sizing:border-box!important}
#app .admin-dash-tabs .dash-tab{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.4rem!important;flex:0 0 auto!important;color:var(--text)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;padding:.35rem .45rem .7rem!important;white-space:nowrap!important}
#app .admin-dash-tabs .dash-tab i{color:currentColor!important}
#app .admin-dash-tabs .dash-tab.active{color:var(--primary)!important;border-bottom-color:var(--primary)!important}
#app .admin-dash-tabs .dash-tab:hover,#app .admin-dash-tabs .dash-tab:focus-visible{color:var(--primary)!important}
@media(max-width:900px){#app .admin-dash-tabs-inner{min-width:max-content!important;margin-left:max(0px,calc((100vw - 900px)/2))!important;margin-right:max(0px,calc((100vw - 900px)/2))!important}}
.admin-payment-issue-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.8rem 0 .9rem;padding:.3rem;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--card) 92%,transparent)}
.admin-payment-issue-tab{min-width:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text-muted);padding:.62rem .45rem;display:flex;align-items:center;justify-content:center;gap:.35rem;cursor:pointer;font:inherit;font-size:.72rem;font-weight:750;white-space:nowrap}
.admin-payment-issue-tab strong{min-width:1.3rem;height:1.3rem;padding:0 .25rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.admin-payment-issue-tab.active{color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--card));border-color:color-mix(in srgb,var(--primary) 25%,var(--border))}
.admin-payment-issue-tab.active strong{background:var(--primary);color:#fff}
@media(max-width:560px){.admin-payment-issue-tabs{grid-template-columns:1fr}.admin-payment-issue-tab{justify-content:space-between}}
/* ---- levromart-service-booking-picker-20260917 ---- */
.service-variant-picker{margin:.7rem 0;padding:.75rem;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--primary) 3%,var(--card))}
.service-variant-picker-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.55rem}
.service-variant-picker-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.service-variant-choice{display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;padding:.65rem;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;font:inherit;min-width:0}
.service-variant-choice.active{border-color:var(--primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent);background:color-mix(in srgb,var(--primary) 7%,var(--card))}
.service-variant-choice strong{font-size:.78rem;line-height:1.25}
.service-variant-choice small{font-size:.68rem;color:var(--text-muted);line-height:1.35}
.service-variant-choice .service-variant-price{color:var(--primary);font-weight:800}
@media(max-width:480px){.service-variant-picker-list{grid-template-columns:1fr}}
/* ---- levromart-final-payout-activation-and-bank-picker-20260917 ---- */
/* Final payout UX: the selected bank must be obvious and the activation CTA
must remain visible until a Paystack subaccount actually exists. */
.vendor-payout-activation-banner{
width:min(700px,100%);margin:0 auto 1rem;padding:1rem 1.05rem;
border:1px solid color-mix(in srgb,var(--primary) 34%,var(--border));
border-radius:1rem;background:color-mix(in srgb,var(--primary) 7%,var(--card));
box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 8%,transparent);
}
.vendor-payout-activation-banner strong{display:flex;align-items:center;gap:.45rem;font-size:1rem;color:var(--text);}
.vendor-payout-activation-banner p{margin:.35rem 0 .7rem;color:var(--text-muted);line-height:1.45;font-size:.86rem;}
.vendor-payout-activation-banner .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;}
.vendor-bank-picker-modal .vendor-bank-option{cursor:pointer!important;pointer-events:auto!important;}
.vendor-bank-picker-modal .vendor-bank-option-main{pointer-events:none;}
.vendor-bank-picker-modal .vendor-bank-option-icon,
.vendor-bank-picker-modal .vendor-bank-option > i{pointer-events:none;}
/* ---- levromart-20260918-vendor-directory-free-list-final ---- */
/* Vendor directory: show the complete filtered set; no pagination/"View more" control. */
#vendorsDirectoryMoreBtn { display:none !important; }
#vendorsDirectoryCount { display:none !important; }
/* ---- levromart-bottom-nav-add-inline-final ---- */
/* The + (add listing) control sits flush inside the bar, not raised above it. */
#bottomNav .bottom-nav-add{
position:relative !important; inset:auto !important; top:0 !important; margin:0 !important;
width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important;
flex:0 0 34px !important; border-radius:50% !important; border:0 !important;
background:var(--primary) !important; color:#fff !important; font-size:1rem !important;
box-shadow:none !important; align-self:center !important; justify-self:center !important;
}
/* ---- levromart-follow-btn-icon-only-final ---- */
/* Storefront Follow/Following is icon-only (checkmark once following, a
person-plus icon otherwise) instead of a wide text button. */
.storefront-follow-wrap .follow-btn.follow-btn-icon,
.storefront-profile .storefront-top-actions .follow-btn.follow-btn-icon,
.storefront-profile .storefront-profile-actions .follow-btn.follow-btn-icon{
min-width:40px !important; width:40px !important; height:40px !important; min-height:40px !important;
padding:0 !important; border-radius:50% !important; display:inline-flex !important;
align-items:center !important; justify-content:center !important; font-size:1rem !important;
white-space:nowrap !important;
}
@media(max-width:620px){
.storefront-follow-wrap .follow-btn.follow-btn-icon,
.storefront-profile .storefront-top-actions .follow-btn.follow-btn-icon,
.storefront-profile .storefront-profile-actions .follow-btn.follow-btn-icon{
width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important;
}
}
/* ---- levromart-vendor-profile-merged-final ---- */
/* Vendor profile = vendor shop dashboard, LinkedIn-style: header card, then
full-width sections separated by thin lines, no unnecessary icon clutter. */
.vendor-profile-header-card{max-width:700px;margin:0 auto;border-radius:16px;overflow:visible;background:var(--card);border:1px solid var(--border);}
.vendor-profile-header-cover{height:104px;position:relative;overflow:hidden;border-radius:16px 16px 0 0;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 24%,var(--card)),color-mix(in srgb,var(--primary) 6%,var(--card)));background-size:cover;background-position:center;border-bottom:0;}
.vendor-profile-header-cover .storefront-cover-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.76rem;}
.vendor-profile-header-cover::after{content:none;}
.vendor-profile-header-body{padding:0 1.1rem 1.15rem;overflow:visible;}
/* No overlap with the cover image at all - a small gap below it instead.
The previous overlapping-avatar design kept getting reported as the
avatar/Edit button being clipped or covered by the banner on some
devices; a plain non-overlapping layout can't have that problem. */
.vendor-profile-header-avatar-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;position:relative;z-index:1;margin-top:.9rem;}
.vendor-profile-header-avatar{width:4.4rem;height:4.4rem;border-radius:50%;object-fit:cover;border:3px solid var(--card);background:var(--card);flex:0 0 auto;}
.vendor-profile-edit-btn{margin-bottom:.35rem;flex:0 0 auto;}
.vendor-profile-header-name{margin:.7rem 0 0;font-size:1.15rem;line-height:1.3;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.vendor-profile-header-personal{margin:.18rem 0 0;color:var(--text-muted);font-size:.85rem;}
.vendor-profile-header-location{margin:.35rem 0 0;color:var(--text-muted);font-size:.82rem;display:flex;align-items:center;gap:.32rem;}
.vendor-profile-header-bio{margin:.55rem 0 0;font-size:.86rem;line-height:1.42;}
.vendor-profile-divider{border:none;border-top:1px solid var(--border);max-width:700px;margin:1.3rem auto;}
.vendor-profile-section{max-width:700px;margin:0 auto;}
.vendor-profile-section-title{display:flex;align-items:center;gap:.45rem;font-size:.95rem;margin:0 0 .75rem;}
.vendor-profile-see-more{display:flex;align-items:center;gap:.35rem;width:100%;background:none;border:none;padding:.65rem 0 0;color:var(--primary);font-weight:700;font-size:.82rem;cursor:pointer;text-align:left;}
.vendor-profile-listing-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem;}
.vendor-profile-subrow{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-top:1px solid var(--border);font-size:.86rem;cursor:pointer;gap:.6rem;}
.vendor-profile-subrow .muted{display:flex;align-items:center;gap:.4rem;font-size:.8rem;white-space:nowrap;}
.vendor-profile-plain-rows{max-width:700px;margin:0 auto;display:flex;flex-direction:column;}
.vendor-profile-plain-row{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);padding:.85rem .1rem;font-size:.92rem;font-weight:600;color:var(--text);cursor:pointer;}
.vendor-profile-plain-row:first-child{border-top:none;}
.vendor-profile-settings-row{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);}
.settings-logout-row,.settings-logout-row i{color:var(--danger) !important;}
.notif-type-icon{display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:50% !important;
background:color-mix(in srgb,var(--nti,#64748b) 15%,transparent) !important;color:var(--nti,#64748b) !important;font-size:.95rem !important;}
.notif-type-icon i{color:var(--nti,#64748b) !important;}
#confirmModalOk.btn-danger{background:#dc2626 !important;background-image:none !important;border-color:#dc2626 !important;color:#fff !important;}
.profile-panel-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.5rem;margin:1rem 1.1rem 0;padding:.8rem;border-radius:14px;background:var(--card);border:1px solid var(--border);}
.profile-panel-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;min-width:0;}
.profile-panel-stat-link{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:.2rem;border-radius:10px;}
.profile-panel-stat-link:hover,.profile-panel-stat-link:active{background:color-mix(in srgb,var(--primary) 8%,transparent);}
.profile-panel-stat strong{font-size:1.15rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-panel-stat span{font-size:.7rem;color:var(--text-muted);}
.admin-profile-stats .profile-panel-stat strong{font-size:1rem;}
.profile-panel-scroll .vendor-profile-divider{margin:1rem 1.1rem;}
.profile-panel-scroll .vendor-profile-plain-rows{padding:0 1.1rem;}
.profile-panel-scroll .vendor-profile-plain-row{font-size:1rem;}
.profile-view-full-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.3rem;font-size:.76rem;font-weight:700;color:var(--primary);}
/* Horizontal vendor rails have few items and don't need the
content-visibility containment meant for the big vertical product grid;
off-screen cards there were reporting a mismatched 280x280 placeholder
size, and align-items:stretch on the row stretched every card (including
visible ones) to match, making the whole rail look elongated. */
.hscroll > .vendor-card, .hscroll > .homepage-vendor-card,
.top-rated-vendors-scroll > .vendor-card, .top-rated-vendors-scroll > .homepage-vendor-card,
.trending-scroll > .vendor-card, .trending-scroll > .homepage-vendor-card{
content-visibility:visible !important; contain:none !important;
}
/* Horizontal rail cards (vendor cards, product cards) carry role="button"
for accessibility, which made them match the sitewide
[role="button"]{touch-action:manipulation} tap-responsiveness rule with
equal-or-higher specificity than the rail's own touch-action:pan-x pan-y -
silently blocking horizontal drag-scroll when a touch started ON a card
instead of the empty gap between them. Restore full pan on the cards too. */
.hscroll > .vendor-card, .hscroll > .homepage-vendor-card,
.hscroll .product-card-wrap, .hscroll > .card,
.top-rated-vendors-scroll > .vendor-card, .top-rated-vendors-scroll > .homepage-vendor-card,
.trending-scroll > .vendor-card, .trending-scroll > .homepage-vendor-card,
.trending-scroll .product-card-wrap{
touch-action: pan-x pan-y !important;
}
/* Same fix, same reasoning, for the product-detail variety picker: its
options are native