/* ---- levromart-final-scope-overrides ---- */
/* Icon glyphs and small accent text should be neutral, not green -- a soft
   green circle/badge behind an icon can stay (it's just a background tint),
   but the glyph and text sitting on top of it competes with real accents
   (buttons, active-state pills) if it's colored too. Genuine status colors
   (a confirmed "added to cart", a rating's success/warning/danger class)
   are untouched -- those still mean something. */
#app .levro-quick-icon,
#app .levro-home-quick-actions .levro-quick-icon,
#app .card-cart-btn:not(.added),#app .card-service-btn,
#app .product-card-compact .card-cart-btn:not(.added),
#app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn:not(.added),
#app .section-title-link,
#app .section-title > i, #app .section-title > span > i,
#app .product-current-price{
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
}
#app .levro-quick-icon,
#app .levro-home-quick-actions .levro-quick-icon,
#app .card-cart-btn:not(.added),
#app .product-card-compact .card-cart-btn:not(.added),
#app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn:not(.added){
  background-color:color-mix(in srgb,var(--text) 8%,var(--card)) !important;
  border-color:color-mix(in srgb,var(--text) 16%,var(--border)) !important;
}
/* The per-card add-to-cart icon looked identical to every other neutral
   gray icon on the card -- a light, brighter green reads as an action
   button again instead of blending in. */
#app .card-cart-btn:not(.added),
#app .product-card-compact .card-cart-btn:not(.added),
#app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card .card-cart-btn:not(.added){
  color:color-mix(in srgb, var(--primary) 75%, #17c964) !important;
  -webkit-text-fill-color:color-mix(in srgb, var(--primary) 75%, #17c964) !important;
  background-color:color-mix(in srgb, var(--primary) 14%, var(--card)) !important;
  border-color:color-mix(in srgb, var(--primary) 32%, var(--border)) !important;
}
/* Home's six quick-action cards: soft pastel "premium quick-action card"
   treatment (icon badge, title, one-line description, corner arrow)
   instead of the old dark compact icon+label rows. Colors are fixed light
   pastels on purpose (not theme-driven) -- they're meant to read as light
   cards sitting on the page regardless of light/dark/black mode, matching
   how a modern marketplace app's quick-action tiles usually work. */
#app .levro-home-quick-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:.6rem !important;
  margin:.7rem auto 1.1rem !important;
  width:100% !important;
}
#app .levro-home-quick-actions .levro-quick-action{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:.26rem !important;
  position:relative !important;
  min-height:0 !important;
  padding:.55rem .55rem 1.35rem !important;
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.05) !important;
  box-shadow:none !important;
  text-align:left !important;
  cursor:pointer !important;
  transition:transform .12s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}
#app .levro-home-quick-actions .levro-quick-action:active{ transform:scale(.97) !important; }
#app .levro-home-quick-actions .levro-quick-action:hover,
#app .levro-home-quick-actions .levro-quick-action:focus-visible{ filter:brightness(.97) !important; }
#app .levro-home-quick-actions .levro-quick-icon{
  width:1.7rem !important; height:1.7rem !important;
  border-radius:8px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:.76rem !important;
  background:rgba(255,255,255,.55) !important;
  color:#1f2937 !important;
  -webkit-text-fill-color:#1f2937 !important;
  border:0 !important; box-shadow:none !important;
  flex:0 0 auto !important;
}
#app .levro-home-quick-actions .levro-quick-body{ display:flex !important; flex-direction:column !important; gap:.05rem !important; width:100% !important; min-width:0 !important; }
#app .levro-home-quick-actions .levro-quick-title{ display:block !important; font-size:.68rem !important; font-weight:800 !important; line-height:1.15 !important; color:#111827 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#app .levro-home-quick-actions .levro-quick-desc{ display:block !important; font-size:.58rem !important; font-weight:500 !important; line-height:1.2 !important; color:rgba(17,24,39,.62) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#app .levro-home-quick-actions .levro-quick-arrow{
  position:absolute !important; bottom:.42rem !important; right:.45rem !important;
  width:1.05rem !important; height:1.05rem !important;
  border-radius:50% !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(255,255,255,.55) !important;
  color:#111827 !important;
  font-size:.46rem !important;
}
#app .levro-home-quick-actions .levro-quick-mint{ background:#c9ecd9 !important; }
#app .levro-home-quick-actions .levro-quick-peach{ background:#fbe1c6 !important; }
#app .levro-home-quick-actions .levro-quick-lavender{ background:#ddd7f8 !important; }
#app .levro-home-quick-actions .levro-quick-pink{ background:#f6d4da !important; }
#app .levro-home-quick-actions .levro-quick-aqua{ background:#c8ede7 !important; }
#app .levro-home-quick-actions .levro-quick-blue{ background:#d0e1f8 !important; }
@media (max-width:400px){
  #app .levro-home-quick-actions{ gap:.4rem !important; }
  #app .levro-home-quick-actions .levro-quick-action{ padding:.48rem .48rem 1.2rem !important; }
  #app .levro-home-quick-actions .levro-quick-title{ font-size:.64rem !important; }
  #app .levro-home-quick-actions .levro-quick-desc{ font-size:.54rem !important; }
}
/* Final specificity override for the public vendor storefront avatar --
   the white/card-colored ring border used to sit on top of the hero banner
   like a frame around the photo; flush it out to match the rest of the
   edge-flush card treatment, keeping only a soft shadow for separation. */
.storefront-profile .storefront-avatar,
.storefront-profile .storefront-avatar-button,
.storefront-profile .storefront-avatar-fallback-button{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:0 2px 10px rgba(0,0,0,.22)!important;
  padding:0!important;
}
.storefront-profile .storefront-avatar-fallback-button .avatar-fallback{
  width:100%!important;height:100%!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Tried a "fill the whole top" full-bleed treatment on the home
   promotional carousel; asked back the way it was, so this space
   deliberately leaves the base .home-promotional-carousel rules alone. */

/* Orders page: quick single-tap status pills, scrolling horizontally so they
   never wrap into an unreadable jumble on narrow screens. */
#app .order-status-pills-rail{
  display:flex !important; gap:.4rem !important; overflow-x:auto !important;
  scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important;
  padding:.15rem .05rem .55rem !important; margin:0 !important;
}
#app .order-status-pills-rail::-webkit-scrollbar{ display:none !important; }
#app .order-status-pill{
  flex:0 0 auto !important; padding:.42rem .9rem !important; border-radius:999px !important;
  border:1px solid var(--border) !important; background:var(--card) !important; color:var(--text) !important;
  font-size:.76rem !important; font-weight:700 !important; white-space:nowrap !important; cursor:pointer !important;
}
#app .order-status-pill.active{
  background:var(--text) !important; color:var(--card) !important; border-color:var(--text) !important;
}

/* Filter pills (My Orders status row, Vendors type row): a light green
   outlined look instead of grey / solid dark. Active = stronger green
   outline and tint with green text; never a dark fill. */
#app .order-status-pill,
#app .vendor-listing-tab{
  background:color-mix(in srgb,var(--primary) 6%,var(--card)) !important;
  background-image:none !important;
  border:1.5px solid color-mix(in srgb,var(--primary) 38%,var(--border)) !important;
  color:var(--primary) !important; -webkit-text-fill-color:var(--primary) !important;
}
#app .order-status-pill.active,
#app .vendor-listing-tab.active{
  background:color-mix(in srgb,var(--primary) 16%,var(--card)) !important;
  background-color:color-mix(in srgb,var(--primary) 16%,var(--card)) !important;
  border-color:var(--primary) !important;
  color:var(--primary) !important; -webkit-text-fill-color:var(--primary) !important;
}

/* Order cards: a real product/service image on the left, order number +
   date on top, location line added -- on top of the existing name, price
   and status badge, all of it still riding the same authoritative grid. */
#app .order-list-card{ grid-template-columns:max-content minmax(0,1fr) max-content !important; }
#app .order-list-card .order-list-main{ grid-column:2 !important; }
#app .order-list-card .order-list-status{ grid-column:3 !important; }
#app .order-card-media{
  grid-column:1 !important; align-self:center !important;
  width:3.6rem !important; height:3.6rem !important; min-width:3.6rem !important;
  border-radius:12px !important; overflow:hidden !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:color-mix(in srgb,var(--text) 6%,var(--card)) !important; color:var(--text-muted) !important;
  font-size:1.1rem !important;
}
#app .order-card-media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
#app .order-card-top-row{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:.4rem !important; width:100% !important; margin-bottom:.1rem !important;
}
#app .order-card-number{ font-size:.68rem !important; font-weight:700 !important; color:var(--text-muted) !important; }
#app .order-card-date{ font-size:.68rem !important; color:var(--text-muted) !important; white-space:nowrap !important; flex:0 0 auto !important; }
#app .order-card-location{
  display:block !important; font-size:.72rem !important; color:var(--text-muted) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  max-width:100% !important; min-width:0 !important;
}
@media (max-width:430px){
  #app .order-card-media{ width:2.9rem !important; height:2.9rem !important; min-width:2.9rem !important; font-size:.95rem !important; }
}

/* Trending Now: let the product photo be the visual hero instead of a
   picture trapped inside its own bordered box -- the image now runs flush
   to the card's edges (rounded only on top, to match the card's own
   corners) and only the text below it keeps the card's inner padding. */
#app .hscroll.trending-scroll > .product-card-wrap > .card{
  padding:0 !important;
  overflow:hidden !important;
}
#app .hscroll.trending-scroll .product-img{
  height:7.6rem !important; min-height:7.6rem !important; max-height:7.6rem !important;
  flex:0 0 7.6rem !important; border-radius:0 !important; margin:0 !important;
}
#app .hscroll.trending-scroll .product-card-wrap h4{ margin:.5rem .65rem .15rem !important; }
#app .hscroll.trending-scroll .product-card-compact-footer{ padding:.35rem .65rem .6rem !important; margin-top:auto !important; }
#app .hscroll.trending-scroll .product-card-total-line{ padding:0 .65rem .55rem !important; margin-top:0 !important; }

/* Same treatment for every other product/service grid card -- Browse
   Everything and the vendor storefront's product grid both render through
   this same #app .grid:has(> .product-card-wrap) shape, so one fix covers
   both (and services, which use the same card with a badge instead of a
   cart button). Packages use a different, more content-dense card and
   are handled separately. */
#app .grid:has(> .product-card-wrap) > .product-card-wrap > .card{
  padding:0 0 .65rem !important;
  overflow:hidden !important;
}
#app .grid:has(> .product-card-wrap) .product-img{
  border-radius:0 !important;
  margin:0 !important;
}
#app .grid:has(> .product-card-wrap) .product-card-wrap h4{ margin:.5rem .55rem .15rem !important; }
/* The card is already a flex column at full height (an earlier rule) --
   pinning the price/cart row to the bottom with margin-top:auto (instead
   of reserving fixed padding for a total-with-delivery line that isn't
   always there) means the gap lands between the title and the price
   instead of as dead space under a hidden placeholder, and the price row
   itself sits flush with the card's bottom on every card, uniformly. */
#app .grid:has(> .product-card-wrap) .product-card-compact-footer{ padding:0 .55rem !important; margin-top:auto !important; }
#app .grid:has(> .product-card-wrap) .product-card-total-line{ padding:.3rem .55rem 0 !important; margin-top:0 !important; }

/* Same edge-to-edge treatment for vendor cards: the vendor's photo (or
   initials fallback, same styling either way) fills the top of the card
   as a flush square instead of a small centered circle, with name/
   location/category/follow/stats below. Grid mode only -- list mode
   keeps its existing centered-circle layout as asked. Covers both the
   Vendors directory grid and the homepage Featured Vendors rail, since
   both render through the same vendorCardHtml markup. */
.vendors-directory-grid:not(.vendors-list-mode) .vendor-card{
  padding:0 0 .6rem !important;
  overflow:hidden !important;
}
.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-card-avatar-wrap{
  width:100% !important; height:auto !important; aspect-ratio:1 / 1 !important;
  min-width:0 !important; min-height:0 !important; margin:0 !important; flex:0 0 auto !important;
  display:block !important;
}
.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-directory-logo{
  width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  border-radius:0 !important; margin:0 !important; font-size:1.9rem !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.vendors-directory-grid:not(.vendors-list-mode) .vendor-card-verified-badge{
  right:.4rem !important; bottom:auto !important; top:.4rem !important;
}
.vendors-directory-grid:not(.vendors-list-mode) .vendor-directory-copy{
  padding:.55rem .55rem 0 !important;
}
#app .top-rated-vendors-scroll > .vendor-card,
#app .top-rated-vendors-scroll > .homepage-vendor-card{
  padding:0 0 .5rem !important;
  overflow:hidden !important;
}
#app .top-rated-vendors-scroll .vendor-card-avatar-wrap{
  width:100% !important; height:auto !important; aspect-ratio:1 / 1 !important;
  min-width:0 !important; margin:0 !important; flex:0 0 auto !important; display:block !important;
}
#app .top-rated-vendors-scroll .vendor-card .vendor-directory-logo,
#app .top-rated-vendors-scroll .homepage-vendor-card .vendor-directory-logo,
#app .top-rated-vendors-scroll .homepage-vendor-card .vendor-home-avatar,
#app .top-rated-vendors-scroll .vendor-directory-logo,
#app .top-rated-vendors-scroll .vendor-home-avatar{
  width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  border-radius:0 !important; margin:0 !important; font-size:1.3rem !important;
}
#app .top-rated-vendors-scroll .vendor-card-verified-badge{
  right:.3rem !important; bottom:auto !important; top:.3rem !important;
}
#app .top-rated-vendors-scroll .vendor-directory-copy,
#app .top-rated-vendors-scroll .vendor-home-copy{
  padding:.4rem .4rem 0 !important;
}

/* iPhone/Safari fix for the flush vendor cards. #vendorsGrid's own padding
   rules (ID specificity) were beating the edge-to-edge ones above, leaving
   the photo inset; and a percent-height child inside an aspect-ratio box
   resolves unreliably in WebKit, which stretched initials-only cards to the
   full row height. A padding-bottom:100% square with an absolutely filled
   child is definite everywhere. */
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card{
  padding:0 0 .6rem !important; overflow:hidden !important; min-height:0 !important;
}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-card-avatar-wrap,
#app .top-rated-vendors-scroll .vendor-card .vendor-card-avatar-wrap{
  position:relative !important; display:block !important; width:100% !important;
  height:0 !important; min-height:0 !important; padding:0 0 100% !important;
  aspect-ratio:auto !important; margin:0 !important; flex:0 0 auto !important; overflow:hidden !important;
}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-directory-logo,
#app .top-rated-vendors-scroll .vendor-card .vendor-card-avatar-wrap > .vendor-directory-logo,
#app .top-rated-vendors-scroll .vendor-card .vendor-card-avatar-wrap > .vendor-home-avatar{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  max-width:none !important; max-height:none !important; margin:0 !important;
  border-radius:0 !important; object-fit:cover !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-directory-logo{ font-size:1.9rem !important; }
#app .top-rated-vendors-scroll .vendor-card .vendor-card-avatar-wrap > .vendor-directory-logo{ font-size:1.3rem !important; }

/* Storefront catalogue tabs: a clean green underline on the active tab
   instead of a filled pill, matching a modern marketplace nav bar rather
   than a row of buttons. */
#app .storefront-catalog-tab{
  border-radius:0 !important; background:transparent !important; border:0 !important;
  border-bottom:2px solid transparent !important; padding:.6rem .85rem .5rem !important;
}
#app .storefront-catalog-tab:hover{ background:transparent !important; color:var(--text) !important; }
#app .storefront-catalog-tab.active{
  color:var(--text) !important; background:transparent !important;
  border:0 !important; border-bottom:2px solid var(--primary) !important;
  border-radius:0 !important;
}
#app .storefront-catalog-tabs{ border-bottom:1px solid var(--border) !important; }

/* Storefront category chips: the vendor's own real categories, replacing
   the grid/list view toggle as the way to narrow down their catalogue. */
#app .storefront-category-chips{
  display:flex !important; gap:.4rem !important; overflow-x:auto !important;
  scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important;
  padding:.1rem .05rem .8rem !important; margin:-.35rem 0 0 !important;
}
#app .storefront-category-chips::-webkit-scrollbar{ display:none !important; }
#app .storefront-category-chip{
  flex:0 0 auto !important; padding:.42rem .9rem !important; border-radius:999px !important;
  border:1px solid var(--border) !important; background:var(--card) !important; color:var(--text) !important;
  font-size:.78rem !important; font-weight:700 !important; white-space:nowrap !important; cursor:pointer !important;
}
#app .storefront-category-chip.active{
  background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important;
}

/* Filter pills & tab rows: light-green outline / fill carries the state;
   the text and icons stay neutral (black in light mode, white in dark). */
#app .order-status-pill,
#app .vendor-listing-tab,
#app .order-status-pill.active,
#app .vendor-listing-tab.active{
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important;
}
#app .catalog-type-tab,
#app .vendor-products-unified-tabs button,
#app .storefront-catalog-tab{
  color:var(--text-muted) !important; -webkit-text-fill-color:var(--text-muted) !important;
}
#app .catalog-type-tab.active,
#app .vendor-products-unified-tabs button.active,
#app .storefront-catalog-tab.active{
  background:color-mix(in srgb,var(--primary) 16%,var(--card)) !important;
  background-color:color-mix(in srgb,var(--primary) 16%,var(--card)) !important;
  background-image:none !important;
  border:1.5px solid color-mix(in srgb,var(--primary) 55%,var(--border)) !important;
  border-radius:999px !important;
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important;
  box-shadow:none !important;
}
#app .vendor-products-unified-tabs button.active{ border-radius:12px !important; }
#app .storefront-catalog-tab.active .tab-count{
  background:color-mix(in srgb,var(--primary) 22%,transparent) !important;
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important;
}
#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-mix(in srgb,var(--primary) 20%,var(--card)) !important;
  background-color:color-mix(in srgb,var(--primary) 20%,var(--card)) !important;
  background-image:none !important;
  border:1.5px solid color-mix(in srgb,var(--primary) 55%,var(--border)) !important;
  color:var(--text-muted) !important; -webkit-text-fill-color:var(--text-muted) !important;
}
#app .vendors-directory-view-buttons .btn.active i,
#app #vendorsViewGridBtn.active i,
#app #vendorsViewListBtn.active i,
#app #vendorsViewMapBtn.active i{ color:var(--text-muted) !important; }


/* Default avatars (initials): a soft tinted fill with a darker tint of the
   same hue for the letters and a thin ring, instead of a solid block. */
.avatar-fallback{
  background-color:hsl(var(--av-h,160) 55% 91%) !important;
  background-image:none !important;
  color:hsl(var(--av-h,160) 55% 26%) !important;
  -webkit-text-fill-color:hsl(var(--av-h,160) 55% 26%) !important;
  box-shadow:inset 0 0 0 1.5px hsl(var(--av-h,160) 45% 74%) !important;
}
html[data-theme="dark"] .avatar-fallback,
html[data-theme="black"] .avatar-fallback{
  background-color:hsl(var(--av-h,160) 35% 20%) !important;
  color:hsl(var(--av-h,160) 70% 84%) !important;
  -webkit-text-fill-color:hsl(var(--av-h,160) 70% 84%) !important;
  box-shadow:inset 0 0 0 1.5px hsl(var(--av-h,160) 35% 36%) !important;
}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-directory-logo.avatar-fallback{box-shadow:none !important;}

/* "Following" state: soft light-green tint + ring (neutral text) instead of gray. */
#app .vendor-card-follow-btn.following,
#app .follow-btn:not(.btn-outline){
  background-color:color-mix(in srgb,var(--primary) 16%,var(--card)) !important;
  background-image:none !important;
  border:1.5px solid color-mix(in srgb,var(--primary) 50%,var(--border)) !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  box-shadow:none !important;
}

.chat-header-name-wrap{display:flex;flex-direction:column;justify-content:center;min-width:0}
.chat-header-presence{display:block;font-size:.72rem;line-height:1.2;color:var(--text-muted);min-height:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header-presence.online{color:#16a34a;font-weight:700}
.chat-header-presence.online::before{content:"";display:inline-block;width:.46rem;height:.46rem;border-radius:50%;background:#22c55e;margin-right:.3rem;vertical-align:.04rem}

/* ===== Underline tabs =====
   Tab rows (vendors type, home Products/Services/Packages, vendor dashboard,
   My Orders status, notifications) use a plain text label with a coloured line
   under the active one and a thin divider under the whole row -- no pills. */
#app .vendor-listing-tabs,
#app .catalog-type-tabs,
#app .vendor-products-unified-tabs,
#app .order-status-pills-rail,
#app .notif-tabs,
#notifPanel .notif-tabs{
  display:flex !important; gap:.15rem !important; overflow-x:auto !important; scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--border) !important;
  border-radius:0 !important; box-shadow:none !important; padding:0 !important; margin:.7rem 0 .9rem !important;
}
#app .vendor-listing-tabs::-webkit-scrollbar,
#app .catalog-type-tabs::-webkit-scrollbar,
#app .vendor-products-unified-tabs::-webkit-scrollbar,
#app .order-status-pills-rail::-webkit-scrollbar,
#app .notif-tabs::-webkit-scrollbar{display:none !important;}
#app .vendor-listing-tab,
#app .catalog-type-tab,
#app .vendor-products-unified-tabs button,
#app .order-status-pill,
#app .notif-tab,
#notifPanel .notif-tab{
  --tab-color:var(--primary);
  flex:0 0 auto !important; min-height:0 !important; min-width:0 !important;
  background:transparent !important; background-image:none !important; box-shadow:none !important;
  border:0 !important; border-bottom:3px solid transparent !important; border-radius:0 !important;
  margin:0 0 -1px !important; padding:.65rem .85rem .55rem !important;
  color:var(--text-muted) !important; -webkit-text-fill-color:var(--text-muted) !important;
  font-size:.86rem !important; font-weight:700 !important; white-space:nowrap !important;
}
#app .vendor-listing-tab.active,
#app .catalog-type-tab.active,
#app .vendor-products-unified-tabs button.active,
#app .order-status-pill.active,
#app .notif-tab.active,
#notifPanel .notif-tab.active,
#app .vendor-listing-tab[aria-selected="true"],
#app .notif-tab[aria-selected="true"]{
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
  border:0 !important; border-bottom:3px solid var(--tab-color) !important; border-radius:0 !important;
  color:var(--text) !important; -webkit-text-fill-color:var(--text) !important; font-weight:800 !important;
}
#app .catalog-type-tab{ flex:1 1 0 !important; text-align:center !important; }
#app .order-status-pill[data-status="pending"]{ --tab-color:#f59e0b; }
#app .order-status-pill[data-status="confirmed"]{ --tab-color:#2563eb; }
#app .order-status-pill[data-status="payment_unresolved"]{ --tab-color:#9333ea; }
#app .order-status-pill[data-status="handed_over"]{ --tab-color:#0891b2; }
#app .order-status-pill[data-status="returned"]{ --tab-color:#64748b; }
#app .order-status-pill[data-status="completed"]{ --tab-color:#16a34a; }
#app .order-status-pill[data-status="cancelled"]{ --tab-color:#991b1b; }
#app .order-status-pill[data-status="disputed"]{ --tab-color:#eab308; }

.orders-title-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.2rem}
.orders-title-row h2{margin:0}
.orders-top-actions{display:flex;gap:.45rem;align-items:center}
.orders-top-btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:.42rem .8rem;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.orders-top-btn i{color:var(--text-muted)}
.orders-top-btn b{background:color-mix(in srgb,var(--primary) 18%,var(--card));border-radius:999px;font-size:.7rem;padding:.05rem .4rem}
.orders-empty{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:2.2rem 1rem !important;text-align:center}
.orders-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:4.2rem;height:4.2rem;border-radius:50%;background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--text-muted);font-size:1.7rem}
.order-history-modal{max-height:82vh;display:flex;flex-direction:column}
.order-history-modal-body{overflow-y:auto;padding:.2rem 0 .6rem}

/* Levi header: the extra tools fold into one chevron. */
.levi-header-actions{align-items:center}
.levi-header-actions{position:static}
#aiChatPanel .drawer-header{position:relative}
.levi-tools{display:none;align-items:center;gap:.25rem;position:absolute;top:calc(100% - .2rem);right:.6rem;z-index:5;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.25rem .35rem;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.levi-tools.open{display:flex}
.levi-tools-toggle i{transition:transform .18s ease}
.levi-tools-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
#leviAskBubble{position:fixed;z-index:99990;max-width:15rem;background:var(--card);color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:16px 16px 4px 16px;padding:.6rem .8rem;font-size:.86rem;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.18);cursor:pointer;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s ease,transform .25s ease}
#leviAskBubble.show{opacity:1;transform:none}
#leviAskBubble small{display:block;font-weight:500;color:var(--text-muted);margin-top:.1rem}

/* ===== Compact toolbar buttons (filters / search / more) ===== */
.orders-title-row{position:relative;flex-wrap:nowrap}
.orders-title-row h2{font-size:1.35rem}
.orders-top-actions{display:flex;align-items:center;gap:.4rem;margin-left:auto}
#app .orders-title-row .orders-filter-search-row{display:flex !important;align-items:center !important;gap:.4rem !important;margin:0 !important;width:auto !important;flex:0 0 auto !important}
.orders-icon-btn,
#app .order-filters-trigger,
#app .vendors-filters-toggle,
#app .browse-filter-trigger{
  width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;max-width:42px !important;
  padding:0 !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
  background:var(--card) !important;background-image:none !important;border:1px solid var(--border) !important;box-shadow:none !important;
  color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;
  font-size:0 !important;line-height:1 !important;gap:0 !important;position:relative;cursor:pointer;
}
.orders-icon-btn i,
#app .order-filters-trigger i,
#app .vendors-filters-toggle i,
#app .browse-filter-trigger i{font-size:1rem !important;color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;margin:0 !important}
#app .order-filters-trigger small,
#app .order-filters-trigger .order-filters-chevron,
#app .vendors-filters-toggle .vendors-filters-chevron,
#app .browse-filter-trigger .browse-filter-chevron{display:none !important}
#app .order-filters-trigger>span{font-size:0 !important;color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important}
#app .order-filters-trigger.active,
#app .vendors-filters-toggle.active,
#app .browse-filter-trigger.active{
  background:color-mix(in srgb,var(--primary) 14%,var(--card)) !important;
  border-color:color-mix(in srgb,var(--primary) 50%,var(--border)) !important;
}
#app .order-filters-trigger.has-filters::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--primary);border:2px solid var(--card)}
#app .order-filters-wrap{flex:0 0 auto !important;width:auto !important;position:relative !important}
#app .orders-filter-search-row .order-filters-wrap,
#app .orders-filter-search-row>.order-filters-wrap{flex:0 0 auto !important;width:auto !important;min-width:0 !important}
#app .order-filters-panel{left:auto !important;right:0 !important;width:min(330px,calc(100vw - 1.4rem)) !important}
#app .orders-title-row .order-filters-wrap,#app .orders-title-row .orders-filter-search-row{position:static !important}
#app .orders-title-row .order-filters-panel{top:calc(100% + .35rem) !important}
#app .orders-title-row .order-search-wrap{flex:0 0 42px !important;width:42px !important;min-height:42px !important}
#app .orders-title-row .order-search-wrap .order-search-toggle{width:42px !important;height:42px !important;border-radius:50% !important;border:1px solid var(--border) !important;background:var(--card) !important}
/* While the search box is open it takes over the whole row. */
#app .orders-title-row:has(.final-order-open) h2,
#app .orders-title-row:has(.final-order-open) .orders-more-wrap,
#app .orders-title-row:has(.final-order-open) .order-filters-wrap{display:none !important}
#app .orders-title-row:has(.final-order-open) .orders-top-actions,
#app .orders-title-row:has(.final-order-open) .orders-filter-search-row{flex:1 1 100% !important;width:100% !important}
#app .orders-title-row .order-search-wrap.final-order-open{flex:1 1 auto !important;width:100% !important}
.orders-more-wrap{position:relative}
.orders-more-menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:520;min-width:13rem;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.3rem;box-shadow:0 14px 34px rgba(15,23,42,.16)}
.orders-more-menu.hidden{display:none}
.orders-more-menu button{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:.88rem;font-weight:600;padding:.65rem .7rem;border-radius:10px;cursor:pointer;text-align:left}
.orders-more-menu button i{color:var(--text-muted);width:1.1rem;text-align:center}
.orders-more-menu button b{margin-left:auto;font-size:.72rem;background:color-mix(in srgb,var(--primary) 16%,var(--card));border-radius:999px;padding:.05rem .45rem}
/* Vendors + Browse: the toolbars become a right-aligned row of small buttons. */
#app .vendors-directory-controls{display:flex !important;justify-content:flex-end !important;align-items:center !important;gap:.4rem !important;margin:.1rem 0 .4rem !important}
#app .browse-filter-toolbar{grid-template-columns:42px minmax(0,1fr) !important}

#app .levro-final-search-toggle,
#app .levro-compact-search-toggle{width:42px !important;height:42px !important;min-width:42px !important;border-radius:50% !important;border:1px solid var(--border) !important;background:var(--card) !important;box-shadow:none !important;color:var(--text-muted) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0 !important}
#app .levro-final-search-toggle i,#app .levro-compact-search-toggle i{color:var(--text-muted) !important}

/* Status tabs: red count badges for the ones that need action; a fixed-height rail that never clips or drifts. */
.order-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .32rem;margin-left:.4rem;border-radius:999px;background:#ef4444;color:#fff !important;-webkit-text-fill-color:#fff !important;font-size:.68rem;font-weight:800;line-height:1;vertical-align:.08rem}
#app .order-status-pills-rail{overflow-y:hidden !important;overscroll-behavior-x:contain;min-height:46px;align-items:flex-end !important;animation:none !important;transition:none !important}
#app .order-status-pill{animation:none !important;transition:none !important}

/* Edit-message buttons sit on the green "mine" bubble: make both readable. */
.chat-bubble.mine .chat-edit-actions .btn{border:1.5px solid rgba(255,255,255,.85) !important;background:transparent !important;background-image:none !important;color:#fff !important;-webkit-text-fill-color:#fff !important;box-shadow:none !important;font-weight:700 !important;opacity:1 !important;visibility:visible !important}
.chat-bubble.mine .chat-edit-actions .btn:last-child{background:#fff !important;color:#3fb97f !important;-webkit-text-fill-color:#3fb97f !important;border-color:#fff !important}
.chat-bubble .chat-edit-actions .btn{min-width:4.2rem}

.order-notes-list{display:flex;flex-direction:column;gap:.45rem;margin:.2rem 0 .7rem}
.order-note{border:1px solid var(--border);border-radius:12px;padding:.5rem .7rem;background:var(--card)}
.order-note.mine{background:color-mix(in srgb,var(--primary) 9%,var(--card));border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}
.order-note p{margin:.15rem 0 0;font-size:.9rem;word-break:break-word}
.order-note-who{font-size:.7rem;color:var(--text-muted);font-weight:700}
.order-note-modal textarea{width:100%;margin-top:.5rem}
.order-note-thread{max-height:34vh;overflow-y:auto}

/* Payment unresolved = purple, cancelled = red, disputed = amber. */
#app .badge.unresolved,.badge.unresolved{background:#ede9fe !important;color:#6d28d9 !important;-webkit-text-fill-color:#6d28d9 !important;border-color:#c4b5fd !important}
html[data-theme="dark"] .badge.unresolved,html[data-theme="black"] .badge.unresolved{background:#3b2a6b !important;color:#ddd6fe !important;-webkit-text-fill-color:#ddd6fe !important}

/* Danger buttons stay red (the global green button rule was winning). */
#app .btn.btn-danger,#app .btn.btn-sm.btn-danger,#app .payment-confirmation-actions .btn.btn-danger{background:#dc2626 !important;background-color:#dc2626 !important;background-image:none !important;border-color:#dc2626 !important;color:#fff !important;-webkit-text-fill-color:#fff !important}

/* Attention motion: an icon that has a badge keeps moving so it is hard to miss.
   A JS helper adds .attn (no :has() needed, so it works on older Android
   browsers too). These deliberately do not switch off under "reduce motion"
   (Android battery saver turns that on by itself); the movement is small. */
@keyframes levroWiggle{0%,55%,100%{transform:rotate(0) scale(1)}8%{transform:rotate(-16deg) scale(1.15)}16%{transform:rotate(14deg) scale(1.15)}24%{transform:rotate(-10deg) scale(1.1)}32%{transform:rotate(8deg)}40%{transform:rotate(-4deg)}}
@keyframes levroRing{0%,55%,100%{transform:rotate(0)}8%{transform:rotate(20deg)}16%{transform:rotate(-18deg)}24%{transform:rotate(14deg)}32%{transform:rotate(-10deg)}40%{transform:rotate(5deg)}}
@keyframes levroBulge{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes levroBounce{0%,60%,100%{transform:translateY(0)}15%{transform:translateY(-5px)}30%{transform:translateY(0)}42%{transform:translateY(-3px)}}
.icon-btn.attn > i,#bottomNav .bottom-nav-item.attn .bn-icon > i,#cartFab.attn > i{display:inline-block !important}
#messagesWrap .icon-btn.attn > i{animation:levroWiggle 2.4s ease-in-out infinite !important;transform-origin:50% 60%}
#notifWrap .icon-btn.attn > i,#bottomNav .bottom-nav-item.attn[onclick*="otification"] .bn-icon > i{animation:levroRing 2.6s ease-in-out infinite !important;transform-origin:50% 12%}
#headerCartWrap .icon-btn.attn > i,#cartFab.attn > i{animation:levroBounce 2.2s ease-in-out infinite !important}
#bottomNav .bottom-nav-item.attn[onclick*="rders"] .bn-icon > i{animation:levroBulge 1.6s ease-in-out infinite !important}

/* Storefront catalogue tabs: underline, not a rounded highlight. */
#app .storefront-catalog-tabs{display:flex !important;gap:.15rem !important;border-bottom:1px solid var(--border) !important;background:transparent !important;border-radius:0 !important;padding:0 !important;margin:.8rem 0 .9rem !important}
#app .storefront-catalog-tab,
#app .storefront-catalog-tab:hover{background:transparent !important;background-image:none !important;border:0 !important;border-bottom:3px solid transparent !important;border-radius:0 !important;box-shadow:none !important;margin:0 0 -1px !important;padding:.65rem .85rem .55rem !important;color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;font-weight:700 !important}
#app .storefront-catalog-tab.active{background:transparent !important;background-color:transparent !important;border:0 !important;border-bottom:3px solid var(--primary) !important;border-radius:0 !important;color:var(--text) !important;-webkit-text-fill-color:var(--text) !important;font-weight:800 !important}
/* Customer profile has no cover banner. */
.buyer-profile-card .vendor-profile-header-body{padding-top:1rem !important}
.buyer-profile-card .vendor-profile-header-avatar-row{margin-top:0 !important}
/* Browse everything: filter on the left, search on the right. */
#app .browse-filter-toolbar{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:.55rem !important;flex-wrap:wrap}
#app .browse-filter-toolbar > .browse-filter-trigger{order:1}
#app .browse-filter-toolbar > .levro-final-search-toggle{order:2;margin-left:auto}
#app .browse-filter-toolbar > #searchInput,#app .browse-filter-toolbar > .levro-compact-search-wrap{order:3}
#app .browse-filter-toolbar.final-search-open > #searchInput{flex:1 1 100% !important;order:5 !important;width:100% !important}
#app .browse-filter-toolbar.final-search-open > .levro-final-search-toggle{order:2 !important;margin-left:auto !important;position:static !important}
#app .browse-filter-toolbar{position:relative !important}
#app .browse-filter-toolbar > .levro-compact-history{order:9 !important;position:absolute !important;left:0 !important;right:0 !important;top:calc(100% + .3rem) !important;z-index:120 !important;max-height:46vh;overflow:auto;grid-column:auto !important;grid-row:auto !important}
#app .browse-filter-toolbar > .browse-filter-panel{order:8;flex:1 1 100%}

/* Promotional banners: manual, native scroll-snap row (no autoplay). The next
   banner peeks in from the right edge; the page itself never scrolls sideways. */
#app .home-promotional-carousel{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;overflow:visible !important;margin:0 0 .9rem !important}
#app .home-promotional-viewport{--slide-w:min(82vw,520px);aspect-ratio:auto !important;overflow-x:auto !important;overflow-y:hidden !important;display:block !important;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;cursor:auto;border-radius:0 !important}
#app .home-promotional-viewport::-webkit-scrollbar{display:none}
#app .home-promotional-viewport.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
#app .home-promotional-track{display:flex !important;gap:.6rem;width:max-content !important;height:auto !important;transform:none !important;transition:none !important;will-change:auto !important;padding-inline:calc((100% - var(--slide-w)) / 2)}
#app .home-promotional-slide{flex:0 0 var(--slide-w) !important;width:var(--slide-w) !important;height:auto !important;aspect-ratio:1.55/1;scroll-snap-align:center;scroll-snap-stop:always;border-radius:16px;overflow:hidden;border:1px solid var(--ui-border,var(--border)) !important;background:var(--card) !important}
#app .home-promotional-slide img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important}
@media(min-width:720px){#app .home-promotional-viewport{--slide-w:min(60vw,520px)}}
/* Apple-App-Store-style promotional banners: intentionally no pagination dots. */
#app .home-promotional-carousel .home-promotional-dots{display:none !important}

/* Quick-action cards: pressing one must not dim/darken it (a touch leaves
   :hover/:focus stuck on, which swapped the pastel for a dark mix). Keep the
   tone and show a light ring instead. */
#app .levro-home-quick-actions .levro-quick-mint:hover,#app .levro-home-quick-actions .levro-quick-mint:focus,#app .levro-home-quick-actions .levro-quick-mint:focus-visible,#app .levro-home-quick-actions .levro-quick-mint:active{background:#c9ecd9 !important}
#app .levro-home-quick-actions .levro-quick-peach:hover,#app .levro-home-quick-actions .levro-quick-peach:focus,#app .levro-home-quick-actions .levro-quick-peach:focus-visible,#app .levro-home-quick-actions .levro-quick-peach:active{background:#fbe1c6 !important}
#app .levro-home-quick-actions .levro-quick-lavender:hover,#app .levro-home-quick-actions .levro-quick-lavender:focus,#app .levro-home-quick-actions .levro-quick-lavender:focus-visible,#app .levro-home-quick-actions .levro-quick-lavender:active{background:#ddd7f8 !important}
#app .levro-home-quick-actions .levro-quick-pink:hover,#app .levro-home-quick-actions .levro-quick-pink:focus,#app .levro-home-quick-actions .levro-quick-pink:focus-visible,#app .levro-home-quick-actions .levro-quick-pink:active{background:#f6d4da !important}
#app .levro-home-quick-actions .levro-quick-aqua:hover,#app .levro-home-quick-actions .levro-quick-aqua:focus,#app .levro-home-quick-actions .levro-quick-aqua:focus-visible,#app .levro-home-quick-actions .levro-quick-aqua:active{background:#c8ede7 !important}
#app .levro-home-quick-actions .levro-quick-blue:hover,#app .levro-home-quick-actions .levro-quick-blue:focus,#app .levro-home-quick-actions .levro-quick-blue:focus-visible,#app .levro-home-quick-actions .levro-quick-blue:active{background:#d0e1f8 !important}
#app .levro-home-quick-actions .levro-quick-action:hover,#app .levro-home-quick-actions .levro-quick-action:focus,#app .levro-home-quick-actions .levro-quick-action:focus-visible,#app .levro-home-quick-actions .levro-quick-action:active{filter:none !important;border-color:transparent !important;outline:0 !important}
#app .levro-home-quick-actions .levro-quick-action:focus-visible,#app .levro-home-quick-actions .levro-quick-action:active{box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 55%,transparent) !important}
#app .levro-home-quick-actions .levro-quick-action:hover .levro-quick-icon,#app .levro-home-quick-actions .levro-quick-action:focus .levro-quick-icon,#app .levro-home-quick-actions .levro-quick-action:focus-visible .levro-quick-icon,#app .levro-home-quick-actions .levro-quick-action:active .levro-quick-icon{background:rgba(255,255,255,.55) !important;background-color:rgba(255,255,255,.55) !important;color:#1f2937 !important;-webkit-text-fill-color:#1f2937 !important;opacity:1 !important;filter:none !important;box-shadow:none !important;border:0 !important}
#app .levro-home-quick-actions .levro-quick-action:hover .levro-quick-icon i,#app .levro-home-quick-actions .levro-quick-action:active .levro-quick-icon i,#app .levro-home-quick-actions .levro-quick-action:focus .levro-quick-icon i{color:#1f2937 !important;opacity:1 !important;filter:none !important}


/* Vendor cards without a photo: draw a real outline around the initials block
   so its top/left/right edges don't dissolve into the card. */
#app .top-rated-vendors-scroll .vendor-card .vendor-card-avatar-wrap > .avatar-fallback,
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-card-avatar-wrap > .avatar-fallback,
#app .top-rated-vendors-scroll .vendor-card .vendor-card-avatar-wrap > .vendor-directory-logo:not(img){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 30%,transparent) !important}

/* About Levromart: the real app icon, not a dot. */
.about-brand-mark{background:none !important;box-shadow:0 10px 26px rgba(0,0,0,.22) !important}
.about-brand-mark img{width:100% !important;height:100% !important;object-fit:cover !important;filter:none !important}
.about-row-logo{width:1.45rem;height:1.45rem;border-radius:7px;object-fit:cover;flex:0 0 auto}

/* Settings: switches and icons stay neutral (black in light, white in dark);
   green is not used for an "on" state or for icons here. */
.settings-inline-btn.active,#settingsAiConsentPageRow .settings-inline-btn.active{color:var(--text) !important;border-color:color-mix(in srgb,var(--text) 55%,transparent) !important;background:color-mix(in srgb,var(--text) 10%,transparent) !important;font-weight:700}
.settings-toggle-row .btn-outline,#settingsAiConsentRow .btn,#settingsAiConsentRow .btn-outline{color:var(--text) !important;border-color:color-mix(in srgb,var(--text) 55%,transparent) !important;background:color-mix(in srgb,var(--text) 10%,transparent) !important}
#settings-page .settings-row-icon,#settings-page .settings-action-row:not(.settings-logout-row) > i:first-child,#settings-page .settings-page-section > h3 > i,#settings-page .settings-choice > i:first-child,
#settingsPanel .settings-more-menu button > i,#settingsPanel .settings-subrow > i:first-child,#settingsPanel .accordion-trigger i:first-child,#settingsPanel .settings-more-row i,#settingsPanel .theme-option i,
.about-legal-links button > i:first-child{color:var(--text) !important}
.settings-levi-hint{margin:.15rem 0 .3rem !important;font-size:.78rem !important;color:var(--text-muted) !important}

/* Vendor commission card: the amount and the time left are the headline. */
.commission-card{border:1.5px solid color-mix(in srgb,#f59e0b 55%,var(--border));background:color-mix(in srgb,#f59e0b 10%,var(--card));border-radius:18px;padding:1rem 1.1rem 1.05rem}
.commission-card.commission-ok{border-color:var(--border);background:var(--card)}
.commission-card.commission-overdue{border-color:#dc2626;background:color-mix(in srgb,#dc2626 9%,var(--card))}
.commission-card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.commission-card-label{font-size:.82rem;font-weight:700;color:var(--text-muted);display:inline-flex;align-items:center;gap:.4rem}
.commission-card-amount{font-size:2.35rem;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:.35rem 0 .2rem}
.commission-card-clock{display:flex;align-items:center;gap:.45rem;font-size:1rem;color:var(--text)}
.commission-card-clock strong{font-size:1.1rem}
.commission-soon .commission-card-clock strong{color:#b45309}
.commission-overdue .commission-card-clock strong{color:#dc2626}
.commission-card-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--text) 12%,transparent);margin:.6rem 0 .7rem;overflow:hidden}
.commission-card-bar span{display:block;height:100%;border-radius:99px;background:var(--text);opacity:.75}
.commission-soon .commission-card-bar span{background:#f59e0b;opacity:1}
.commission-overdue .commission-card-bar span{background:#dc2626;opacity:1}
.commission-card-copy{margin:0 0 .75rem;font-size:.85rem;color:var(--text-muted)}

/* Login / sign-up: the real Levromart app icon, clean and un-glowed. */
#loginModal .login-modal-logo{width:4.2rem !important;height:4.2rem !important;border-radius:20px !important;object-fit:cover !important;background:none !important;padding:0 !important;filter:none !important;-webkit-filter:none !important;box-shadow:0 10px 26px rgba(0,0,0,.2) !important;margin:0 auto .9rem !important}

/* Chat: loading placeholders instead of a blank page. */
.chat-fast-empty{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem 1rem}
.chat-loading-line{display:block;height:2.2rem;width:62%;border-radius:14px;background:color-mix(in srgb,var(--text) 8%,transparent);animation:chatPulse 1.2s ease-in-out infinite}
.chat-loading-line.short{width:38%;margin-left:auto}
@keyframes chatPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.chat-loading-line{animation:none}}
.chat-ended-state{max-width:420px;margin:2rem auto}

/* Vendors page: cards are no taller than product cards -- a wide photo band
   (about 16:9) instead of a full square, with tighter text below. */
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-card-avatar-wrap{padding:0 0 56% !important}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card .vendor-directory-logo{font-size:1.6rem !important}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-card{padding-bottom:.5rem !important}
#vendorsGrid.vendors-directory-grid:not(.vendors-list-mode) .vendor-directory-copy{padding-top:.4rem !important}

/* Call screen: the other person's photo (shop logo for a vendor) when there is one. */
#levroCallOverlay .lc-avatar{overflow:hidden}
#levroCallOverlay .lc-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* While a category is loading the old content stays but is softly dimmed (no flash of stale data). */
#app.home-switching > :not(.levro-home-cat-rail){pointer-events:none}

/* Customer profile: a settings gear in the top-right corner. */
.buyer-profile-card{position:relative}
.buyer-profile-row-actions{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;flex:0 0 auto}
.buyer-profile-settings-btn{flex:0 0 auto;width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.buyer-profile-settings-btn:active{background:color-mix(in srgb,var(--text) 10%,transparent)}

/* Settings: just the arrow, no grey circle. */
#app .settings-page-header .settings-back-btn{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--text) !important;width:2.4rem !important;min-width:2.4rem !important;height:2.4rem !important;padding:0 !important;border-radius:0 !important;font-size:1.25rem !important}
#app .settings-page-header .settings-back-btn:active{opacity:.6;transform:none !important}

.settings-help{margin-top:.7rem;font-size:.85rem;color:var(--text-muted)}
.settings-help summary{cursor:pointer;font-weight:700;color:var(--text)}
.settings-help ol{padding-left:1.1rem;margin:.5rem 0 0}
.settings-help li{margin:.3rem 0}
#pushCheckStatus.push-ok{color:var(--text);font-weight:600}

/* ================= Customer order details (redesigned) ================= */
.od-page{max-width:560px;margin:0 auto;padding:0 0 calc(7.5rem + env(safe-area-inset-bottom));--od-green:var(--primary,#3fb97f);--od-deep:#0b3b2b;--od-border:color-mix(in srgb,var(--text) 9%,transparent);--od-muted:var(--text-muted,#64748b)}
.od-page *{box-sizing:border-box}
.od-header{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;margin:-.4rem -1rem .9rem;background:var(--od-deep);color:#fff;border-radius:0 0 22px 22px}
.od-back,.od-more{flex:0 0 auto;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.od-more{background:rgba(255,255,255,.12)}
.od-header-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.od-header-title strong{font-size:1.2rem}
.od-header-title span{font-size:.82rem;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-menu-wrap{position:relative}
.od-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:30;min-width:12.5rem;background:var(--card);color:var(--text);border:1px solid var(--od-border);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:.3rem}
.od-menu.hidden{display:none}
.od-menu button{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:none;color:inherit;font:inherit;font-size:.9rem;padding:.65rem .7rem;border-radius:10px;cursor:pointer;text-align:left}
.od-menu button:active{background:color-mix(in srgb,var(--text) 8%,transparent)}
.od-card{background:var(--card);border:1px solid var(--od-border);border-radius:18px;padding:1rem;margin:0 0 .8rem;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.od-card h3{margin:0 0 .6rem;font-size:1.02rem;display:flex;align-items:center;gap:.45rem}
.od-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;border-bottom:1px solid var(--od-border);padding-bottom:.55rem}
.od-card-head h3{margin:0}
.od-link{color:var(--od-green);font-weight:600;font-size:.86rem;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
.od-link .fa-chevron-right{font-size:.7rem}
.od-muted{color:var(--od-muted);font-size:.85rem}
.od-price{color:var(--od-green)}
/* status card */
.od-status{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .85rem;align-items:center;padding:1rem}
.od-status-icon{width:3.4rem;height:3.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;background:var(--od-tone)}
.od-status-copy{display:flex;flex-direction:column;min-width:0}
.od-kicker{font-size:.82rem;color:var(--od-muted)}
.od-status-name{font-size:1.65rem;line-height:1.15;color:var(--od-tone-text)}
.od-placed{font-size:.88rem;color:var(--text)}
.od-pill{align-self:start;font-size:.78rem;font-weight:700;padding:.28rem .7rem;border-radius:999px;background:var(--od-tone-soft);color:var(--od-tone-text);white-space:nowrap}
.od-strip{grid-column:1/-1;display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .8rem;margin-top:.6rem;border-radius:12px;background:color-mix(in srgb,var(--text) 6%,transparent);font-size:.84rem;color:var(--od-muted)}
.od-strip-card{margin:0 0 .8rem}
.od-tone-pending{--od-tone:#f59e0b;--od-tone-text:#b45309;--od-tone-soft:#fde4b8;background:#fff6e8}
.od-tone-confirmed{--od-tone:#2563eb;--od-tone-text:#1d4ed8;--od-tone-soft:#dbe7ff;background:#eef4ff}
.od-tone-handed{--od-tone:#0d9488;--od-tone-text:#0f766e;--od-tone-soft:#cdeee9;background:#ecf8f6}
.od-tone-done{--od-tone:var(--od-green);--od-tone-text:var(--od-green);--od-tone-soft:#cfeedd;background:#ecf8f1}
.od-tone-cancelled{--od-tone:#dc2626;--od-tone-text:#b91c1c;--od-tone-soft:#fbd5d5;background:#fdeeee}
.od-tone-disputed{--od-tone:#f59e0b;--od-tone-text:#b45309;--od-tone-soft:#fde4b8;background:#fff6e8}
.od-tone-unresolved{--od-tone:#7c3aed;--od-tone-text:#6d28d9;--od-tone-soft:#e6dcfb;background:#f3eefe}
:root[data-theme="dark"] .od-tone-pending,:root[data-theme="dark"] .od-tone-confirmed,:root[data-theme="dark"] .od-tone-handed,:root[data-theme="dark"] .od-tone-done,:root[data-theme="dark"] .od-tone-cancelled,:root[data-theme="dark"] .od-tone-disputed,:root[data-theme="dark"] .od-tone-unresolved,:root[data-theme="black"] .od-tone-pending,:root[data-theme="black"] .od-tone-confirmed,:root[data-theme="black"] .od-tone-handed,:root[data-theme="black"] .od-tone-done,:root[data-theme="black"] .od-tone-cancelled,:root[data-theme="black"] .od-tone-disputed,:root[data-theme="black"] .od-tone-unresolved{background:color-mix(in srgb,var(--od-tone) 14%,var(--card))}
:root[data-theme="dark"] .od-status-name,:root[data-theme="black"] .od-status-name{color:var(--text)}
/* actions */
.od-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:0 0 .9rem}
.od-actions .od-btn-primary:only-child{grid-column:1/-1}
.od-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:0 1rem;border-radius:14px;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.od-btn-primary{background:var(--od-green);color:#fff;grid-column:span 2}
.od-btn-light{background:var(--card);color:var(--text);border-color:var(--od-border);box-shadow:0 1px 4px rgba(15,23,42,.05)}
.od-btn-soft{background:color-mix(in srgb,var(--od-green) 10%,var(--card));color:var(--od-green);border-color:color-mix(in srgb,var(--od-green) 35%,transparent)}
.od-btn-danger{background:#ef3b4f;color:#fff}
.od-btn-small{min-height:2.5rem;padding:0 .8rem;font-size:.85rem;border-radius:12px}
.od-btn:active{transform:none;filter:none;opacity:.9}
/* tracker */
.od-tracker{display:grid;grid-template-columns:repeat(4,1fr);position:relative;padding:1rem .4rem}
.od-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;position:relative;padding:0 .15rem}
.od-step::before{content:"";position:absolute;top:1.35rem;left:-50%;width:100%;border-top:2px dashed var(--od-border);z-index:0}
.od-step:first-child::before{display:none}
.od-step.is-done::before,.od-step.is-current::before{border-top:2px solid var(--od-green)}
.od-step-dot{position:relative;z-index:1;width:2.7rem;height:2.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text) 10%,var(--card));color:var(--od-muted);font-size:1rem}
.od-step.is-done .od-step-dot,.od-step.is-current .od-step-dot{background:var(--od-green);color:#fff}
.od-step.is-current .od-step-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--od-green) 22%,transparent)}
.od-step-label{font-size:.78rem;color:var(--od-muted);line-height:1.2}
.od-step.is-done .od-step-label,.od-step.is-current .od-step-label{color:var(--od-green);font-weight:700}
.od-step small{font-size:.7rem;color:var(--od-muted)}
/* info */
.od-info{display:flex;gap:.8rem;align-items:center;border:1px solid color-mix(in srgb,var(--od-tone) 22%,transparent);border-radius:18px;padding:.9rem 1rem;margin:0 0 .8rem}
.od-info-icon{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;background:var(--od-tone);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.od-info strong{display:block;color:var(--od-tone-text);font-size:1rem}
.od-info p{margin:.15rem 0 0;font-size:.86rem;color:var(--od-muted);line-height:1.4}
:root[data-theme="dark"] .od-info strong,:root[data-theme="black"] .od-info strong{color:var(--text)}
/* items */
.od-item{display:flex;gap:.85rem;align-items:flex-start;padding:.55rem 0}
.od-item+.od-item{border-top:1px solid var(--od-border)}
.od-item-img{flex:0 0 auto;width:5.4rem;height:5.4rem;border-radius:14px;object-fit:cover;background:color-mix(in srgb,var(--text) 8%,var(--card));display:block}
.od-item-img-empty{display:flex;align-items:center;justify-content:center;color:var(--od-muted);font-size:1.4rem}
.od-item-copy{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.od-item-copy strong{font-size:1rem;line-height:1.25;overflow-wrap:anywhere}
.od-item-copy b{font-size:1.15rem}
.od-note{margin:.6rem 0 0;font-size:.88rem;color:var(--od-muted)}
/* payment + delivery */
.od-pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.9rem}
.od-pay-grid>div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.od-pay-grid b{font-size:1.1rem}
.od-delivery{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem}
.od-delivery>div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.od-delivery strong{overflow-wrap:anywhere}
.od-eta strong{font-size:1rem}
/* vendor */
.od-vendor{display:grid;grid-template-columns:auto 1fr;gap:.7rem .8rem;align-items:center}
.od-vendor-logo{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover}
.od-vendor-copy{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.od-verified{color:#16a34a;font-size:.9rem}
.od-star{color:#f59e0b}
.od-vendor-actions{grid-column:1/-1;display:flex;gap:.55rem}
.od-vendor-actions .od-btn{flex:1}
/* bottom bar */
.od-bottom-bar{position:static;display:flex;gap:.7rem;padding:0;margin:0 0 .9rem;background:none}
.od-bottom-bar .od-btn{flex:1;min-height:3.2rem}
.od-report{margin:1.4rem 0 .5rem;text-align:center}
.od-report-link{display:inline-block;padding:.65rem 1rem;font-weight:650;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.od-report #disputeForm{text-align:left}
.od-action-wrap{display:flex;flex-direction:column;gap:.6rem;margin:0 0 .9rem}
.od-action-wrap .btn{width:100%;min-height:3.1rem;justify-content:center}
/* ---- vendor order details additions */
.od-actions-pair{grid-template-columns:1fr 1fr}
.od-actions-pair .od-btn{grid-column:auto;min-height:3.4rem;font-size:1rem}
.od-btn-confirm{background:#16a34a;color:#fff}
.od-btn-outline-danger{background:var(--card);color:#dc2626;border-color:color-mix(in srgb,#dc2626 45%,transparent);grid-column:1/-1}
.od-vendor-alert{align-items:flex-start}
.od-cust-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}
.od-cust-actions .od-btn{flex:1 1 auto;min-width:6.5rem}
.od-cust-actions .order-buyer-location-btn{width:auto!important;max-width:none!important;margin:0!important;display:inline-flex!important;flex:1 1 100%;border-color:color-mix(in srgb,var(--od-green) 40%,transparent);color:var(--od-green)}
.od-dist{opacity:.75;font-weight:600}
.od-anon{display:flex;gap:.8rem;align-items:center}
.od-anon p{margin:0;font-size:.9rem;color:var(--od-muted);line-height:1.45}
.od-anon-ico{flex:0 0 auto;width:3.2rem;height:3.2rem;border-radius:50%;background:color-mix(in srgb,var(--text) 8%,var(--card));color:var(--od-muted);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.od-closed-note{margin:.7rem 0 0}
.od-note-card p{margin:0;font-size:.95rem;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.od-page .order-buyer-location-wrap{margin-top:.8rem}
.od-page .order-buyer-card{margin-bottom:.8rem!important}
.od-deposit-note{margin:.7rem 0 0;font-size:.8rem;line-height:1.4;color:var(--od-muted)}
.od-deposit-note i{margin-right:.3rem}
/* no big gap above the bottom navigation */
.od-page{padding-bottom:0!important}
body:has(.od-page) #app{padding-bottom:0!important}
/* dark theme: tone pills must not glow */
:root[data-theme="dark"] .od-pill,:root[data-theme="black"] .od-pill{background:color-mix(in srgb,var(--od-tone) 26%,var(--card));color:var(--text)}
@media(max-width:360px){.od-status{grid-template-columns:auto 1fr}.od-pill{grid-column:1/-1;justify-self:start}.od-step-label{font-size:.7rem}}

/* ================= My Listings (vendor catalogue) ================= */
.vl-page{max-width:1100px;margin:0 auto;--vl-green:var(--primary,#3fb97f);--vl-gt:var(--vl-green);--vl-line:color-mix(in srgb,var(--text) 10%,transparent);--vl-muted:var(--text-muted,#64748b);padding-bottom:1rem}
.vl-page *{box-sizing:border-box}
.vl-head-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.15rem}
.vl-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vl-gt);display:inline-flex;align-items:center;gap:.4rem}
.vl-more{width:2.4rem;height:2.4rem;border:1px solid var(--vl-line);background:var(--card);color:var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vl-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.vl-head-copy{min-width:0;flex:1 1 12rem}
.vl-head-copy h2{margin:0;font-size:clamp(1.9rem,7vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
.vl-head-copy p{margin:.35rem 0 0;color:var(--vl-muted);font-size:.9rem;line-height:1.4}
.vl-add{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:0 1.15rem;border:0;border-radius:14px;background:var(--vl-green);color:#fff;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--vl-green) 28%,transparent);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.vl-add:active{opacity:.9}
@media(max-width:430px){.vl-head-row{align-items:stretch}.vl-add{width:100%}}
.vl-note{display:flex;gap:.5rem;align-items:flex-start;margin:.8rem 0 0;padding:.65rem .8rem;border-radius:12px;background:color-mix(in srgb,#f59e0b 14%,var(--card));color:var(--text);font-size:.84rem;line-height:1.4}
.vl-note-bad{background:color-mix(in srgb,#dc2626 12%,var(--card))}
/* tabs */
.vl-tabs{display:flex;gap:.55rem;overflow-x:auto;margin:1rem -1rem .85rem;padding:.2rem 1rem .35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.vl-tabs::-webkit-scrollbar{display:none}
.vl-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;min-height:2.9rem;padding:0 .95rem;border-radius:999px;border:1px solid var(--vl-line);background:var(--card);color:var(--text);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;white-space:nowrap;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.vl-tabs button i{color:var(--vl-muted);font-size:.95rem}
.vl-tabs button em{font-style:normal;font-size:.78rem;font-weight:800;min-width:1.5rem;padding:.12rem .45rem;border-radius:999px;text-align:center;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--vl-muted)}
#app .vl-tabs button.active{background:color-mix(in srgb,var(--vl-green) 12%,var(--card))!important;border-color:var(--vl-gt)!important;color:var(--vl-gt)!important;-webkit-text-fill-color:var(--vl-gt)!important}
.vl-tabs button.active i{color:var(--vl-gt)}
.vl-tabs button.active em{background:color-mix(in srgb,var(--vl-green) 18%,transparent);color:var(--vl-gt)}
/* search / filter / sort */
.vl-tools{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:0 0 1rem}
.vl-search{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;min-height:3.2rem;padding:0 1rem;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--vl-green) 30%,var(--vl-line));background:var(--card);color:var(--vl-muted)}
.vl-search:focus-within{border-color:var(--vl-gt);box-shadow:0 0 0 3px color-mix(in srgb,var(--vl-green) 16%,transparent)}
.vl-search input{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;height:auto!important;font:inherit;font-size:1rem;color:var(--text)}
.vl-select{position:relative;display:flex;align-items:center;gap:.5rem;min-height:3.2rem;padding:0 .9rem;border-radius:16px;border:1px solid var(--vl-line);background:var(--card);color:var(--text);font-weight:700;font-size:.92rem;cursor:pointer;overflow:hidden}
.vl-select>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-select .vl-chev{font-size:.7rem;color:var(--vl-muted)}
.vl-select.is-set{border-color:var(--vl-gt);color:var(--vl-gt)}
.vl-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;padding:0;margin:0;background:transparent;appearance:none;-webkit-appearance:none}
@media(min-width:700px){.vl-tools{grid-template-columns:1fr 9rem 13rem}.vl-search{grid-column:auto}}
/* grid + cards */
.vl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(min-width:700px){.vl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media(min-width:1000px){.vl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vl-card{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--vl-line);border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(15,23,42,.05);cursor:pointer;-webkit-tap-highlight-color:transparent}
.vl-card.vl-filtered{display:none}
.vl-media{position:relative;aspect-ratio:4/3;background:color-mix(in srgb,var(--text) 7%,var(--card));overflow:hidden}
.vl-media img{width:100%;height:100%;object-fit:cover;display:block}
.vl-img-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--vl-muted);font-size:1.8rem}
.vl-type{position:absolute;left:.5rem;top:.5rem;padding:.2rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800;background:rgba(255,255,255,.92);color:#0f172a;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.vl-body{padding:.65rem .7rem .5rem;display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1}
.vl-name{margin:0;font-size:.95rem;line-height:1.25;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.4em}
.vl-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;flex-wrap:wrap}
.vl-price{color:var(--vl-gt);font-size:1.02rem}
.vl-price small{font-size:.7em;font-weight:600;color:var(--vl-muted)}
.vl-stock{font-size:.74rem;color:var(--vl-muted)}
.vl-status{align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700;background:color-mix(in srgb,var(--vl-green) 13%,var(--card));color:var(--vl-gt)}
.vl-status i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.vl-status-warn{background:color-mix(in srgb,#f59e0b 18%,var(--card));color:#b45309}
.vl-status-bad{background:color-mix(in srgb,#dc2626 14%,var(--card));color:#b91c1c}
.vl-status-muted{background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--vl-muted)}
.vl-actions{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.2rem .55rem .65rem}
.vl-actions-3 .vl-btn-delete{grid-column:1/-1}
.vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:2.5rem;padding:0 .15rem;border-radius:11px;border:1px solid var(--vl-line);background:var(--card);color:var(--text);font:inherit;font-size:.72rem;letter-spacing:-.01em;font-weight:700;cursor:pointer;min-width:0;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.vl-btn i{font-size:.8rem;flex:0 0 auto}
.vl-btn span{overflow:hidden;text-overflow:clip}
.vl-btn-edit{background:color-mix(in srgb,var(--vl-green) 16%,var(--card));border-color:color-mix(in srgb,var(--vl-green) 50%,transparent);color:var(--vl-gt)}
.vl-btn-dup{color:var(--vl-gt)}
.vl-btn-pause{background:color-mix(in srgb,#f59e0b 13%,var(--card));border-color:color-mix(in srgb,#f59e0b 40%,transparent);color:#b45309}
.vl-btn-resume{background:color-mix(in srgb,var(--vl-green) 16%,var(--card));border-color:color-mix(in srgb,var(--vl-green) 50%,transparent);color:var(--vl-gt)}
.vl-btn-pending{color:var(--vl-muted)}
.vl-btn-delete{background:color-mix(in srgb,#dc2626 9%,var(--card));border-color:color-mix(in srgb,#dc2626 35%,transparent);color:#dc2626}
.vl-btn:disabled{opacity:.55;cursor:not-allowed}
.vl-btn:active:not(:disabled){opacity:.85}
:root[data-theme="dark"] .vl-status-warn,:root[data-theme="black"] .vl-status-warn,:root[data-theme="dark"] .vl-btn-pause,:root[data-theme="black"] .vl-btn-pause{color:#fbbf24}
:root[data-theme="dark"] .vl-btn-delete,:root[data-theme="black"] .vl-btn-delete,:root[data-theme="dark"] .vl-status-bad,:root[data-theme="black"] .vl-status-bad{color:#f87171}
@media(max-width:359px){.vl-btn i{display:none}}
/* empty / error */
.vl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:2.2rem 1rem;border:1px dashed var(--vl-line);border-radius:18px;background:var(--card)}
.vl-empty.hidden{display:none}
.vl-empty strong{font-size:1.05rem}
.vl-empty p{margin:0 0 .6rem;color:var(--vl-muted);font-size:.9rem}
.vl-empty-ico{width:3.6rem;height:3.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--vl-green) 12%,var(--card));color:var(--vl-gt);font-size:1.4rem}
/* skeleton */
.vl-skel-line{height:.9rem;border-radius:8px;background:color-mix(in srgb,var(--text) 9%,transparent);margin:.35rem 0;animation:vlPulse 1.2s ease-in-out infinite}
.vl-skel-title{height:2.2rem;width:60%}.vl-skel-w40{width:40%}.vl-skel-w50{width:50%}.vl-skel-w80{width:80%}
.vl-skel-tabs{display:flex;gap:.55rem;margin:1rem 0}.vl-skel-tabs span{height:2.9rem;width:7rem;border-radius:999px;background:color-mix(in srgb,var(--text) 9%,transparent)}
.vl-skel-block{background:color-mix(in srgb,var(--text) 9%,transparent);animation:vlPulse 1.2s ease-in-out infinite}
.vl-skel .vl-card{min-height:14rem;cursor:default}
@keyframes vlPulse{50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.vl-skel-line,.vl-skel-block{animation:none}}
:root[data-theme="dark"] .vl-page,:root[data-theme="black"] .vl-page{--vl-gt:#3fb97f}
/* ================= Vendors directory + Search results (redesign) ================= */
.vd-page,.search-page{--vd-g:var(--primary,#3fb97f);--vd-gt:var(--vd-g);--vd-line:color-mix(in srgb,var(--text) 10%,transparent);--vd-muted:var(--text-muted,#64748b)}
:root[data-theme="dark"] .vd-page,:root[data-theme="black"] .vd-page,:root[data-theme="dark"] .search-page,:root[data-theme="black"] .search-page{--vd-gt:#3fb97f}
.vd-page *{box-sizing:border-box}
.vd-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin:.2rem 0 .9rem}
.vd-title{display:flex;align-items:center;gap:.7rem;min-width:0}
.vd-title-ico{flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--vd-g) 12%,var(--card));color:var(--vd-gt);font-size:1.15rem}
.vd-title h2{margin:0;font-size:1.55rem;line-height:1.1;letter-spacing:-.01em}
.vd-title p{margin:.15rem 0 0;font-size:.8rem;color:var(--vd-muted);line-height:1.3}
.vd-views{display:flex;gap:.4rem;flex:0 0 auto}
.vd-view{width:2.6rem;height:2.6rem;border-radius:12px;border:1px solid var(--vd-line);background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vd-view.active{background:color-mix(in srgb,var(--vd-g) 13%,var(--card));border-color:var(--vd-g);color:var(--vd-gt)}
/* segmented control */
.vd-seg{display:grid;grid-template-columns:repeat(4,auto);gap:.2rem;padding:.25rem;border-radius:16px;background:color-mix(in srgb,var(--text) 6%,var(--card));border:1px solid var(--vd-line);margin:0 0 .8rem}
.vd-tab{min-height:2.6rem;padding:0 .4rem;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--vd-muted);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s;-webkit-tap-highlight-color:transparent}
#app .vd-tab.active{background:var(--card)!important;border-color:var(--vd-g)!important;color:var(--vd-gt)!important;-webkit-text-fill-color:var(--vd-gt)!important;box-shadow:0 1px 6px rgba(15,23,42,.08)}
/* search + filter */
.vd-tools{display:flex;gap:.55rem;margin:0 0 .8rem}
.vd-search{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:0 .95rem;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--vd-g) 28%,var(--vd-line));background:var(--card);color:var(--vd-muted)}
.vd-search:focus-within{border-color:var(--vd-g);box-shadow:0 0 0 3px color-mix(in srgb,var(--vd-g) 15%,transparent)}
.vd-search input{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;height:auto!important;font:inherit;font-size:.98rem;color:var(--text)}
.vd-filter-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;min-height:3rem;padding:0 1rem;border-radius:16px;border:1px solid var(--vd-line);background:var(--card);color:var(--text);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.vd-filter-btn.active{border-color:var(--vd-g);color:var(--vd-gt);background:color-mix(in srgb,var(--vd-g) 10%,var(--card))}
.vd-panel{margin:0 0 .9rem}
/* grid + cards */
.vd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.vd-grid.hidden{display:none}
@media(min-width:700px){.vd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media(min-width:1000px){.vd-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vd-card{display:flex;flex-direction:column;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,.05);-webkit-tap-highlight-color:transparent;transition:box-shadow .18s,transform .18s}
.vd-card:active{transform:scale(.99)}
.vd-cover{position:relative;aspect-ratio:4/3;background:color-mix(in srgb,var(--text) 6%,var(--card));overflow:hidden}
.vd-cover img{width:100%;height:100%;object-fit:cover;display:block}
.vd-cover .vd-fallback{width:100%!important;height:100%!important;border-radius:0!important;font-size:2.2rem}
.vd-verified{position:absolute;right:.5rem;top:.5rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;box-shadow:0 0 0 2px #fff}
.vd-body{display:flex;flex-direction:column;gap:.22rem;padding:.65rem .7rem .7rem;min-width:0;flex:1}
.vd-name{font-size:.98rem;line-height:1.25;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vd-loc,.vd-cat{font-size:.78rem;color:var(--vd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-loc i,.vd-cat i{margin-right:.2rem;opacity:.85}
.vd-loc b{font-weight:400}
.vd-follow{margin:.35rem 0 .2rem;align-self:stretch;min-height:2.4rem;padding:0 .6rem;border-radius:999px;border:1.5px solid var(--vd-g);background:transparent;color:var(--vd-gt);font:inherit;font-weight:800;font-size:.86rem;cursor:pointer;transition:background .18s,color .18s}
.vd-follow.following{background:color-mix(in srgb,var(--vd-g) 12%,var(--card));border-color:color-mix(in srgb,var(--vd-g) 45%,transparent)}
.vd-follow:disabled{opacity:.65}
.vd-meta{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:auto;font-size:.76rem;color:var(--vd-muted);flex-wrap:wrap}
.vd-rating{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:999px;background:color-mix(in srgb,#f59e0b 14%,var(--card));color:var(--text);font-weight:700}
.vd-rating i{color:#f59e0b;font-size:.7rem}
.vd-rating small{color:var(--vd-muted);font-weight:500}
/* list mode */
.vd-grid.vendors-list-mode{grid-template-columns:1fr}
.vd-grid.vendors-list-mode .vd-card{flex-direction:row;align-items:stretch}
.vd-grid.vendors-list-mode .vd-cover{flex:0 0 7rem;aspect-ratio:auto;min-height:7.5rem}
.vd-grid.vendors-list-mode .vd-body{padding:.7rem .8rem}
.vd-grid.vendors-list-mode .vd-follow{align-self:flex-start;padding:0 1.2rem}
/* skeleton + empty */
.vd-skel{cursor:default;pointer-events:none}
.vd-skel .vd-cover{animation:vdPulse 1.2s ease-in-out infinite}
.vd-skel-line{display:block;height:.8rem;border-radius:6px;background:color-mix(in srgb,var(--text) 9%,transparent);margin:.2rem 0;animation:vdPulse 1.2s ease-in-out infinite}
.vd-w60{width:60%}.vd-w40{width:40%}
@keyframes vdPulse{50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.vd-skel .vd-cover,.vd-skel-line{animation:none}}
.vd-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:2.4rem 1rem;border:1px dashed var(--vd-line);border-radius:18px;background:var(--card)}
.vd-empty strong{font-size:1.05rem}
.vd-empty p{margin:0 0 .5rem;color:var(--vd-muted);font-size:.9rem}
.vd-empty-ico{width:3.6rem;height:3.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--vd-g) 12%,var(--card));color:var(--vd-gt);font-size:1.4rem}
.vd-clear{min-height:2.8rem;padding:0 1.3rem;border-radius:14px;border:0;background:var(--vd-g);color:#fff;font:inherit;font-weight:800;cursor:pointer}
@media(max-width:350px){.vd-title p{display:none}.vd-seg{grid-template-columns:repeat(2,1fr)}}
/* ---- search results page ---- */
.search-page-filters{gap:.5rem!important;padding:.15rem 0 .75rem!important}
.search-page-filter{display:inline-flex!important;align-items:center;gap:.4rem;min-height:2.6rem!important;padding:0 1rem!important;border-radius:999px!important;font-size:.88rem!important;font-weight:700!important;transition:background .18s,border-color .18s}
.search-page-filter i{font-size:.85rem;color:var(--vd-muted)}
.search-page-filter.active{background:color-mix(in srgb,var(--vd-g) 13%,var(--card))!important;border-color:var(--vd-g)!important;color:var(--vd-gt)!important}
.search-page-filter.active i{color:var(--vd-gt)}
.search-page-section h3{font-size:1.15rem!important;color:var(--text)!important;text-transform:none!important;letter-spacing:0!important;font-weight:800;margin:0 0 .6rem!important}
.sr-row{display:flex;align-items:center;gap:.8rem;width:100%;padding:.7rem;margin:0 0 .55rem;border-radius:16px;background:var(--card);border:1px solid var(--vd-line);cursor:pointer;text-align:left;color:var(--text);-webkit-tap-highlight-color:transparent;box-shadow:0 1px 6px rgba(15,23,42,.04)}
.search-result-row.sr-row{border-bottom:1px solid var(--vd-line);padding:.7rem}
.sr-row:active{background:color-mix(in srgb,var(--text) 4%,var(--card))}
.sr-thumb{flex:0 0 auto;width:4.6rem;height:4.6rem;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--text) 7%,var(--card));display:flex;align-items:center;justify-content:center;color:var(--vd-muted);font-size:1.3rem}
.sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sr-thumb-round{border-radius:50%}
.sr-thumb .sr-avatar{width:100%!important;height:100%!important}
.sr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.sr-name{font-size:1rem;line-height:1.25;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-vendor{font-size:.8rem;color:var(--vd-muted);display:flex;align-items:center;gap:.25rem;min-width:0;white-space:nowrap;overflow:hidden}
.sr-vendor-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sr-vendor .search-result-distance{display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap}
.sr-verified{color:#16a34a;font-size:.78rem;flex:0 0 auto}
.sr-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:.76rem;color:var(--vd-muted)}
.sr-type{font-style:normal;font-weight:700;padding:.12rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--vd-g) 12%,var(--card));color:var(--vd-gt)}
.sr-type-service{background:color-mix(in srgb,#2563eb 12%,var(--card));color:#2563eb}
.sr-type-package{background:color-mix(in srgb,#7c3aed 12%,var(--card));color:#7c3aed}
:root[data-theme="dark"] .sr-type-service,:root[data-theme="black"] .sr-type-service{color:#93c5fd}
:root[data-theme="dark"] .sr-type-package,:root[data-theme="black"] .sr-type-package{color:#c4b5fd}
.sr-rating{display:inline-flex;align-items:center;gap:.2rem;font-weight:700;color:var(--text)}
.sr-rating i{color:#f59e0b;font-size:.72rem}
.sr-rating small{font-weight:500;color:var(--vd-muted)}
.sr-followers i{margin-right:.15rem}
.sr-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:.4rem}
.sr-price{font-size:1.02rem;color:var(--text);white-space:nowrap}
.sr-cart{width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--vd-g);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:auto;-webkit-tap-highlight-color:transparent}
.sr-cart:active{transform:scale(.94)}
.sr-cart.added{background:var(--vd-g);color:#fff}
.sr-follow{min-height:2.4rem;padding:0 1rem;border-radius:999px;border:1.5px solid var(--vd-g);background:transparent;color:var(--vd-gt);font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;margin:auto 0}
.sr-follow.following{background:color-mix(in srgb,var(--vd-g) 12%,var(--card))}
.sr-skel .sr-thumb{animation:vdPulse 1.2s ease-in-out infinite}
.sr-skel-line{display:block;height:.8rem;border-radius:6px;background:color-mix(in srgb,var(--text) 9%,transparent);animation:vdPulse 1.2s ease-in-out infinite}
.sr-w70{width:70%}.sr-w50{width:50%}.sr-w40{width:40%}
.search-page-empty strong,.search-page-error strong{display:block;font-size:1.1rem;margin-bottom:.2rem;color:var(--text)}
.search-page-empty p,.search-page-error p{margin:.2rem 0 .8rem}
.search-page-error{text-align:center;padding:2.5rem 1rem;color:var(--vd-muted)}
.search-page-error>i{font-size:1.8rem;display:block;margin-bottom:.6rem;color:#d97706}
.search-empty-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.sr-secondary{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.1rem;border-radius:14px;border:1.5px solid var(--vd-g);background:transparent;color:var(--vd-gt);font:inherit;font-weight:800;cursor:pointer}
.search-empty-note{font-size:.85rem;margin-top:1rem!important}
@media(max-width:350px){.sr-thumb{width:3.8rem;height:3.8rem}}
/* ================= Cart (redesign) ================= */
.cart-page{max-width:640px;margin:0 auto;--ct-g:var(--primary,#3fb97f);--ct-gt:var(--ct-g);--ct-line:color-mix(in srgb,var(--text) 10%,transparent);--ct-muted:var(--text-muted,#64748b)}
:root[data-theme="dark"] .cart-page,:root[data-theme="black"] .cart-page{--ct-gt:#3fb97f}
.cart-page *{box-sizing:border-box}
.cart-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem}
.cart-back{flex:0 0 auto;width:2.5rem;height:2.5rem;border:0;background:transparent;color:var(--text);font-size:1.15rem;border-radius:50%;cursor:pointer}
.cart-head .cart-page-title{flex:1;min-width:0;margin:0!important;padding:0!important;font-size:1.5rem;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.cart-head .cart-page-title>i{color:var(--ct-gt);font-size:1.3rem}
.cart-count{font-size:1rem;font-weight:600;color:var(--ct-muted)}
.cart-clear{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;min-height:2.6rem;padding:0 .9rem;border-radius:12px;border:1px solid color-mix(in srgb,#dc2626 40%,transparent);background:color-mix(in srgb,#dc2626 8%,var(--card));color:#dc2626;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
:root[data-theme="dark"] .cart-clear,:root[data-theme="black"] .cart-clear{color:#f87171}
.cart-vendor-card,.cart-card{background:var(--card);border:1px solid var(--ct-line);border-radius:18px;margin:0 0 .8rem!important;box-shadow:0 2px 10px rgba(15,23,42,.04);overflow:hidden}
.cart-card{padding:1rem}
.cart-card h3{margin:0 0 .6rem;font-size:1.02rem;display:flex;align-items:center;gap:.5rem}
.cart-card h3 i{color:var(--ct-gt)}
.cart-vendor-head{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--ct-line);color:var(--ct-gt);font-weight:800;font-size:1.02rem;text-decoration:none}
.cart-vendor-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-chev{font-size:.8rem;opacity:.7}
.cart-items{padding:.3rem 1rem}
.cart-item{display:flex;gap:.8rem;padding:.7rem 0}
.cart-item+.cart-item{border-top:1px solid var(--ct-line)}
.cart-item-img{flex:0 0 auto;width:5.2rem;height:5.2rem;border-radius:14px;object-fit:cover;background:color-mix(in srgb,var(--text) 7%,var(--card));display:block}
.cart-item-img-empty{display:flex;align-items:center;justify-content:center;color:var(--ct-muted);font-size:1.4rem}
.cart-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.cart-item-name{font-size:1rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cart-item-variant{font-size:.8rem;color:var(--ct-muted)}
.cart-item-price{color:var(--ct-gt);font-weight:800}
.cart-item-price small{font-weight:500;color:var(--ct-muted)}
.cart-item-controls{display:flex;align-items:center;gap:.6rem;margin-top:.35rem}
.cart-qty{display:inline-flex;align-items:center;border:1px solid var(--ct-line);border-radius:12px;overflow:hidden}
.cart-qty button{width:2.6rem;height:2.6rem;border:0;background:transparent;color:var(--text);font-size:.9rem;cursor:pointer}
.cart-qty button:disabled{opacity:.35}
.cart-qty span{min-width:2rem;text-align:center;font-weight:700}
.cart-remove{width:2.6rem;height:2.6rem;border-radius:12px;border:0;background:color-mix(in srgb,#dc2626 10%,var(--card));color:#dc2626;font-size:.95rem;cursor:pointer}
.cart-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--ct-line);padding-bottom:.6rem;margin-bottom:.6rem}
.cart-card-head h3{margin:0}
.cart-card-head strong{color:var(--ct-gt);font-size:1.15rem}
.cart-summary-row{display:flex;justify-content:space-between;gap:.6rem;font-size:.95rem}
.cart-summary .price-breakdown-table{margin-top:.35rem}
.cart-summary .price-breakdown-table:empty{display:none}
.cart-summary .price-breakdown-row:first-child{display:none}
.cart-delivery .delivery-method-row{display:grid!important;grid-template-columns:1fr;gap:.55rem;margin:.2rem 0 .9rem!important}
.cart-delivery .delivery-method-row label{display:flex!important;align-items:center;gap:.7rem!important;min-height:3.4rem;padding:.6rem .85rem;border-radius:14px;border:1.5px solid var(--ct-line);background:var(--card);font-weight:700!important;cursor:pointer}
.cart-delivery .delivery-method-row label:has(input:checked){border-color:var(--ct-g);background:color-mix(in srgb,var(--ct-g) 9%,var(--card))}
.cart-delivery .delivery-method-row label{color:var(--text)!important;font-size:.95rem}
.cart-delivery .delivery-method-row input[type=radio]{accent-color:var(--ct-g);width:1.25rem!important;height:1.25rem}
.cart-delivery .dyn-delivery-fields input[type=text],.cart-delivery .dyn-delivery-fields input[type=tel]{min-height:3.1rem;border-radius:14px}
.cart-note label{display:block;font-weight:800;margin:0 0 .4rem}
.cart-note label span{font-weight:500;color:var(--ct-muted)}
.cart-note textarea{width:100%;border-radius:14px;resize:none}
.cart-note-count{display:block;text-align:right;color:var(--ct-muted);font-size:.75rem;margin-top:.2rem}
.cart-checkout{display:flex;align-items:center;gap:.7rem;width:100%;min-height:3.6rem;padding:0 1.1rem;border:0;border-radius:16px;background:var(--ct-g);color:#fff;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;margin:0 0 .6rem;box-shadow:0 6px 16px color-mix(in srgb,var(--ct-g) 28%,transparent);-webkit-tap-highlight-color:transparent}
.cart-checkout-label{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-checkout:active{opacity:.9}
/* clear cart sheet */
.cc-backdrop{position:fixed;inset:0;z-index:100950;background:rgba(15,23,42,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.cc-backdrop.open{opacity:1}
.cc-sheet{position:relative;width:100%;max-width:560px;background:var(--card);color:var(--text);border-radius:24px 24px 0 0;padding:1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px));text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem;transform:translateY(24px);transition:transform .2s}
.cc-backdrop.open .cc-sheet{transform:none}
.cc-x{position:absolute;right:1rem;top:1rem;width:2.4rem;height:2.4rem;border-radius:50%;border:0;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);cursor:pointer}
.cc-ico{width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#dc2626 12%,var(--card));color:#dc2626;font-size:1.5rem}
.cc-sheet h3{margin:.3rem 0 0;font-size:1.45rem}
.cc-sheet p{margin:0 0 .8rem;color:var(--text-muted);font-size:.95rem;line-height:1.4}
.cc-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:.7rem;width:100%}
.cc-cancel,.cc-confirm{min-height:3.4rem;border:0;border-radius:16px;font:inherit;font-weight:800;font-size:1rem;cursor:pointer}
.cc-cancel{background:color-mix(in srgb,var(--text) 8%,var(--card));color:var(--text)}
.cc-confirm{background:#dc2626;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.cc-confirm:disabled{opacity:.6}
/* ---- My Listings: horizontal cards (reference layout) ---- */
.vl-head-row{align-items:flex-start}
.vl-add-wide{width:100%;margin:.9rem 0 0;min-height:3.4rem;font-size:1.05rem}
.vl-grid{grid-template-columns:1fr!important;gap:.65rem}
@media(min-width:900px){.vl-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.vl-card{flex-direction:row!important;align-items:flex-start;gap:.8rem;padding:.7rem;overflow:visible!important;position:relative}
.vl-card.vl-menu-open{z-index:40}
.vl-media{flex:0 0 6.4rem;width:6.4rem;aspect-ratio:1/1!important;border-radius:14px}
.vl-body{padding:0!important;gap:.28rem;min-width:0;flex:1}
.vl-top{display:flex;align-items:flex-start;gap:.4rem}
.vl-top .vl-name{flex:1;min-height:0!important;font-size:1.02rem}
.vl-top .vl-status{flex:0 0 auto;margin-top:.1rem}
.vl-more-wrap{position:relative;flex:0 0 auto}
.vl-card-more{width:2rem;height:2rem;border:0;background:transparent;color:var(--vl-muted);border-radius:50%;cursor:pointer;font-size:1rem}
.vl-card-more:active{background:color-mix(in srgb,var(--text) 8%,transparent)}
.vl-menu{position:absolute;right:0;top:calc(100% + .2rem);z-index:50;min-width:12rem;background:var(--card);border:1px solid var(--vl-line);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:.3rem}
.vl-menu.hidden{display:none}
.vl-menu button{display:flex;align-items:center;gap:.6rem;width:100%;min-height:2.7rem;border:0;background:none;color:var(--text);font:inherit;font-size:.9rem;padding:0 .7rem;border-radius:10px;cursor:pointer;text-align:left}
.vl-menu button i{width:1.1rem;color:var(--vl-gt)}
.vl-menu button:disabled{opacity:.5}
.vl-price{font-size:1.1rem}
.vl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;font-size:.78rem;color:var(--vl-muted)}
.vl-meta i{margin-right:.25rem;opacity:.85}
.vl-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:.4rem;padding:0!important;margin-top:.4rem}
.vl-actions-3 .vl-btn-delete{grid-column:auto!important}
.vl-btn-view{background:var(--card);color:var(--text)}
.vl-btn{min-height:2.6rem}
/* discarded notice */
.vl-discarded{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;padding:.8rem .9rem;border-radius:16px;border:1px solid color-mix(in srgb,#f59e0b 35%,transparent);background:color-mix(in srgb,#f59e0b 9%,var(--card))}
.vl-discarded-ico{flex:0 0 auto;width:2.8rem;height:2.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#f97316 15%,var(--card));color:#ea580c;font-size:1.1rem}
.vl-discarded>div{flex:1;min-width:0}
.vl-discarded strong{display:block;font-size:.98rem}
.vl-discarded p{margin:.1rem 0 0;font-size:.78rem;line-height:1.35;color:var(--vl-muted)}
.vl-discarded button{flex:0 0 auto;border:0;background:none;color:var(--vl-gt);font:inherit;font-weight:800;cursor:pointer;min-height:2.6rem;padding:0 .2rem;white-space:nowrap}
/* list toolbar */
.vl-tools{display:flex!important;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .6rem!important}
.vl-listtitle{flex:1 1 0;min-width:8rem;margin:0;font-size:1.05rem;white-space:nowrap}
.vl-listtitle span{font-weight:500;color:var(--vl-muted);font-size:1rem}
.vl-tools .vl-select{flex:0 0 auto;min-height:2.8rem;padding:0 .65rem;gap:.35rem;font-size:.82rem}
.vl-search-row{margin:0 0 .9rem}
.vl-search{min-height:2.9rem}
/* ---- Seller hub (My Shop page) ---- */
.vh-hub{--vh-g:var(--primary,#3fb97f);--vh-gt:var(--vh-g);--vh-line:color-mix(in srgb,var(--text) 10%,transparent);--vh-muted:var(--text-muted,#64748b);max-width:680px;margin:0 auto}
:root[data-theme="dark"] .vh-hub,:root[data-theme="black"] .vh-hub{--vh-gt:#3fb97f}
.vh-hub *{box-sizing:border-box}
.vh-hub .vl-eyebrow{color:var(--vh-gt)}
.vh-title{margin:.1rem 0 0;font-size:clamp(1.9rem,7vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.vh-sub{margin:.35rem 0 0;color:var(--vh-muted);font-size:.9rem}
.vh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:1rem 0}
.vh-stat{display:flex;align-items:center;gap:.5rem;padding:.7rem .6rem;border-radius:16px;border:1px solid var(--vh-line);background:var(--card);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.04);min-width:0}
.vh-stat-ico{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--vh-g) 12%,var(--card));color:var(--vh-gt)}
.vh-stat span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.vh-stat b{font-size:1.25rem;line-height:1.1}
.vh-stat small{font-size:.76rem;color:var(--vh-muted)}
.vh-chev{font-size:.72rem;color:var(--vh-muted);flex:0 0 auto}
.vh-section-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:1.1rem 0 .6rem}
.vh-section-head h3{margin:0;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}
.vh-section-head h3 i{color:var(--vh-gt)}
.vh-section-head button{border:0;background:none;color:var(--vh-gt);font:inherit;font-weight:800;cursor:pointer;min-height:2.6rem}
.vh-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin:0 0 .9rem}
.vh-tabs button{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:3rem;padding:0 .4rem;border-radius:14px;border:1px solid var(--vh-line);background:var(--card);color:var(--text);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.vh-tabs button i{color:var(--vh-muted)}
.vh-tabs button em{font-style:normal;font-size:.72rem;padding:.1rem .4rem;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--vh-muted)}
.vh-group{margin:1.2rem 0 .55rem;font-size:1.2rem}
.vh-list{background:var(--card);border:1px solid var(--vh-line);border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.vh-list-single{margin-top:.8rem}
.vh-row{display:flex;align-items:center;gap:.8rem;width:100%;min-height:4.2rem;padding:.7rem .9rem;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vh-row+.vh-row{border-top:1px solid var(--vh-line)}
.vh-row:active{background:color-mix(in srgb,var(--text) 4%,transparent)}
.vh-row-ico{flex:0 0 auto;width:2.8rem;height:2.8rem;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--vh-g) 12%,var(--card));color:var(--vh-gt);font-size:1.05rem}
.vh-row-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.vh-row-copy strong{font-size:.98rem}
.vh-row-copy small{font-size:.78rem;color:var(--vh-muted);line-height:1.3}
.vh-row-val{flex:0 0 auto;max-width:42%;text-align:right;font-size:.82rem;color:var(--vh-muted)}
.vh-star{color:var(--text);font-weight:700}
.vh-star i{color:#f59e0b}
.vh-badge{display:inline-block;min-width:1.4rem;padding:.1rem .45rem;border-radius:999px;background:#ef4444;color:#fff;font-weight:800;text-align:center}
#app .vh-hub .vl-add,#app .vl-page .vl-add{background:var(--primary,#3fb97f)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important}
/* ---- Messages inbox (redesign) ---- */
.msg-tabs-row{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .7rem}
.msg-tabs{flex:1;min-width:0;display:flex;gap:.25rem;padding:.25rem;border-radius:999px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 9%,transparent);overflow-x:auto;scrollbar-width:none}
.msg-tabs::-webkit-scrollbar{display:none}
#app .msg-tabs a{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;min-height:2.6rem;padding:0 .7rem;border-radius:999px;color:var(--text-muted)!important;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none;white-space:nowrap;border:0!important;background:transparent!important}
#app .msg-tabs a.active{background:var(--primary)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.msg-tab-badge{display:inline-flex!important;position:static!important;margin:0!important}
.msg-newlist{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;min-height:3.1rem;padding:0 .9rem;border-radius:999px;border:1.5px solid var(--primary);background:transparent;color:var(--primary);font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;white-space:nowrap}
:root[data-theme="dark"] .msg-newlist,:root[data-theme="black"] .msg-newlist{color:#3fb97f;border-color:#3fb97f}
.msg-search{display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:0 1rem;margin:0 0 .8rem;border-radius:16px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:var(--card);color:var(--text-muted)}
.msg-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
#app .msg-search input.messages-search{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;height:auto!important;font-size:1rem}
#app #convListWrap{display:flex!important;flex-direction:column;gap:.55rem}
#app #convListWrap .conv-row-wrap{background:var(--card);border:1px solid color-mix(in srgb,var(--text) 9%,transparent);border-radius:18px;overflow:hidden;box-shadow:0 1px 6px rgba(15,23,42,.04)}
#app #convListWrap .conv-list-item{min-height:4.9rem!important;padding:.75rem .9rem!important;border-bottom:0!important;border-radius:0!important;gap:.8rem!important;align-items:center}
#app #convListWrap .conv-list-item .avatar-circle{width:3.4rem!important;height:3.4rem!important}
#app #convListWrap .conv-meta{flex:1;min-width:0}
#app #convListWrap .conv-name-row strong{font-size:1.02rem}
#app #convListWrap .conv-list-item[data-unread="1"] .conv-name-row strong,#app #convListWrap .conv-list-item[data-unread="1"] .conv-preview{font-weight:800;color:var(--text)}
#app #convListWrap .conv-preview{font-size:.9rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app #convListWrap .conv-time{font-size:.78rem;color:var(--text-muted)}
#app #convListWrap .conv-unread-badge{position:static!important;flex:0 0 auto}
.conv-chev{flex:0 0 auto;font-size:.75rem;color:var(--text-muted)}
/* Featured vendors rail on Home uses the same card as the Vendors page */
.top-rated-vendors-scroll{display:flex!important;gap:.7rem!important;align-items:stretch;padding-bottom:.4rem}
.top-rated-vendors-scroll .vd-card{flex:0 0 10.6rem;width:10.6rem;scroll-snap-align:start}
@media(max-width:380px){.top-rated-vendors-scroll .vd-card{flex-basis:9.6rem;width:9.6rem}}
.vd-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:hsl(var(--av-h,150) 45% 86%);color:hsl(var(--av-h,150) 55% 26%);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:.02em}
.vd-initials>span{display:block;line-height:1;transform:translateZ(0)}
.sr-thumb{position:relative}
.sr-thumb .vd-initials{font-size:1.5rem}
:root[data-theme="dark"] .vd-initials,:root[data-theme="black"] .vd-initials{background:hsl(var(--av-h,150) 30% 24%);color:hsl(var(--av-h,150) 60% 82%)}
/* ---- Browse everything: search and filter side by side ---- */
#app .browse-filter-toolbar,#app .browse-filter-toolbar.final-search-open,#app .browse-filter-toolbar.search-open{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:.55rem!important}
#app .browse-filter-toolbar>input#searchInput,#app .browse-filter-toolbar.final-search-open>input#searchInput,#app .browse-filter-toolbar.search-open>input#searchInput{display:block!important;order:1!important;flex:1 1 0!important;min-width:0!important;width:auto!important;grid-column:auto!important;grid-row:auto!important;min-height:3rem!important;border-radius:16px!important;margin:0!important;padding:0 1rem!important}
#app .browse-filter-toolbar>.levro-final-search-toggle,#app .browse-filter-toolbar.final-search-open>.levro-final-search-toggle{display:none!important}
#app .browse-filter-toolbar>.browse-filter-trigger{order:2!important;flex:0 0 auto!important;width:auto!important;min-height:3rem!important;padding:0 1rem!important;border-radius:16px!important;display:inline-flex!important;align-items:center;gap:.45rem}
#app .browse-filter-toolbar>.browse-filter-trigger .browse-filter-chevron{display:none}
#app .browse-filter-toolbar>.browse-filter-trigger::after{content:"Filter";font-weight:700;font-size:.9rem}
/* ---- Featured vendors rail: compact cards (about product-card size) ---- */
#app .top-rated-vendors-scroll{display:flex!important;gap:.6rem!important;align-items:stretch!important}
#app .top-rated-vendors-scroll>.vd-card{flex:0 0 9.4rem!important;width:9.4rem!important;min-width:0!important;max-width:9.4rem!important}
#app .top-rated-vendors-scroll .vd-cover{aspect-ratio:16/10}
#app .top-rated-vendors-scroll .vd-body{padding:.5rem .55rem .55rem;gap:.15rem}
#app .top-rated-vendors-scroll .vd-name{font-size:.88rem}
#app .top-rated-vendors-scroll .vd-loc,#app .top-rated-vendors-scroll .vd-cat{font-size:.72rem}
#app .top-rated-vendors-scroll .vd-follow{min-height:2.1rem;font-size:.78rem;margin:.25rem 0 .1rem}
#app .top-rated-vendors-scroll .vd-meta{font-size:.7rem}
/* initials: brand-green tint, same on every vendor */
.vd-initials{background:hsl(var(--av-h,150) 55% 90%)!important;color:hsl(var(--av-h,150) 55% 28%)!important}
:root[data-theme="dark"] .vd-initials,:root[data-theme="black"] .vd-initials{background:hsl(var(--av-h,150) 30% 24%)!important;color:hsl(var(--av-h,150) 60% 82%)!important}
/* discarded items: select-all bar no longer overlaps */
#app .vendor-discarded-bulkbar{display:flex!important;flex-wrap:wrap;align-items:center;gap:.6rem .8rem}
#app .vendor-discarded-bulkbar label{display:inline-flex!important;align-items:center;gap:.5rem;position:static!important;white-space:nowrap}
#app .vendor-discarded-bulkbar label input{position:static!important;flex:0 0 auto;width:1.3rem!important;height:1.3rem!important;margin:0!important}
#app .vendor-discarded-bulkbar label span{position:static!important;display:inline!important;white-space:nowrap}
#app .vendor-discarded-bulkbar #discardedSelectedCount{position:static!important;flex:1 1 auto;white-space:nowrap}
#app .vendor-discarded-bulkbar .btn{margin-left:auto!important}
#app .browse-filter-toolbar>button#browseFilterTrigger{order:2!important;flex:0 0 auto!important;width:auto!important;min-width:6rem!important;height:3rem!important;min-height:3rem!important;padding:0 1rem!important;border-radius:16px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.45rem!important;white-space:nowrap!important;overflow:visible!important}
#app .browse-filter-toolbar>input#searchInput{font-size:.95rem!important;text-overflow:ellipsis}
.earn-stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 .9rem}
.earn-stat{padding:.9rem;border-radius:16px;background:var(--card);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);display:flex;flex-direction:column;gap:.2rem}
.earn-stat span{font-size:.78rem;color:var(--text-muted)}
.earn-stat b{font-size:1.35rem;color:var(--primary)}
.earn-chart{margin:0 0 1rem}
.earn-h{margin:1rem 0 .5rem;font-size:1.05rem}
.earn-list{display:flex;flex-direction:column;gap:.45rem}
.earn-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.75rem .9rem;border-radius:14px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:var(--card);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.earn-row-main{display:flex;flex-direction:column;min-width:0}
.earn-row-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.earn-row-main small{color:var(--text-muted)}
.contact-us-sub{margin:.3rem 0 1rem!important;line-height:1.45}
.contact-us-page h2{margin-bottom:.1rem}
.contact-us-card{margin-bottom:1.3rem!important}
.contact-us-socials-title{margin:1.4rem 0 .7rem}
.contact-us-handle{margin:.9rem 0 1.4rem!important}
.contact-us-help{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding:1.1rem;border-radius:18px;border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);background:color-mix(in srgb,var(--primary) 7%,var(--card))}
.contact-us-help-ico{width:2.8rem;height:2.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff}
.contact-us-help strong{display:block;font-size:1.02rem}
.contact-us-help p{margin:.2rem 0 0;color:var(--text-muted);font-size:.88rem;line-height:1.4}
.contact-us-help .vl-add{width:100%;min-height:3rem}
.contact-us-tag{text-align:center;margin:1.6rem 0 .5rem;font-weight:800;letter-spacing:.18em;font-size:.78rem;color:var(--text-muted)}
body.tour-active #bottomNav{transform:none!important;opacity:1!important;visibility:visible!important}
#tourModal.tour-tracking #tourSpotlightHole{transition:none!important}
#app .contact-us-help .vl-add,.contact-us-help .vl-add{background:var(--primary,#3fb97f)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;opacity:1!important}
.contact-us-help .vl-add i{color:#fff!important}
.chat-call-log{display:flex;margin:.45rem 0}
.chat-call-log.mine{justify-content:flex-end}.chat-call-log.theirs{justify-content:flex-start}
.ccl-card{display:flex;align-items:center;gap:.7rem;min-width:13.5rem;max-width:78%;padding:.6rem .8rem .5rem .6rem;border-radius:16px;border:0;font:inherit;text-align:left;cursor:pointer;position:relative}
.chat-call-log.mine .ccl-card{background:var(--primary);color:#fff;border-bottom-right-radius:5px}
.chat-call-log.theirs .ccl-card{background:var(--card);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:5px}
.ccl-ico{flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;font-size:1rem;background:rgba(0,0,0,.22);color:#fff}
.chat-call-log.theirs .ccl-ico{background:color-mix(in srgb,var(--primary) 14%,var(--card));color:var(--primary)}
.chat-call-log.is-missed .ccl-ico{background:color-mix(in srgb,#dc2626 14%,var(--card));color:#dc2626}
.ccl-copy{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.ccl-copy strong{font-size:.95rem;font-weight:700}
.ccl-copy span{font-size:.82rem;opacity:.82}
.ccl-card small{align-self:flex-end;font-size:.68rem;opacity:.75;margin-left:.3rem}
#profilePanel .profile-settings-gear{border:1px solid color-mix(in srgb,var(--text) 12%,transparent)!important;background:var(--card)!important;color:var(--text)!important;border-radius:14px!important;font-size:1.15rem}
/* Profile drawer rows: one icon size, one colour, text always starts at the same x */
#profilePanel .profile-nav-link .profile-item-icon{flex:0 0 2rem!important;width:2rem!important;height:2rem!important;display:inline-flex!important;align-items:center;justify-content:center;margin:0!important}
#profilePanel .profile-nav-link .profile-item-icon i{font-size:1.15rem!important;width:auto!important;color:var(--text)!important}
#profilePanel .profile-nav-link .profile-nav-text{flex:1;min-width:0;margin-left:.8rem}
/* Commission breakdown: colour-coded rows (green sale, blue buyer, purple product, amber transport, pink commission). */
.vendor-commission-breakdown{padding:.7rem;display:flex;flex-direction:column;gap:.65rem;border-radius:20px}
.vendor-commission-breakdown>.vendor-commission-breakdown-head{border:0;padding:.7rem .75rem;border-radius:14px;display:flex;align-items:center;gap:.6rem;font-size:.86rem;font-weight:800;background:color-mix(in srgb,#22c55e 12%,var(--card))}
.vendor-commission-breakdown-head .vc-label{flex:1;min-width:0}
.vc-pill{flex:none;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:color-mix(in srgb,#22c55e 18%,var(--card));color:var(--primary)}
.vc-ico{flex:none;width:2.1rem;height:2.1rem;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;background:color-mix(in srgb,#22c55e 18%,var(--card));color:#15803d}
.vendor-commission-breakdown-list{max-height:none;overflow:visible;display:flex;flex-direction:column;gap:.7rem}
.vendor-commission-item{padding:0;border:1px solid color-mix(in srgb,#22c55e 22%,var(--border))!important;border-radius:16px;background:var(--card);overflow:hidden}
.vendor-commission-item-top{align-items:center;padding:.75rem .8rem;background:color-mix(in srgb,#22c55e 11%,var(--card));gap:.65rem}
.vendor-commission-item-top .vc-top-text{flex:1;min-width:0}
.vendor-commission-item-top .vc-ico{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:13px}
.vendor-commission-item-title{font-size:.98rem;overflow-wrap:anywhere}
.vendor-commission-item-top>strong{flex:none;padding:.3rem .65rem;border-radius:999px;font-size:.92rem;background:color-mix(in srgb,#22c55e 20%,var(--card));color:#166534;white-space:nowrap}
.vendor-commission-buyer,.vendor-commission-products li,.vendor-commission-math{display:flex;align-items:center;gap:.6rem;margin:.5rem .65rem 0;padding:.45rem .55rem;border-radius:12px;border-top:0;font-size:.82rem}
.vendor-commission-item>:last-child{margin-bottom:.65rem}
.vendor-commission-buyer{background:color-mix(in srgb,#3b82f6 11%,var(--card))}
.vendor-commission-buyer .vc-ico{background:color-mix(in srgb,#3b82f6 18%,var(--card));color:#1d4ed8}
.vendor-commission-buyer strong{min-width:0;overflow-wrap:anywhere;padding:.15rem .55rem;border-radius:999px;background:color-mix(in srgb,#3b82f6 14%,var(--card))}
.vendor-commission-products{margin:0}
.vendor-commission-products li{background:transparent;border-bottom:1px dashed var(--border);border-radius:0;padding:.35rem .1rem;margin:.5rem .65rem 0}
.vendor-commission-products li .vc-ico{background:color-mix(in srgb,#8b5cf6 16%,var(--card));color:#6d28d9}
.vendor-commission-math.vc-transport{background:transparent;border-bottom:1px dashed var(--border);border-radius:0;padding:.35rem .1rem}
.vendor-commission-math.vc-transport .vc-ico{background:color-mix(in srgb,#f59e0b 18%,var(--card));color:#b45309}
.vendor-commission-math.vc-commission{background:color-mix(in srgb,#f43f5e 11%,var(--card))}
.vendor-commission-math.vc-commission .vc-ico{background:color-mix(in srgb,#f43f5e 17%,var(--card));color:#be123c}
.vendor-commission-math.vc-commission strong{color:#be123c;text-align:right;font-weight:800}
.vendor-commission-math .vc-label,.vendor-commission-products .vc-label{flex:1;min-width:0;overflow-wrap:anywhere}
.vendor-commission-products .vc-amt,.vendor-commission-math.vc-transport>strong{font-weight:800;white-space:nowrap;margin-left:auto}
.vendor-commission-math.vc-commission{flex-wrap:wrap;justify-content:flex-start;font-size:.78rem}.vendor-commission-math.vc-commission .vc-label{flex:1 1 auto;overflow-wrap:normal;white-space:nowrap;text-align:left}.vendor-commission-math.vc-commission>strong{white-space:nowrap;flex:0 0 auto;margin-left:auto}
.vendor-commission-total{display:flex;align-items:center;gap:.7rem;padding:.8rem .85rem;border-radius:16px;background:color-mix(in srgb,#22c55e 17%,var(--card));border:1px solid color-mix(in srgb,#22c55e 26%,var(--border))}
.vendor-commission-total .vc-top-text{flex:1;min-width:0;display:flex;flex-direction:column}
.vendor-commission-total .vc-top-text span{font-size:.92rem;font-weight:800}
.vendor-commission-total small{font-size:.76rem;font-weight:500;color:var(--text-muted)}
.vendor-commission-total .vc-ico{width:2.6rem;height:2.6rem;font-size:1.05rem;border-radius:50%}
.vendor-commission-total>strong{flex:none;font-size:1.2rem;font-weight:900;padding:.35rem .7rem;border-radius:999px;background:color-mix(in srgb,#22c55e 24%,var(--card));color:#166534}
.vendor-commission-pay-now{margin-top:0!important;min-height:3.2rem;font-size:1rem;border-radius:14px}
@media(max-width:380px){.vendor-commission-total>strong{font-size:1.05rem}.vendor-commission-item-top .vc-ico{display:none}}
:root[data-theme="dark"] .vc-ico,:root[data-theme="black"] .vc-ico{filter:brightness(1.15)}
:root[data-theme="dark"] .vendor-commission-item-top>strong,:root[data-theme="black"] .vendor-commission-item-top>strong,:root[data-theme="dark"] .vendor-commission-total>strong,:root[data-theme="black"] .vendor-commission-total>strong{color:#86efac}
:root[data-theme="dark"] .vendor-commission-math.vc-commission strong,:root[data-theme="black"] .vendor-commission-math.vc-commission strong{color:#fda4af}
/* Product / package pages: delivery vs pickup as the same full-width selectable bars the cart uses. */
.delivery-method-row:not(.cart-delivery *){--ct-g:var(--primary,#3fb97f);--ct-line:color-mix(in srgb,var(--text) 10%,transparent)}
.delivery-method-row:not(.cart-delivery *){display:grid!important;grid-template-columns:1fr;gap:.55rem!important;margin:.2rem 0 .9rem!important}
.delivery-method-row:not(.cart-delivery *) label{display:flex!important;align-items:center;gap:.7rem!important;min-height:3.4rem;padding:.6rem .85rem;border-radius:14px;border:1.5px solid var(--ct-line);background:var(--card);font-weight:700!important;cursor:pointer;color:var(--text)!important;font-size:.95rem;white-space:normal}
.delivery-method-row:not(.cart-delivery *) label:has(input:checked){border-color:var(--ct-g);background:color-mix(in srgb,var(--ct-g) 9%,var(--card))}
.delivery-method-row:not(.cart-delivery *) input[type=radio]{accent-color:var(--ct-g);width:1.25rem!important;height:1.25rem;flex:none}
.dyn-delivery-fields:not(.cart-delivery *) input[type=text],.dyn-delivery-fields:not(.cart-delivery *) input[type=tel]{min-height:3.1rem;border-radius:14px}
/* Product page price hero: the price you actually pay, big and clear. */
.product-price-hero{margin:.2rem 0 .9rem;padding:.85rem 1rem;border-radius:16px;background:color-mix(in srgb,var(--primary,#3fb97f) 9%,var(--card));border:1px solid color-mix(in srgb,var(--primary,#3fb97f) 22%,var(--border))}
.pph-label{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.pph-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .7rem;margin-top:.2rem}
.pph-now{font-size:1.9rem;font-weight:900;line-height:1.1;color:var(--primary,#3fb97f);font-variant-numeric:tabular-nums}
.pph-was{font-size:1rem;color:var(--text-muted);text-decoration:line-through;font-weight:600}
.pph-save{font-size:.76rem;font-weight:800;padding:.2rem .55rem;border-radius:999px;background:color-mix(in srgb,#f43f5e 14%,var(--card));color:#be123c}
.selected-variant-summary>strong{font-size:1.15rem;font-weight:900;color:var(--primary,#3fb97f);white-space:nowrap}
#serviceTotalPreview{font-size:1rem;font-weight:700;color:var(--text)!important;padding:.55rem .75rem;border-radius:12px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.product-variant-choice small{font-weight:800;color:var(--primary,#3fb97f)}
/* Product page: calmer info block, About folded into a dropdown. */
.product-detail-info{display:flex;flex-direction:column;gap:.45rem;margin-top:.5rem}
.product-detail-info>p{margin:0}
.pd-chip{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;text-transform:capitalize;background:color-mix(in srgb,var(--primary,#3fb97f) 12%,var(--card));color:var(--primary,#3fb97f)}
.pd-about{border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,var(--card));overflow:hidden}
.pd-about>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .85rem;font-weight:800;font-size:.92rem}
.pd-about>summary::-webkit-details-marker{display:none}
.pd-about>summary i:first-child{color:var(--primary,#3fb97f);margin-right:.35rem}
.pd-about-chev{transition:transform .2s;color:var(--text-muted)}
.pd-about[open] .pd-about-chev{transform:rotate(180deg)}
.pd-about-body{padding:0 .85rem .8rem;line-height:1.55;font-size:.92rem}
.vendor-commission-item-top{cursor:pointer;-webkit-tap-highlight-color:transparent}
.vc-item-chev{flex:none;color:var(--text-muted);transition:transform .2s}
.vendor-commission-item:not(.vc-collapsed) .vc-item-chev{transform:rotate(180deg)}
.vendor-commission-item.vc-collapsed .vc-item-body{display:none}
/* Delivery / order form: clearly labelled, clearly visible fields. */
.df-label{display:flex;align-items:center;gap:.4rem;margin:.7rem 0 .3rem!important;font-size:.82rem;font-weight:800;color:var(--text)}
.df-label i{color:var(--primary,#3fb97f)}
.df-hint{font-weight:500;color:var(--text-muted)}
.dyn-delivery-fields input[type=text],.dyn-delivery-fields input[type=tel],.pd-note-box textarea{width:100%;border:1.5px solid color-mix(in srgb,var(--primary,#3fb97f) 45%,var(--border))!important;background:color-mix(in srgb,var(--primary,#3fb97f) 6%,var(--card))!important;border-radius:14px;color:var(--text);box-shadow:0 1px 0 color-mix(in srgb,var(--primary,#3fb97f) 10%,transparent)}
.dyn-delivery-fields input[type=text]::placeholder,.dyn-delivery-fields input[type=tel]::placeholder,.pd-note-box textarea::placeholder{color:color-mix(in srgb,var(--text) 45%,transparent)}
.dyn-delivery-fields input:focus,.pd-note-box textarea:focus{outline:0;border-color:var(--primary,#3fb97f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#3fb97f) 22%,transparent)}
.pd-note-box{margin:.4rem 0 .8rem}
.pd-note-box textarea{padding:.7rem .85rem;min-height:4.2rem}
.pd-qty-row{display:flex;gap:.7rem;align-items:stretch;margin:.4rem 0 .9rem}
.pd-qty-box{flex:none}
.pd-qty-box .df-label{margin-top:0!important}
.pd-qty-box input{width:5.2rem!important;min-height:3rem;text-align:center;font-weight:800;border-radius:14px}
.pd-total-box{flex:1;min-width:0;display:flex;align-items:flex-end}
.pd-total-box #serviceTotalPreview{width:100%;margin:0}
.pd-step-title{margin:.2rem 0 .1rem;font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:.45rem}
.pd-step-title i{color:var(--primary,#3fb97f)}
.pd-buy-actions{gap:.6rem;margin-top:.5rem}
.pd-buy-actions .btn{flex:1;min-height:3.1rem;justify-content:center;border-radius:14px;font-weight:800}
.pd-buy-actions .btn:first-child{flex:1.3}
.product-payment-plan-notice{margin:.5rem 0 .2rem!important}
/* Commission breakdown: neutral surfaces (no per-row colour), only the amounts keep an accent. */
.vendor-commission-breakdown>.vendor-commission-breakdown-head{background:color-mix(in srgb,var(--text) 5%,var(--card))}
.vc-pill{background:color-mix(in srgb,var(--text) 8%,var(--card));color:var(--text-muted)}
.vc-ico,.vendor-commission-buyer .vc-ico,.vendor-commission-products li .vc-ico,.vendor-commission-math.vc-transport .vc-ico,.vendor-commission-math.vc-commission .vc-ico{background:color-mix(in srgb,var(--text) 8%,var(--card));color:var(--text-muted)}
.vendor-commission-item{border:1px solid var(--border)!important;background:var(--card)}
.vendor-commission-item-top{background:transparent}
.vendor-commission-item:not(.vc-collapsed) .vendor-commission-item-top{border-bottom:1px solid var(--border)}
.vendor-commission-item-top>strong{background:transparent;color:var(--text);padding:0}
.vendor-commission-buyer,.vendor-commission-math.vc-commission{background:transparent}
.vendor-commission-buyer strong{background:transparent;padding:0}
.vendor-commission-math.vc-commission{border-top:0;border-bottom:0}
.vendor-commission-math.vc-commission strong{color:var(--text)}
.vendor-commission-total{background:color-mix(in srgb,var(--text) 5%,var(--card));border:1px solid var(--border)}
.vendor-commission-total .vc-ico{background:color-mix(in srgb,var(--text) 8%,var(--card));color:var(--text-muted)}
.vendor-commission-total>strong{background:transparent;color:var(--primary,#3fb97f);padding:0}
:root[data-theme="dark"] .vendor-commission-item-top>strong,:root[data-theme="black"] .vendor-commission-item-top>strong,:root[data-theme="dark"] .vendor-commission-math.vc-commission strong,:root[data-theme="black"] .vendor-commission-math.vc-commission strong{color:var(--text)}
:root[data-theme="dark"] .vendor-commission-total>strong,:root[data-theme="black"] .vendor-commission-total>strong{color:#86efac}
/* Savings badge: warm amber instead of red. */
.pph-save{background:color-mix(in srgb,#f59e0b 24%,var(--card));color:#92400e;border:1px solid color-mix(in srgb,#f59e0b 40%,transparent)}
:root[data-theme="dark"] .pph-save,:root[data-theme="black"] .pph-save{background:color-mix(in srgb,#f59e0b 20%,#111);color:#fcd34d;border-color:color-mix(in srgb,#f59e0b 45%,transparent)}
:root[data-theme="dark"] .pph-now,:root[data-theme="black"] .pph-now{color:#4ade80}
/* Order progress: each stage has its own colour (placed amber, confirmed blue, out for delivery purple, delivered green). */
.od-tracker .od-step:nth-child(1){--st:#f59e0b}
.od-tracker .od-step:nth-child(2){--st:#3b82f6}
.od-tracker .od-step:nth-child(3){--st:#8b5cf6}
.od-tracker .od-step:nth-child(4){--st:#16a34a}
.od-step.is-done .od-step-dot,.od-step.is-current .od-step-dot{background:var(--st);color:#fff}
.od-step.is-current .od-step-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--st) 25%,transparent)}
.od-step.is-done::before,.od-step.is-current::before{border-top-color:var(--st)}
.od-step.is-done .od-step-label,.od-step.is-current .od-step-label{color:var(--st);font-weight:700}
:root[data-theme="dark"] .od-tracker .od-step:nth-child(1),:root[data-theme="black"] .od-tracker .od-step:nth-child(1){--st:#fbbf24}
:root[data-theme="dark"] .od-tracker .od-step:nth-child(2),:root[data-theme="black"] .od-tracker .od-step:nth-child(2){--st:#60a5fa}
:root[data-theme="dark"] .od-tracker .od-step:nth-child(3),:root[data-theme="black"] .od-tracker .od-step:nth-child(3){--st:#a78bfa}
:root[data-theme="dark"] .od-tracker .od-step:nth-child(4),:root[data-theme="black"] .od-tracker .od-step:nth-child(4){--st:#4ade80}
:root[data-theme="dark"] .od-step.is-done .od-step-dot,:root[data-theme="dark"] .od-step.is-current .od-step-dot,:root[data-theme="black"] .od-step.is-done .od-step-dot,:root[data-theme="black"] .od-step.is-current .od-step-dot{color:#0b0f14}
/* Order card: the pay-before/after notice sits beside the quantity; totals live only in the breakdown below. */
.pd-has-plan #serviceTotalPreview{display:none}
.pd-total-box{align-items:stretch}
.pd-total-box .product-payment-plan-notice{margin:0!important;width:100%;padding:.55rem .7rem;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:.15rem}
.pd-total-box .product-payment-plan-notice strong{font-size:.86rem}
.pd-total-box .product-payment-plan-notice span{font-size:.74rem;line-height:1.35}
#buyDeliveryFields .delivery-fee-line{display:none}
#buyDeliveryFields .price-breakdown-table{margin-top:.9rem}
.dyn-delivery-fields>p.muted{margin:.5rem 0 0}
/* Home category rail: "All" matches the other chips, with a plain green icon and the same light highlight. */
#app .levro-home-cat-all .levro-home-cat-icon{background:none!important;box-shadow:none!important;color:var(--primary,#3fb97f)!important;font-size:1rem!important}
#app .levro-home-cat-all .levro-home-cat-label{color:var(--text)!important}
/* Add / edit listing cards: sectioned, coloured, calmer. */
#productModal .modal-content,#packageModal .modal-content{padding:1rem .9rem 0}
#productModal h3,#packageModal h3{font-size:1.25rem;margin:.1rem 0 .6rem}
.lm-sec{--lm:#3b82f6;margin:.75rem 0;padding:.85rem .85rem .9rem;border-radius:18px;border:1px solid color-mix(in srgb,var(--lm) 28%,var(--border));background:color-mix(in srgb,var(--lm) 5%,var(--card))}
.lm-blue{--lm:#3b82f6}.lm-violet{--lm:#8b5cf6}.lm-green{--lm:#16a34a}.lm-amber{--lm:#f59e0b}.lm-pink{--lm:#ec4899}.lm-teal{--lm:#14b8a6}
.lm-sec-head{display:flex;align-items:center;gap:.65rem;margin-bottom:.5rem}
.lm-sec-head strong{display:block;font-size:.98rem}
.lm-sec-head small{display:block;color:var(--text-muted);font-size:.74rem;margin-top:.05rem}
.lm-ico{flex:none;width:2.2rem;height:2.2rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;background:color-mix(in srgb,var(--lm) 18%,var(--card));color:var(--lm)}
.lm-sec label{font-size:.8rem;font-weight:700}
.lm-sec .listing-billing-choice,.lm-sec .prod-delivery-settings,.lm-sec .listing-payment-timing-settings{margin-top:.5rem}
.lm-more{margin:.75rem 0;border:1px dashed var(--border);border-radius:16px;padding:.1rem .85rem}
.lm-more>summary{list-style:none;cursor:pointer;padding:.7rem 0;font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:.5rem}
.lm-more>summary::-webkit-details-marker{display:none}
.lm-more>summary i{color:var(--primary,#3fb97f)}
.lm-more>summary small{margin-left:auto;font-weight:500;color:var(--text-muted)}
.lm-more[open]>summary{border-bottom:1px solid var(--border);margin-bottom:.6rem}
.lm-actions{position:sticky;bottom:0;z-index:3;justify-content:flex-end;gap:.6rem;margin:.9rem -.9rem 0!important;padding:.75rem .9rem calc(.75rem + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--card) 82%,transparent);border-top:1px solid var(--border)}
.lm-actions .btn{min-height:2.8rem;border-radius:12px}
.lm-sec .listing-billing-choice,.lm-sec .prod-delivery-settings,.lm-sec .listing-payment-timing-settings{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.lm-sec .prod-delivery-settings,.lm-sec .listing-payment-timing-settings{margin-top:.7rem}
/* ==========================================================================
   WIDE SCREENS + LANDSCAPE
   Laptops, desktops, tablets and phones held sideways get a left navigation
   rail (every bottom-bar item stays reachable), centred content and roomier grids.
   ========================================================================== */
@media (min-width:900px), (orientation:landscape) and (max-height:560px) and (min-width:560px){
  :root{--rail:92px}
  body{padding-left:var(--rail)!important;padding-bottom:1.5rem!important}
  header{left:var(--rail)!important;width:auto!important;right:0!important}
  #bottomNav,#bottomNav.has-add,#bottomNav.buyer-no-add,#bottomNav.nav-scroll-hide,#bottomNav.nav-scroll-shrink{
    position:fixed!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;
    width:var(--rail)!important;height:100vh!important;height:100dvh!important;min-height:0!important;max-width:none!important;margin:0!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important;gap:.3rem!important;
    padding:.8rem .45rem!important;border-radius:0!important;border:0!important;border-right:1px solid var(--border)!important;
    background:var(--card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
    transform:none!important;opacity:1!important;grid-template-columns:none!important;overflow-y:auto;z-index:210!important}
  #bottomNav .bn-group{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;flex:0 0 auto!important;gap:.3rem!important;grid-template-columns:none!important;min-width:0!important}
  #bottomNav .bottom-nav-item,#bottomNav.has-add .bottom-nav-item{
    width:100%!important;height:auto!important;min-height:58px!important;padding:.45rem .2rem!important;border-radius:14px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.18rem!important;
    color:var(--text-muted)!important;background:transparent!important}
  #bottomNav .bottom-nav-item i,#bottomNav .bottom-nav-item .bn-icon{color:inherit!important;font-size:1.2rem!important}
  #bottomNav .bottom-nav-item>span:last-child,#bottomNav.has-add .bottom-nav-item>span:last-child{font-size:.66rem!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #bottomNav .bottom-nav-item:hover{background:color-mix(in srgb,var(--text) 6%,transparent)!important}
  #bottomNav .bottom-nav-item.active{background:color-mix(in srgb,var(--primary) 14%,transparent)!important;color:var(--primary)!important}
  #bottomNav .bottom-nav-item.active i,#bottomNav .bottom-nav-item.active .bn-icon{color:var(--primary)!important}
  #bottomNav .bottom-nav-add{position:static!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;min-height:64px!important;margin:.35rem 0!important;padding:.5rem .2rem!important;border-radius:16px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:.15rem!important;background:var(--primary)!important;color:#fff!important;box-shadow:none!important;font-size:.62rem!important}
  #bottomNav .bottom-nav-add .bn-icon,#bottomNav .bottom-nav-add i{color:#fff!important;font-size:1.15rem!important}
  #bottomNav .bn-badge{right:.55rem!important}
  #app{max-width:1400px!important;margin-left:auto!important;margin-right:auto!important}
}
@media (min-width:900px), (orientation:landscape) and (max-height:560px) and (min-width:560px){
  /* Product grids: real photos, auto-fitting columns */
  #app .grid:has(> .product-card-wrap){grid-template-columns:repeat(auto-fill,minmax(205px,1fr))!important;gap:1rem!important;grid-auto-rows:auto!important;align-items:stretch!important}
  #app .grid:has(> .product-card-wrap) > .product-card-wrap{aspect-ratio:auto!important;height:auto!important;display:flex!important}
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card{display:flex!important;flex-direction:column!important;grid-template-rows:none!important;aspect-ratio:auto!important;height:auto!important;max-height:none!important;flex:1 1 auto!important;padding:.6rem!important;overflow:hidden!important}
  #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card .product-img{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1/1!important;flex:0 0 auto!important;border-radius:12px!important;overflow:hidden!important}
  #app .grid:has(> .product-card-wrap) .product-card-total-line{padding-right:5.2rem!important}
  #app .grid:has(> .product-card-wrap) .product-img img{width:100%!important;height:100%!important;object-fit:cover!important}
  #app .grid:has(> .product-card-wrap) .product-card-wrap h4{font-size:.92rem!important;line-height:1.2!important;min-height:2.2rem!important}
  #app .grid:has(> .product-card-wrap) .product-card-compact-footer{margin-top:auto!important}
  /* Horizontal rails: fixed card width, bigger photos, visible thin scrollbar for mouse users */
  #app .hscroll.trending-scroll .product-card-wrap{flex:0 0 232px!important;width:232px!important}
  #app .hscroll.trending-scroll .product-img{height:11.5rem!important;min-height:11.5rem!important;max-height:11.5rem!important;flex-basis:11.5rem!important}
  .hscroll{scrollbar-width:thin!important;padding-bottom:.6rem!important;cursor:grab}
  .hscroll::-webkit-scrollbar{display:block!important;height:8px!important}
  .hscroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 22%,transparent);border-radius:8px}
  .hscroll.is-dragging{cursor:grabbing;scroll-snap-type:none!important}
  .hscroll.is-dragging *{pointer-events:none}
  /* Banner carousel: sized so it fits the screen height too */
  #app .home-promotional-carousel,#app .home-promotional-track{--slide-w:min(760px,64vw,calc(62vh * 1.7778))!important}
  /* Vendor cards */
  .vd-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:1rem!important}
  /* Modals and sheets: centred cards, never full-width slabs */
  .modal-content{max-width:min(640px,92vw)}
  /* Page families that were built as narrow phone columns now use a comfortable reading width */
  .cart-page{max-width:760px!important}
  .order-history-page,.od-page{max-width:900px;margin-left:auto;margin-right:auto}
}
@media (min-width:1500px){
  #app .grid:has(> .product-card-wrap){grid-template-columns:repeat(auto-fill,minmax(225px,1fr))!important}
  .vd-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
}
@media (min-width:800px){
  /* Product page: photos and details on the left, the order card pinned on the right */
  #app:has(> .product-detail-card){display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);gap:1rem 1.25rem;align-items:start}
  #app:has(> .product-detail-card) > *{grid-column:1 / -1}
  #app:has(> .product-detail-card) > .product-detail-card{grid-column:1;grid-row:1 / span 3}
  #app:has(> .product-detail-card) > .product-detail-card + .card{grid-column:2;grid-row:1}
  #app:has(> .product-detail-card) > .product-detail-card + .card + .owner-listing-management{grid-column:2;grid-row:2}
  .product-detail-card .product-gallery-main{max-height:min(62vh,560px)}
}
@media (min-width:900px), (orientation:landscape) and (max-height:560px) and (min-width:560px){
  /* Full-screen chat hides the rail, so give the space back */
  body.chat-full-page{padding-left:0!important}
  body.chat-full-page header{left:0!important}
  body.chat-full-page #app{max-width:980px!important}
}
/* Quantity suggestion card + modal */
.oqp-card{margin:0 0 .8rem;padding:.9rem 1rem;border-radius:18px;border:1px solid color-mix(in srgb,#3b82f6 35%,var(--border));background:color-mix(in srgb,#3b82f6 8%,var(--card))}
.oqp-wait{border-color:color-mix(in srgb,#f59e0b 38%,var(--border));background:color-mix(in srgb,#f59e0b 8%,var(--card))}
.oqp-head{display:flex;align-items:center;gap:.7rem}
.oqp-head strong{display:block;font-size:.98rem}
.oqp-head small{display:block;color:var(--text-muted);font-size:.78rem}
.oqp-ico{flex:none;width:2.4rem;height:2.4rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,#3b82f6 18%,var(--card));color:#2563eb}
.oqp-wait .oqp-ico{background:color-mix(in srgb,#f59e0b 20%,var(--card));color:#b45309}
.oqp-list{list-style:none;margin:.7rem 0 .2rem;padding:0}
.oqp-list li{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem 0;border-bottom:1px dashed var(--border);font-size:.9rem}
.oqp-list li:last-child{border-bottom:0}
.oqp-list s{color:var(--text-muted)}
.oqp-note{margin:.5rem 0 0;font-style:italic;color:var(--text-muted);font-size:.86rem}
.oqp-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.8rem}
.sq-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed var(--border)}
.sq-name{flex:1;min-width:0}.sq-name strong{display:block}.sq-name small{display:block;color:var(--text-muted);font-size:.76rem}
.sq-row input{width:5rem!important;text-align:center;font-weight:800;min-height:2.8rem;border-radius:12px}
/* Vendor cards (directory + Featured Vendors): round profile picture inside the card, light green follow button. */
#app .vd-card{align-items:center;text-align:center;padding:1.05rem .8rem .85rem;gap:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--primary,#3fb97f) 6%,var(--card)),var(--card) 55%)}
#app .vd-card .vd-cover{position:relative;flex:none;width:5.9rem!important;height:5.9rem!important;min-height:0!important;aspect-ratio:1/1!important;border-radius:50%!important;margin:0 auto .55rem!important;overflow:visible!important;background:transparent;box-shadow:0 0 0 3px var(--card),0 0 0 5px color-mix(in srgb,var(--primary,#3fb97f) 35%,transparent)}
#app .vd-card .vd-cover>img,#app .vd-card .vd-cover .vd-fallback,#app .vd-card .vd-cover .vd-initials{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover;overflow:hidden}
#app .vd-card .vd-initials{inset:0}
#app .vd-card .vd-verified{top:auto!important;right:-.1rem!important;bottom:.05rem!important;left:auto!important;width:1.5rem!important;height:1.5rem!important;border:2px solid var(--card)}
#app .vd-card .vd-body{align-items:center;width:100%;padding:0!important;gap:.2rem}
#app .vd-card .vd-name{max-width:100%;font-size:.98rem}
#app .vd-card .vd-loc,#app .vd-card .vd-cat{justify-content:center;max-width:100%}
#app .vd-card .vd-follow{align-self:stretch;width:100%;min-height:2.5rem;margin:.55rem 0 .35rem!important;border:0!important;border-radius:12px!important;background:color-mix(in srgb,var(--primary,#3fb97f) 16%,var(--card))!important;color:var(--primary,#3fb97f)!important;font-weight:800;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary,#3fb97f) 22%,transparent)}
#app .vd-card .vd-follow:active{background:color-mix(in srgb,var(--primary,#3fb97f) 26%,var(--card))!important}
#app .vd-card .vd-follow.following{background:color-mix(in srgb,var(--text) 6%,var(--card))!important;color:var(--text-muted)!important;box-shadow:inset 0 0 0 1px var(--border)}
#app .vd-card .vd-meta{justify-content:center;gap:.7rem;flex-wrap:wrap}
#app .top-rated-vendors-scroll .vd-card{flex:0 0 11.8rem;width:11.8rem}
#app .top-rated-vendors-scroll .vd-card .vd-cover{width:5rem!important;height:5rem!important}
#app .vd-grid.vendors-list-mode .vd-card{flex-direction:row;text-align:left;align-items:center;padding:.8rem .9rem;gap:.8rem}
#app .vd-grid.vendors-list-mode .vd-card .vd-cover{width:4.6rem!important;height:4.6rem!important;margin:0!important}
#app .vd-grid.vendors-list-mode .vd-card .vd-body{align-items:flex-start;flex:1}
#app .vd-grid.vendors-list-mode .vd-card .vd-loc,#app .vd-grid.vendors-list-mode .vd-card .vd-cat{justify-content:flex-start}
#app .vd-grid.vendors-list-mode .vd-card .vd-follow{align-self:flex-start;width:auto;padding:0 1.4rem}
/* Profile drawer rows: coloured icon tile, label, badge, chevron. */
#profilePanel .vp-row,.profile-panel-scroll .vp-row{display:flex!important;align-items:center;gap:.8rem;width:100%;min-height:3.3rem;padding:.55rem .35rem!important;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left;font-size:1rem;font-weight:700;color:var(--text)!important}
.profile-panel-scroll .vp-row:last-child{border-bottom:0}
.vp-ico{--vp:#64748b;flex:none;width:2.3rem;height:2.3rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;background:color-mix(in srgb,var(--vp) 15%,var(--card));color:var(--vp)}
.vp-green{--vp:#16a34a}.vp-blue{--vp:#3b82f6}.vp-amber{--vp:#f59e0b}.vp-violet{--vp:#8b5cf6}.vp-pink{--vp:#ec4899}.vp-teal{--vp:#14b8a6}.vp-slate{--vp:#64748b}
.vp-text{flex:1;min-width:0}
.vp-badge{flex:none;min-width:1.4rem;height:1.4rem;padding:0 .4rem;border-radius:999px;background:var(--danger,#ef4444);color:#fff;font-size:.74rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.vp-arrow{flex:none;color:var(--text-muted);font-size:.8rem}
/* Vendors map: calm basemap, rounded card, logo pins, soft popups and controls. */
.vmap-card{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,23,42,.12);background:var(--card)}
#vendorsMap{height:clamp(380px,66vh,680px)!important;border-radius:0!important}
.vmap-status{position:absolute;left:.7rem;right:3.6rem;bottom:.7rem;z-index:700;margin:0!important;padding:.5rem .8rem;border-radius:14px;font-size:.78rem!important;line-height:1.3!important;color:var(--text);background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(15,23,42,.14);pointer-events:none;max-width:max-content}
.vmap-status:empty{display:none}
.vmp{background:none;border:0}
.vmp-pin{position:relative;width:44px;height:44px;border-radius:50%;background:var(--primary,#3fb97f);border:3px solid #fff;box-shadow:0 6px 16px rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;transition:transform .15s ease}
.vmp-pin::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;background:var(--primary,#3fb97f);border-right:3px solid #fff;border-bottom:3px solid #fff;transform:translateX(-50%) rotate(45deg);border-radius:0 0 4px 0;z-index:-1}
.vmp-pin img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.vmp:hover .vmp-pin{transform:scale(1.1)}
.vmp-me{background:none;border:0}
.vmp-me-dot{position:absolute;inset:5px;border-radius:50%;background:#2563eb;border:3px solid #fff;box-shadow:0 2px 8px rgba(37,99,235,.55)}
.vmp-me-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,99,235,.28);animation:vmpPulse 2.2s ease-out infinite}
@keyframes vmpPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
#vendorsMap .leaflet-control-zoom{border:0!important;box-shadow:0 4px 14px rgba(15,23,42,.18)!important;border-radius:14px;overflow:hidden;margin:.7rem 0 0 .7rem!important}
#vendorsMap .leaflet-control-zoom a{width:2.4rem;height:2.4rem;line-height:2.3rem;font-size:1.2rem;color:var(--text);background:color-mix(in srgb,var(--card) 94%,transparent);border-bottom:1px solid var(--border)}
#vendorsMap .leaflet-control-zoom a:last-child{border-bottom:0}
#vendorsMap .leaflet-popup-content-wrapper{border-radius:18px!important;box-shadow:0 14px 34px rgba(15,23,42,.28)!important;padding:.15rem}
#vendorsMap .leaflet-popup-content{margin:.7rem .8rem!important}
#vendorsMap .leaflet-popup-close-button{top:.45rem!important;right:.5rem!important}
#vendorsMap .vendor-map-popup-link{margin-top:.6rem;padding:.5rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--primary,#3fb97f) 14%,var(--card));justify-content:center;width:100%;box-sizing:border-box;text-decoration:none!important}
#vendorsMap .leaflet-control-attribution{border-radius:8px 0 0 0}
@media (prefers-reduced-motion:reduce){.vmp-me-pulse{animation:none}}
/* Requests page (vendor): calm header, compact green CTA, segmented tabs, spacious request rows. */
#app .vendor-requests-page{max-width:680px;margin:0 auto;padding:.4rem .15rem 1.5rem}
#app .vendor-requests-heading-row.vr-page-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1rem!important;margin:.4rem 0 1.1rem!important}
#app .vr-page-head h2{margin:0;font-size:1.85rem;display:flex;align-items:center;gap:.7rem}
#app .vr-page-head .vr-cta{align-self:center;min-height:3rem;padding:0 1.8rem;border-radius:16px;font-size:1rem;font-weight:800;background:var(--primary)!important;color:#fff!important;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 26%,transparent)}
#app .vendor-request-tabs.vr-tabs{display:grid!important;grid-template-columns:1fr 1fr;gap:.3rem!important;width:100%!important;max-width:none!important;margin:0 0 1.1rem!important;padding:.3rem!important;border-radius:18px!important;border:1px solid var(--border)!important;background:var(--card)!important;overflow:visible!important}
#app .vendor-request-tabs.vr-tabs .vendor-request-tab{font-size:.9rem;display:flex!important;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.4rem .6rem!important;border-radius:14px!important;border:1.5px solid transparent!important;background:transparent!important;color:var(--text-muted)!important;font-weight:700;box-shadow:none!important;flex:1 1 auto!important}
#app .vendor-request-tabs.vr-tabs .vendor-request-tab.active{background:color-mix(in srgb,var(--primary) 10%,var(--card))!important;border-color:var(--primary)!important;color:var(--primary)!important}
#app .vendor-request-tabs.vr-tabs .vendor-request-tab span{background:color-mix(in srgb,var(--primary) 16%,transparent)!important;color:var(--primary)!important;border-radius:999px;padding:0 .45rem;font-size:.75rem}
.vr-section{margin:0}
.vr-section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .95rem;margin-bottom:.9rem;border-radius:16px;background:color-mix(in srgb,var(--primary) 7%,var(--card));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));font-weight:800}
.vr-section>summary::-webkit-details-marker{display:none}
.vr-section>summary i{margin-right:.4rem;transition:transform .2s;color:var(--primary)}
.vr-section:not([open])>summary i{transform:rotate(-90deg)}
.vr-section>summary small{color:var(--primary);font-weight:600;font-size:.82rem}
.vr-list{display:flex;flex-direction:column;gap:.8rem}
.vr-item{border-radius:18px;background:var(--card);border:1px solid var(--border);box-shadow:0 2px 10px rgba(15,23,42,.05);overflow:hidden}
.vr-head{display:flex;align-items:center;gap:.85rem;width:100%;padding:1rem .95rem;border:0;background:transparent;text-align:left;color:var(--text);cursor:pointer;font:inherit}
.vr-avatar{flex:none;width:2.9rem!important;height:2.9rem!important;border-radius:50%!important;object-fit:cover}
.vr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.22rem}
.vr-title{font-size:1rem;line-height:1.25;overflow-wrap:anywhere}
.vr-desc{font-size:.86rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.78rem;color:var(--text-muted)}
.vr-meta i{margin-right:.3rem}
.vr-side{flex:none;align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.4rem}
.vr-chev{color:var(--text-muted);font-size:.85rem;margin:auto 0;transition:transform .2s}
.vr-expanded .vr-chev{transform:rotate(90deg)}
.vr-status{display:inline-flex;align-items:center;padding:.22rem .7rem;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap;background:color-mix(in srgb,#16a34a 14%,var(--card));color:#15803d}
.vr-prog{background:color-mix(in srgb,#3b82f6 14%,var(--card));color:#1d4ed8}
.vr-closed{background:color-mix(in srgb,#f97316 14%,var(--card));color:#c2410c}
:root[data-theme="dark"] .vr-status,:root[data-theme="black"] .vr-status{color:#86efac}
:root[data-theme="dark"] .vr-prog,:root[data-theme="black"] .vr-prog{color:#93c5fd}
:root[data-theme="dark"] .vr-closed,:root[data-theme="black"] .vr-closed{color:#fdba74}
.vr-body{display:none;padding:0 .95rem 1rem;border-top:1px dashed var(--border)}
.vr-expanded .vr-body{display:block}
.vr-body-meta{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 .4rem;font-size:.82rem}
.vr-full-desc{margin:.2rem 0 .6rem;line-height:1.5;font-size:.92rem}
#vendorsMap .leaflet-tile-pane{filter:saturate(.7) contrast(.93) brightness(1.04)}
:root[data-theme="dark"] #vendorsMap .leaflet-tile-pane,:root[data-theme="black"] #vendorsMap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.6) brightness(.85) contrast(.9)}
/* Vendors list cards: spread out (avatar | details | follow) instead of a stack with an empty right side. */
#app .vd-grid.vendors-list-mode .vd-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1rem;row-gap:.2rem;align-items:center;padding:1rem 1.1rem!important;text-align:left}
#app .vd-grid.vendors-list-mode .vd-card .vd-cover{grid-column:1;grid-row:1 / span 4;margin:0!important}
#app .vd-grid.vendors-list-mode .vd-card .vd-body{display:contents}
#app .vd-grid.vendors-list-mode .vd-card .vd-name{grid-column:2;grid-row:1;font-size:1.02rem}
#app .vd-grid.vendors-list-mode .vd-card .vd-loc{grid-column:2;grid-row:2;justify-content:flex-start}
#app .vd-grid.vendors-list-mode .vd-card .vd-cat{grid-column:2;grid-row:3;justify-content:flex-start}
#app .vd-grid.vendors-list-mode .vd-card .vd-meta{grid-column:2;grid-row:4;justify-content:flex-start;margin-top:.35rem}
#app .vd-grid.vendors-list-mode .vd-card .vd-follow{grid-column:3;grid-row:1 / span 4;align-self:center;width:auto!important;min-width:6.6rem;margin:0!important;padding:0 1.2rem}
.vd-followers[role="button"]{cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--primary) 40%,transparent);text-underline-offset:3px}
.storefront-stat-link[data-follow-count]{cursor:pointer}
/* Follower network page */
.fn-page{max-width:640px;margin:0 auto;padding:.4rem .15rem 1.5rem}
.fn-head{display:flex;align-items:center;gap:.8rem;margin:.3rem 0 1rem}
.fn-head h2{margin:0;font-size:1.5rem}.fn-head p{margin:.1rem 0 0;font-size:.85rem}
.fn-list{display:flex;flex-direction:column;gap:.7rem}
.fn-row{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:18px;background:var(--card);border:1px solid var(--border);box-shadow:0 2px 10px rgba(15,23,42,.05);cursor:pointer}
.fn-avatar{flex:none;width:3.2rem!important;height:3.2rem!important;border-radius:50%!important;object-fit:cover;box-shadow:0 0 0 2px var(--card),0 0 0 4px color-mix(in srgb,var(--primary) 30%,transparent)}
.fn-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.fn-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-copy .muted{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-tag{align-self:flex-start;margin-top:.2rem;display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-following{background:color-mix(in srgb,#16a34a 14%,var(--card));color:#15803d}
.fn-mutual{background:color-mix(in srgb,#3b82f6 14%,var(--card));color:#1d4ed8}
.fn-wide{background:color-mix(in srgb,#8b5cf6 14%,var(--card));color:#6d28d9}
.fn-me{background:color-mix(in srgb,var(--text) 8%,var(--card));color:var(--text-muted)}
:root[data-theme="dark"] .fn-following,:root[data-theme="black"] .fn-following{color:#86efac}
:root[data-theme="dark"] .fn-mutual,:root[data-theme="black"] .fn-mutual{color:#93c5fd}
:root[data-theme="dark"] .fn-wide,:root[data-theme="black"] .fn-wide{color:#c4b5fd}
.fn-follow{flex:none;min-height:2.4rem;padding:0 1.1rem;border:0;border-radius:12px;background:color-mix(in srgb,var(--primary,#3fb97f) 16%,var(--card));color:var(--primary,#3fb97f);font-weight:800;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary,#3fb97f) 22%,transparent)}
.fn-follow.following{background:color-mix(in srgb,var(--text) 6%,var(--card));color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--border)}
#app .vd-grid.vendors-list-mode .vd-card .vd-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
.fn-tag{white-space:normal;line-height:1.25}
/* Professional, restrained palette: neutral icons and surfaces, one green accent. */
.vp-ico,.vp-green,.vp-blue,.vp-amber,.vp-violet,.vp-pink,.vp-teal,.vp-slate{--vp:var(--text-muted);background:transparent!important;color:var(--text)!important;width:1.9rem;height:2rem;font-size:1.05rem;border-radius:0}
.profile-panel-scroll .vp-row{min-height:3.1rem}
.profile-panel-scroll .vp-arrow{opacity:.55}
.vp-badge{background:var(--primary,#3fb97f)!important}
.lm-sec,.lm-blue,.lm-violet,.lm-green,.lm-amber,.lm-pink,.lm-teal{--lm:#64748b}
.lm-sec{background:var(--card)!important;border-color:var(--border)!important}
.lm-ico{background:color-mix(in srgb,var(--text) 6%,var(--card))!important;color:var(--text)!important}
.fn-mutual,.fn-wide{background:color-mix(in srgb,var(--text) 7%,var(--card))!important;color:var(--text-muted)!important}
:root[data-theme="dark"] .fn-mutual,:root[data-theme="black"] .fn-mutual,:root[data-theme="dark"] .fn-wide,:root[data-theme="black"] .fn-wide{color:var(--text-muted)!important}
.oqp-card{border-color:var(--border)!important;background:var(--card)!important}
.oqp-ico,.oqp-wait .oqp-ico{background:color-mix(in srgb,var(--text) 7%,var(--card))!important;color:var(--text)!important}
.pph-save{background:color-mix(in srgb,var(--text) 7%,var(--card))!important;color:var(--text)!important;border-color:var(--border)!important}
/* Tab rails and chip rows scroll sideways only: no vertical wobble, no drifting out of place. */
.storefront-catalog-tabs,[class*="catalog-type-tabs"],.vl-tabs,.vendor-listing-tabs,.order-status-pills-rail,.levro-home-cat-rail,.vendor-request-tabs,.storefront-category-chips,.cat-row,.hscroll{overflow-y:hidden!important;overscroll-behavior-x:contain}
.catalog-type-tabs,.storefront-catalog-tabs,.vl-tabs,.vendor-listing-tabs{scrollbar-width:none}
.storefront-catalog-tabs{height:auto!important;max-height:none!important;min-height:3rem;align-items:center;padding-bottom:.35rem!important;flex-wrap:nowrap}
.storefront-catalog-tab{flex:0 0 auto}
/* Vendors page filter tabs: clean underline tabs instead of pills. */
#app .vendor-listing-tabs{display:flex!important;gap:1.6rem!important;margin:.4rem 0 1rem!important;padding:0!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow-x:auto!important;scrollbar-width:none}
#app .vendor-listing-tabs::-webkit-scrollbar{display:none}
#app .vendor-listing-tab{flex:0 0 auto!important;position:relative;min-height:0!important;padding:.2rem 0 .8rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--text-muted)!important;font-size:.95rem!important;font-weight:600!important;white-space:nowrap}
#app .vendor-listing-tab.active{color:var(--text)!important;font-weight:800!important}
#app .vendor-listing-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--primary,#3fb97f)}
/* Vendors page filter tabs (vd-seg): underline tabs. */
#app .vd-seg{display:flex!important;gap:1.7rem!important;margin:.2rem 0 1rem!important;padding:0!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;justify-content:flex-start!important}
#app .vd-seg::-webkit-scrollbar{display:none}
#app .vd-seg .vd-tab{flex:0 0 auto!important;position:relative;min-height:0!important;width:auto!important;padding:.2rem 0 .8rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--text-muted)!important;font-size:.95rem!important;font-weight:600!important;white-space:nowrap}
#app .vd-seg .vd-tab,#app .vd-seg .vd-tab.active{border-color:transparent!important;-webkit-text-fill-color:currentColor!important}
#app .vd-seg .vd-tab.active{color:var(--text)!important;font-weight:800!important;background:transparent!important}
#app .vd-seg .vd-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--primary,#3fb97f)}
/* Delivery fee workings + distinct pickup colour */
.fee-calc{margin-top:.7rem;padding:.75rem .85rem;border-radius:14px;border:1px solid var(--border);background:var(--card)}
.fee-calc-title{display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:800;margin-bottom:.5rem}
.fee-calc-title i{color:var(--primary,#3fb97f)}
.fee-calc-row{display:flex;justify-content:space-between;gap:.8rem;padding:.3rem 0;font-size:.84rem;border-bottom:1px dashed var(--border)}
.fee-calc-row:last-of-type{border-bottom:0}
.fee-calc-row strong{white-space:nowrap}
.fee-calc-sub{color:var(--text-muted)}
.fee-calc small{display:block;margin-top:.5rem;color:var(--text-muted);font-size:.74rem;line-height:1.4}
.delivery-method-row label:has(input[value="pickup"]:checked){border-color:color-mix(in srgb,var(--primary,#3fb97f) 55%,transparent)!important;background:color-mix(in srgb,var(--primary,#3fb97f) 5%,transparent)!important}
.delivery-method-row input[value="pickup"]{accent-color:var(--primary,#3fb97f)!important}
/* Selected variety: name + price on one line, long description tucked into a dropdown. */
.sv-card.selected-variant-summary{display:block!important;padding:.85rem 1rem}
.sv-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.sv-name{min-width:0;display:flex;flex-direction:column}
.sv-label{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.sv-name strong{font-size:1rem;overflow-wrap:anywhere}
.sv-price{flex:none;font-size:1.2rem;font-weight:900;color:var(--primary,#3fb97f)}
.sv-stock{font-size:.8rem;margin-top:.2rem}
.sv-details{margin-top:.55rem;border-top:1px dashed var(--border);padding-top:.5rem}
.sv-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:.86rem;font-weight:700}
.sv-details>summary::-webkit-details-marker{display:none}
.sv-details>summary i{color:var(--text-muted);transition:transform .2s}
.sv-details[open]>summary i{transform:rotate(180deg)}
.sv-details p{margin:.5rem 0 0;line-height:1.5;font-size:.88rem;white-space:pre-line}
.search-empty-actions .vl-add,.search-empty-actions .sr-retry{background:var(--primary,#3fb97f)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;border:0!important}
.search-empty-actions .vl-add i{color:#fff!important}
/* Delivery fee workings: collapsed by default; breakdown card gets a light tint; radios drawn by us so Android shows no square box. */
.price-breakdown-table{background:color-mix(in srgb,var(--primary,#3fb97f) 7%,var(--card))!important;border-color:color-mix(in srgb,var(--primary,#3fb97f) 22%,var(--border))!important}
.fee-calc{margin-top:.6rem;padding:0;border:0;background:transparent;border-top:1px dashed color-mix(in srgb,var(--primary,#3fb97f) 30%,var(--border));border-radius:0}
.fee-calc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .1rem .2rem;font-size:.84rem;font-weight:700;color:var(--primary,#3fb97f)}
.fee-calc>summary::-webkit-details-marker{display:none}
.fee-calc>summary i:first-child{margin-right:.4rem}
.fee-calc-chev{font-size:.75rem;transition:transform .2s}
.fee-calc[open] .fee-calc-chev{transform:rotate(180deg)}
.fee-calc-body{padding:.1rem .1rem .2rem}
.fee-calc-row{padding:.35rem 0}
#app .delivery-method-row label input[type=radio]{-webkit-appearance:none!important;appearance:none!important;flex:none;width:1.35rem!important;height:1.35rem!important;min-width:1.35rem!important;min-height:0!important;padding:0!important;margin:0!important;border:2px solid color-mix(in srgb,var(--text) 35%,transparent)!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;outline:0!important}
#app .delivery-method-row label input[type=radio]:checked{border-color:var(--primary,#3fb97f)!important;background:radial-gradient(circle,var(--primary,#3fb97f) 0 42%,transparent 46%)!important}
#app .delivery-method-row label input[value="pickup"]:checked{border-color:#2563eb!important;background:radial-gradient(circle,#2563eb 0 42%,transparent 46%)!important}
/* Product page: keep the green for actions only. Inputs get a plain outline; price breakdown gets a warm tint. */
.dyn-delivery-fields input[type=text],.dyn-delivery-fields input[type=tel],.pd-note-box textarea{background:var(--card)!important;border:1.5px solid color-mix(in srgb,var(--text) 22%,var(--border))!important;box-shadow:none!important}
.dyn-delivery-fields input:focus,.pd-note-box textarea:focus{border-color:var(--primary,#3fb97f)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#3fb97f) 16%,transparent)!important}
.price-breakdown-table{background:color-mix(in srgb,#f59e0b 9%,var(--card))!important;border-color:color-mix(in srgb,#f59e0b 32%,var(--border))!important}
.fee-calc{border-top-color:color-mix(in srgb,#f59e0b 40%,var(--border))}
.fee-calc>summary{color:#b45309}
:root[data-theme="dark"] .fee-calc>summary,:root[data-theme="black"] .fee-calc>summary{color:#fcd34d}
/* Order history page + its search / tabs. */
#app .order-history-card .order-history-item{display:block;font-size:.85rem !important;font-weight:500 !important;color:var(--text-muted) !important;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.order-history-page{max-width:640px;margin:0 auto}
.order-history-search-wrap{display:flex;align-items:center;gap:.55rem;height:2.7rem;padding:0 .9rem;margin:.6rem 0 .4rem;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.order-history-search-wrap i{color:var(--text-muted)}
.order-history-search-wrap input{flex:1;min-width:0;border:0 !important;background:transparent !important;box-shadow:none !important;outline:0;font:inherit;font-size:.92rem;color:var(--text);padding:0 !important;height:auto !important}
.order-history-search-wrap:focus-within{border-color:var(--primary)}
#app .order-history-tabs{display:flex !important;gap:1.1rem !important;background:transparent !important;padding:0 !important;border:0 !important;border-bottom:1px solid var(--border) !important;border-radius:0 !important;margin:.2rem 0 .6rem !important;box-shadow:none !important}
#app .order-history-tabs .catalog-type-tab{flex:0 0 auto !important;background:transparent !important;box-shadow:none !important;color:var(--text) !important;border-radius:0 !important;border-bottom:3px solid transparent !important;padding:.55rem .1rem !important;margin-bottom:-1px}
#app .order-history-tabs .catalog-type-tab.active{border-bottom-color:var(--primary) !important;color:var(--text) !important}
#app .order-history-tabs .tab-count{font-weight:500;color:var(--text-muted)}

/* Search page: All / Products / Vendors / Services / Packages filter pills. */
.search-page-filters{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:.1rem 0 .7rem;margin:0}
.search-page-filters::-webkit-scrollbar{display:none}
.search-page-filter{flex:0 0 auto;min-height:36px;padding:0 .95rem;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.search-page-filter.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--card));font-weight:700}
.search-page-head{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:max(.2rem,env(safe-area-inset-top))}
.search-page-results{padding-bottom:calc(var(--levro-kbd-h,0px) + 1.5rem)}
/* Keyboard open: the bottom bar and floating buttons step out of the way. The
   bar is moved off-screen (not display:none) so the layout never jumps. */
body.levro-kbd-open #bottomNav{transform:translate3d(0,110%,0) !important;visibility:hidden !important;pointer-events:none !important}
body.levro-kbd-open #aiChatFab,body.levro-kbd-open #cartFab{visibility:hidden !important;opacity:0 !important;pointer-events:none !important}

.product-reviews-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin:.7rem 0 .2rem;padding:.7rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.product-reviews-toggle i{color:var(--text-muted);font-size:.8rem}
.product-review-collapsible{margin-top:.5rem}
.product-review-collapsible.hidden{display:none}
.order-action-pair{display:flex;justify-content:space-between;align-items:center;gap:.75rem;width:100%}
#app .order-message-vendor-btn{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;max-width:none !important;margin:0 !important;min-height:46px;background:var(--primary) !important;background-image:none !important;border-color:var(--primary) !important;color:#fff !important;-webkit-text-fill-color:#fff !important;text-align:center}
#app .order-message-vendor-btn i{color:#fff !important}

/* Vendor order page: confirm payment is blue; message customer is wide and centred. */
#app .payment-confirm-btn,#app .btn.payment-confirm-btn{background:#2563eb !important;background-color:#2563eb !important;background-image:none !important;border-color:#2563eb !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
#app .order-buyer-contact-actions{width:100% !important;display:flex !important;justify-content:center !important}
#app .order-contact-message-btn{width:100% !important;max-width:none !important;justify-content:center !important;text-align:center !important;min-height:46px}

.admin-conv-list{display:flex;flex-direction:column;gap:.55rem}
.admin-conv-row{text-align:left;width:100%;cursor:pointer;display:flex;flex-direction:column;gap:.3rem;padding:.8rem .9rem}
.admin-conv-last{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#levroCallOverlay{position:fixed;inset:0;z-index:200000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem 1.2rem calc(2rem + env(safe-area-inset-bottom,0px));background:linear-gradient(160deg,#052e22,#3fb97f 55%,#0f172a);color:#fff;text-align:center}
#levroCallOverlay .lc-avatar{width:6.5rem;height:6.5rem;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:2.6rem;font-weight:800;box-shadow:0 0 0 0 rgba(255,255,255,.35);animation:lcPulse 1.8s ease-out infinite}
#levroCallOverlay.lc-connected .lc-avatar{animation:none}
@keyframes lcPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}100%{box-shadow:0 0 0 28px rgba(255,255,255,0)}}
#levroCallOverlay .lc-name{font-size:1.4rem;font-weight:800}
#levroCallOverlay .lc-status{opacity:.85;font-size:.95rem;min-height:1.3rem}
#levroCallOverlay .lc-actions{display:flex;gap:1.6rem;margin-top:1.4rem}
#levroCallOverlay .lc-btn{width:4rem;height:4rem;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;background:rgba(255,255,255,.18);cursor:pointer}
#levroCallOverlay .lc-btn.end,#levroCallOverlay .lc-btn.decline{background:#dc2626}
#levroCallOverlay .lc-btn.accept{background:#16a34a}
#levroCallOverlay .lc-btn.on{background:#fff;color:#0f172a}
#levroCallOverlay .lc-hint{font-size:.78rem;opacity:.7;max-width:20rem}

.order-contact-row{display:flex;gap:.6rem;width:100%;margin-top:.6rem}
.order-contact-row .btn,.order-contact-row .order-call-btn,.order-contact-row .order-contact-icon-btn{flex:1 1 0 !important;width:auto !important;min-width:0}
.order-call-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:.45rem;min-height:46px;border-radius:999px;border:1.5px solid var(--primary) !important;background:color-mix(in srgb,var(--primary) 10%,var(--card)) !important;color:var(--primary) !important;-webkit-text-fill-color:var(--primary) !important;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;padding:0 1rem}
.order-call-btn i{color:var(--primary) !important}
#app .order-buyer-contact-actions{margin-top:.6rem}

#levroCallOverlay .lc-actions{gap:3.6rem !important}
#app .order-call-btn,#app .btn.btn-sm.order-call-btn,#app .order-contact-row .order-call-btn{background:#2563eb !important;background-color:#2563eb !important;background-image:none !important;border:1.5px solid #2563eb !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
#app .order-call-btn i{color:#fff !important}
/* ---- levromart-leaderboard ---- */
/* ===== Leaderboard, points and referrals ===== */
.lb-page{--lb-gold:#e9a912;--lb-gold-2:#fbd45a;--lb-silver:#9aa6b6;--lb-silver-2:#dfe5ed;--lb-bronze:#b9703c;--lb-bronze-2:#efb88a;--lb-violet:#6d5ce8;--lb-violet-2:#8f81f5;--lb-sky:#4b9bf5;max-width:880px;margin:0 auto;padding:0 0 6.5rem}
.lb-page *{box-sizing:border-box}
.lb-hero{position:relative;overflow:hidden;border-radius:22px;padding:1.15rem 1.15rem 1.05rem;color:#fff;background:linear-gradient(135deg,#4b3fc9 0%,#6d5ce8 52%,#4b9bf5 130%);box-shadow:0 16px 36px rgba(75,63,201,.25);isolation:isolate}
.lb-hero:before,.lb-hero:after{content:"";position:absolute;border-radius:50%;z-index:-1;background:rgba(255,255,255,.1)}
.lb-hero:before{width:210px;height:210px;right:-70px;top:-90px}
.lb-hero:after{width:130px;height:130px;right:42px;bottom:-72px;background:rgba(255,255,255,.07)}
.lb-hero-top{display:flex;align-items:center;gap:.8rem}
.lb-hero-badge{flex:0 0 auto;width:3rem;height:3rem;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--lb-gold-2),var(--lb-gold));color:#5a3b00;font-size:1.35rem;box-shadow:0 8px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.55)}
.lb-hero h2{margin:0;font-size:1.28rem;line-height:1.2;color:#fff;font-weight:800;letter-spacing:-.01em}
.lb-hero p{margin:.15rem 0 0;font-size:.84rem;color:rgba(255,255,255,.86);line-height:1.4}
.lb-hero-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem}
.lb-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem;border-radius:999px;font-size:.76rem;font-weight:700;background:rgba(255,255,255,.17);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px)}
.lb-pill i{font-size:.72rem}
.lb-pill.gold{background:linear-gradient(135deg,var(--lb-gold-2),var(--lb-gold));color:#5a3b00;border-color:transparent}
#lbConfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4000}

.lb-tabs{display:flex;gap:.2rem;overflow-x:auto;margin:.9rem 0 .85rem;border-bottom:1px solid var(--border);scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.lb-tabs::-webkit-scrollbar{display:none}
.lb-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:.7rem .85rem;background:none;border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;color:var(--text-muted);font:inherit;font-size:.86rem;font-weight:650;cursor:pointer;white-space:nowrap}
.lb-tab i{font-size:.82rem;opacity:.85}
.lb-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.lb-tab:active{transform:scale(.97)}

.lb-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1rem;box-shadow:var(--shadow);margin-bottom:.85rem}
.lb-card h3{margin:0 0 .15rem;font-size:1rem;font-weight:750;color:var(--text)}
.lb-card .lb-sub{margin:0 0 .75rem;font-size:.8rem;color:var(--text-muted);line-height:1.45}
.lb-reward{display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;border-radius:16px;margin-bottom:.85rem;background:linear-gradient(135deg,color-mix(in srgb,var(--lb-gold) 15%,var(--card)),color-mix(in srgb,var(--lb-violet) 9%,var(--card)));border:1px solid color-mix(in srgb,var(--lb-gold) 34%,var(--border))}
.lb-reward-ico{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,var(--lb-gold-2),var(--lb-gold));color:#5a3b00;font-size:1.05rem}
.lb-reward strong{display:block;font-size:.9rem;color:var(--text)}
.lb-reward span{display:block;font-size:.78rem;color:var(--text-muted);line-height:1.4;margin-top:.1rem}

.lb-chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-bottom:.85rem;touch-action:pan-x}
.lb-chips::-webkit-scrollbar{display:none}
.lb-chip{flex:0 0 auto;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);font:inherit;font-size:.8rem;font-weight:650;cursor:pointer}
.lb-chip.active{background:color-mix(in srgb,var(--lb-violet) 11%,var(--card));border-color:color-mix(in srgb,var(--lb-violet) 45%,var(--border));color:color-mix(in srgb,var(--lb-violet) 85%,var(--text))}
.lb-chip.sep{margin-left:auto}

/* podium */
.lb-podium{display:grid;grid-template-columns:1fr 1.14fr 1fr;align-items:end;gap:.55rem;padding:.4rem .2rem 0;margin-bottom:.9rem}
.lb-pod{display:flex;flex-direction:column;align-items:center;min-width:0;cursor:pointer;text-align:center}
.lb-pod-crown{font-size:1.25rem;color:var(--lb-gold);height:1.5rem;filter:drop-shadow(0 3px 5px rgba(233,169,18,.45))}
.lb-pod-av{position:relative;border-radius:50%;padding:3px;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 8px 18px color-mix(in srgb,var(--c2) 40%,transparent)}
.lb-pod-av img,.lb-pod-av .avatar-circle{display:block;border-radius:50%;background:var(--card);object-fit:cover;border:2px solid var(--card)}
.lb-pod.first .lb-pod-av{--sz:5.1rem}.lb-pod.second .lb-pod-av,.lb-pod.third .lb-pod-av{--sz:4rem}
.lb-pod-av img,.lb-pod-av .avatar-circle{width:var(--sz)!important;height:var(--sz)!important}
.lb-pod-medal{position:absolute;right:-.15rem;bottom:-.15rem;width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(145deg,var(--c1),var(--c2));border:2px solid var(--card);box-shadow:0 3px 8px rgba(0,0,0,.2)}
.lb-pod-name{margin-top:.5rem;max-width:100%;font-size:.8rem;font-weight:750;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pod-pts{font-size:.76rem;font-weight:700;color:var(--text-muted);margin-top:.05rem}
.lb-pod-pts b{font-size:.98rem;color:var(--text);font-variant-numeric:tabular-nums}
.lb-pod-block{width:100%;margin-top:.55rem;border-radius:14px 14px 0 0;display:grid;place-items:start center;padding-top:.45rem;color:#fff;font-size:1.5rem;font-weight:850;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);position:relative;overflow:hidden}
.lb-pod.first .lb-pod-block{height:5.6rem}.lb-pod.second .lb-pod-block{height:4.2rem}.lb-pod.third .lb-pod-block{height:3.3rem}
.lb-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.lb-pod.first{--c1:var(--lb-gold-2);--c2:var(--lb-gold)}
.lb-pod.second{--c1:var(--lb-silver-2);--c2:var(--lb-silver)}
.lb-pod.third{--c1:var(--lb-bronze-2);--c2:var(--lb-bronze)}
.lb-pod.first .lb-pod-block{color:#5a3b00}.lb-pod.second .lb-pod-block{color:#3b4656}.lb-pod.third .lb-pod-block{color:#5b3314}

/* my position */
.lb-me{display:flex;align-items:center;gap:.8rem;padding:.85rem .95rem;border-radius:18px;margin-bottom:.85rem;background:linear-gradient(135deg,color-mix(in srgb,var(--lb-violet) 12%,var(--card)),color-mix(in srgb,var(--lb-sky) 8%,var(--card)));border:1px solid color-mix(in srgb,var(--lb-violet) 30%,var(--border))}
.lb-me-rank{flex:0 0 auto;min-width:2.9rem;height:2.9rem;border-radius:14px;display:grid;place-items:center;font-weight:850;font-size:1.05rem;color:#fff;background:linear-gradient(145deg,var(--lb-violet-2),var(--lb-violet));padding:0 .3rem}
.lb-me-copy{min-width:0;flex:1}
.lb-me-copy strong{display:block;font-size:.92rem;color:var(--text)}
.lb-me-copy span{display:block;font-size:.78rem;color:var(--text-muted);margin-top:.08rem}
.lb-me-bar{height:7px;border-radius:99px;background:color-mix(in srgb,var(--lb-violet) 14%,var(--border));margin-top:.5rem;overflow:hidden}
.lb-me-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--lb-violet),var(--lb-sky))}
.lb-me-pts{flex:0 0 auto;text-align:right;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.lb-me-pts b{display:block;font-size:1.25rem;color:var(--text);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}

/* list */
.lb-list{display:flex;flex-direction:column;gap:.45rem}
.lb-row{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:16px;background:var(--card);border:1px solid var(--border);cursor:pointer;transition:transform .12s}
.lb-row:active{transform:scale(.99)}
.lb-row.me{border-color:color-mix(in srgb,var(--lb-violet) 50%,var(--border));background:color-mix(in srgb,var(--lb-violet) 7%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--lb-violet) 11%,transparent)}
.lb-rank{flex:0 0 1.9rem;text-align:center;font-weight:800;font-size:.92rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.lb-row .avatar-circle,.lb-row img.lb-av{width:2.7rem!important;height:2.7rem!important;border-radius:50%;object-fit:cover;flex:0 0 auto}
.lb-row-copy{min-width:0;flex:1}
.lb-row-copy strong{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text);min-width:0}
.lb-row-copy strong span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row-copy small{display:block;font-size:.74rem;color:var(--text-muted);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-tag{flex:0 0 auto;font-size:.62rem;font-weight:800;letter-spacing:.03em;padding:.12rem .42rem;border-radius:99px;text-transform:uppercase}
.lb-tag.you{background:var(--lb-violet);color:#fff}
.lb-fol{flex:0 0 auto;font-size:.72rem;color:#e11d48}
.lb-row-pts{flex:0 0 auto;text-align:right;font-size:.7rem;font-weight:700;color:var(--text-muted)}
.lb-row-pts b{display:block;font-size:1.02rem;color:var(--text);font-variant-numeric:tabular-nums}
.lb-gap{font-weight:650}
.lb-gap.up{color:#b45309}.lb-gap.down{color:#15803d}
.lb-empty{padding:1.6rem 1rem;text-align:center;color:var(--text-muted)}
.lb-empty i{display:block;font-size:1.8rem;margin-bottom:.6rem;color:var(--lb-violet)}
.lb-empty strong{display:block;color:var(--text);margin-bottom:.25rem}

/* my points */
.lb-total{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.lb-total-num{font-size:2.5rem;line-height:1;font-weight:850;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.lb-total-num small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.3rem}
.lb-tier{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:99px;font-size:.78rem;font-weight:750;background:color-mix(in srgb,var(--lb-violet) 11%,var(--card));color:color-mix(in srgb,var(--lb-violet) 85%,var(--text));border:1px solid color-mix(in srgb,var(--lb-violet) 28%,var(--border))}
.lb-tier-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden;margin-top:.85rem}
.lb-tier-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--lb-violet),var(--lb-sky))}
.lb-tier-note{font-size:.76rem;color:var(--text-muted);margin-top:.4rem}
.lb-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin-bottom:.85rem}
@media(min-width:620px){.lb-stats{grid-template-columns:repeat(4,1fr)}}
.lb-stat{padding:.8rem .85rem;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.lb-stat small{display:flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.lb-stat small i{font-size:.74rem}
.lb-stat b{display:block;font-size:1.5rem;margin-top:.25rem;color:var(--text);font-variant-numeric:tabular-nums}
.lb-stat:nth-child(1) small i{color:var(--lb-sky)}.lb-stat:nth-child(2) small i{color:var(--lb-violet)}.lb-stat:nth-child(3) small i{color:#16a34a}.lb-stat:nth-child(4) small i{color:var(--lb-gold)}
.lb-streaks{display:flex;gap:.55rem;margin-bottom:.85rem;flex-wrap:wrap}
.lb-streak{flex:1 1 9rem;display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.lb-streak i{width:2.1rem;height:2.1rem;border-radius:12px;display:grid;place-items:center;font-size:.95rem}
.lb-streak.fire i{background:color-mix(in srgb,#f97316 15%,var(--card));color:#ea580c}
.lb-streak.crown i{background:color-mix(in srgb,var(--lb-gold) 20%,var(--card));color:#b7791f}
.lb-streak b{display:block;font-size:1.05rem;color:var(--text)}
.lb-streak span{font-size:.74rem;color:var(--text-muted)}
.lb-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.lb-seg{display:inline-flex;padding:.2rem;border-radius:99px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.lb-seg{flex:0 0 auto}.lb-seg button{white-space:nowrap;border:0;background:none;font:inherit;font-size:.76rem;font-weight:700;color:var(--text-muted);padding:.32rem .75rem;border-radius:99px;cursor:pointer}
.lb-seg button.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.lb-chart-read{font-size:.8rem;color:var(--text-muted);min-height:1.2rem}
.lb-chart-read b{color:var(--text);font-size:.98rem}
.lb-chart{width:100%;height:170px;display:block;touch-action:manipulation}
.lb-bar{cursor:pointer;transform-box:fill-box;transform-origin:bottom}
.lb-bar rect.b{fill:color-mix(in srgb,var(--lb-violet) 45%,var(--card))}
.lb-bar rect.hit{fill:transparent}
.lb-bar.on rect.b,.lb-bar:hover rect.b{fill:var(--lb-violet)}
.lb-bar.today rect.b{fill:url(#lbBarGrad)}
.lb-axis text{font-size:9.5px;fill:var(--text-muted);text-anchor:middle}
.lb-grid line{stroke:var(--border);stroke-dasharray:3 4}
.lb-bd{display:flex;flex-direction:column;gap:.65rem}
.lb-bd-row{display:grid;grid-template-columns:2.1rem 1fr auto;gap:.3rem .65rem;align-items:center}
.lb-bd-ico{width:2.1rem;height:2.1rem;border-radius:12px;display:grid;place-items:center;font-size:.9rem;background:color-mix(in srgb,var(--lb-violet) 12%,var(--card));color:var(--lb-violet);grid-row:span 2}
.lb-bd-row strong{font-size:.86rem;color:var(--text)}
.lb-bd-row strong small{font-weight:600;color:var(--text-muted);margin-left:.3rem}
.lb-bd-row b{font-size:.92rem;color:var(--text);font-variant-numeric:tabular-nums}
.lb-bd-track{grid-column:2/4;height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden}
.lb-bd-track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--lb-violet),var(--lb-sky))}
.lb-act{display:flex;flex-direction:column}
.lb-act-row{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--border)}
.lb-act-row:last-child{border-bottom:0}
.lb-act-ico{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:12px;display:grid;place-items:center;font-size:.9rem;background:color-mix(in srgb,#16a34a 12%,var(--card));color:#15803d}
.lb-act-copy{min-width:0;flex:1}
.lb-act-copy strong{display:block;font-size:.86rem;color:var(--text)}
.lb-act-copy small{display:block;font-size:.74rem;color:var(--text-muted);margin-top:.06rem}
.lb-act-pts{font-weight:800;color:#15803d;font-size:.92rem;font-variant-numeric:tabular-nums}
.lb-act-pts.neg{color:#dc2626}

/* earn */
.lb-rule-group{margin-bottom:1rem}
.lb-rule-group h4{margin:0 0 .5rem;font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.lb-rule{display:flex;align-items:flex-start;gap:.75rem;padding:.8rem .85rem;border-radius:16px;background:var(--card);border:1px solid var(--border);margin-bottom:.45rem}
.lb-rule.top{border-color:color-mix(in srgb,var(--lb-gold) 50%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--lb-gold) 11%,var(--card)),var(--card))}
.lb-rule-ico{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:13px;display:grid;place-items:center;font-size:.95rem;background:color-mix(in srgb,var(--ic,var(--lb-violet)) 13%,var(--card));color:var(--ic,var(--lb-violet))}
.lb-rule-copy{min-width:0;flex:1}
.lb-rule-copy strong{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text)}
.lb-rule-copy p{margin:.18rem 0 0;font-size:.78rem;line-height:1.45;color:var(--text-muted)}
.lb-rule-pts{flex:0 0 auto;font-weight:850;font-size:1rem;color:var(--text);background:color-mix(in srgb,var(--ic,var(--lb-violet)) 10%,var(--card));padding:.2rem .6rem;border-radius:99px;font-variant-numeric:tabular-nums}
.lb-social{display:flex;gap:.55rem;flex-wrap:wrap}
.lb-social button{flex:1 1 8.5rem;display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;border-radius:14px;border:1px solid var(--border);background:var(--card);font:inherit;cursor:pointer;color:var(--text);font-weight:700;font-size:.86rem;text-align:left}
.lb-social button img{width:1.9rem;height:1.9rem;border-radius:9px;object-fit:cover}
.lb-social button small{display:block;font-size:.72rem;font-weight:700;color:var(--lb-violet)}
.lb-social button.done small{color:#15803d}
.lb-steps{margin:0 0 .8rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}
.lb-steps li{display:flex;gap:.65rem;align-items:flex-start;font-size:.84rem;line-height:1.45;color:var(--text)}
.lb-steps li span{flex:1;min-width:0}
.lb-steps li b{flex:0 0 1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-size:.74rem;font-weight:800;color:#fff;background:linear-gradient(145deg,var(--lb-violet-2),var(--lb-violet))}
.lb-steps a{font-weight:750;color:#15803d;text-decoration:underline}
.lb-wa{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;width:100%;text-decoration:none;background:#16a34a;color:#fff;border-radius:12px;padding:.7rem 1rem;font-weight:750}
.lb-apply input{flex:1 1 7rem!important;width:auto!important}
.lb-apply select{flex:0 0 7.2rem;width:7.2rem!important;border:1px solid var(--border);border-radius:12px;padding:0 .6rem;background:var(--input-bg);color:var(--text);font:inherit}
.lb-fair{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
.lb-fair li{display:flex;gap:.55rem;font-size:.8rem;line-height:1.45;color:var(--text-muted)}
.lb-fair li i{color:var(--lb-violet);margin-top:.18rem;font-size:.78rem}

/* refer */
.lb-code{text-align:center;padding:1.15rem 1rem;border-radius:20px;color:#fff;background:linear-gradient(135deg,#4b3fc9,#6d5ce8 55%,#4b9bf5 135%);box-shadow:0 14px 32px rgba(75,63,201,.24);margin-bottom:.85rem;position:relative;overflow:hidden}
.lb-code small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.lb-code-val{display:inline-flex;align-items:center;gap:.6rem;margin:.5rem 0 .35rem;padding:.5rem 1rem;border-radius:16px;border:2px dashed rgba(255,255,255,.55);background:rgba(255,255,255,.12);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:850;font-size:1.9rem;letter-spacing:.14em;color:#fff;cursor:pointer;user-select:all}
.lb-code p{margin:.2rem 0 .8rem;font-size:.8rem;color:rgba(255,255,255,.86)}
.lb-code-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.lb-code-actions button{display:inline-flex;align-items:center;gap:.45rem;border:0;border-radius:12px;padding:.6rem .95rem;font:inherit;font-weight:750;font-size:.84rem;cursor:pointer;background:#fff;color:#4b3fc9}
.lb-code-actions button.alt{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3)}
.lb-flow{display:flex;flex-direction:column;gap:.5rem}
.lb-flow-step{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.lb-flow-step i.ic{width:2.1rem;height:2.1rem;border-radius:11px;display:grid;place-items:center;font-size:.85rem;background:color-mix(in srgb,var(--lb-violet) 13%,var(--card));color:var(--lb-violet);flex:0 0 auto}
.lb-flow-step strong{font-size:.84rem;color:var(--text);display:block}
.lb-flow-step span{font-size:.75rem;color:var(--text-muted)}
.lb-flow-step em{margin-left:auto;font-style:normal;font-weight:850;color:#15803d;font-size:.9rem;white-space:nowrap}
.lb-apply{display:flex;gap:.5rem}
.lb-apply input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.lb-mini-list{display:flex;flex-direction:column}
.lb-mini{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-bottom:1px solid var(--border);font-size:.84rem;color:var(--text)}
.lb-mini:last-child{border-bottom:0}
.lb-mini i{width:1.9rem;height:1.9rem;border-radius:10px;display:grid;place-items:center;font-size:.8rem;background:color-mix(in srgb,var(--lb-sky) 13%,var(--card));color:#2563eb}
.lb-mini small{margin-left:auto;color:var(--text-muted);font-size:.74rem}

/* winners */
.lb-champ{position:relative;overflow:hidden;text-align:center;padding:1.2rem 1rem;border-radius:20px;margin-bottom:.85rem;background:linear-gradient(160deg,color-mix(in srgb,var(--lb-gold) 20%,var(--card)),color-mix(in srgb,var(--lb-violet) 10%,var(--card)));border:1px solid color-mix(in srgb,var(--lb-gold) 40%,var(--border));cursor:pointer}
.lb-champ .crown{font-size:1.5rem;color:var(--lb-gold);filter:drop-shadow(0 3px 6px rgba(233,169,18,.45))}
.lb-champ .avatar-circle,.lb-champ img.lb-av{width:4.6rem!important;height:4.6rem!important;border-radius:50%;object-fit:cover;border:3px solid var(--lb-gold);margin:.4rem auto;display:block}
.lb-champ h3{margin:.1rem 0;font-size:1.05rem;color:var(--text)}
.lb-champ p{margin:.1rem 0 0;font-size:.8rem;color:var(--text-muted)}
.lb-champ .lb-pill{margin-top:.55rem;background:linear-gradient(135deg,var(--lb-gold-2),var(--lb-gold));color:#5a3b00;border-color:transparent}
.lb-win{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:16px;background:var(--card);border:1px solid var(--border);margin-bottom:.45rem;cursor:pointer}
.lb-win .wk{flex:0 0 3.6rem;font-size:.72rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;line-height:1.25}
.lb-win .avatar-circle,.lb-win img.lb-av{width:2.6rem!important;height:2.6rem!important;border-radius:50%;object-fit:cover;flex:0 0 auto}
.lb-win-copy{min-width:0;flex:1}
.lb-win-copy strong{display:flex;align-items:center;gap:.35rem;font-size:.9rem;color:var(--text)}
.lb-win-copy strong i{color:var(--lb-gold);font-size:.8rem}
.lb-win-copy small{display:block;font-size:.74rem;color:var(--text-muted);margin-top:.08rem}
.lb-win b{font-size:.98rem;color:var(--text)}

/* skeleton */
.lb-skel{border-radius:16px;height:3.6rem;margin-bottom:.45rem;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 5%,transparent),color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 5%,transparent));background-size:200% 100%}

/* home card */
.home-lb-card{display:flex;align-items:center;gap:.8rem;margin:.2rem 0 .9rem;padding:.8rem .9rem;border-radius:18px;cursor:pointer;color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,#6d5ce8 11%,var(--card)),color-mix(in srgb,#4b9bf5 8%,var(--card)));border:1px solid color-mix(in srgb,#6d5ce8 26%,var(--border));box-shadow:var(--shadow)}
.home-lb-ico{flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#fbd45a,#e9a912);color:#5a3b00;font-size:1.15rem}
.home-lb-copy{min-width:0;flex:1}
.home-lb-copy strong{display:block;font-size:.92rem}
.home-lb-copy span{display:block;font-size:.76rem;color:var(--text-muted);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-lb-av{display:flex;flex:0 0 auto}
.home-lb-av img,.home-lb-av .avatar-circle{width:1.95rem!important;height:1.95rem!important;border-radius:50%;object-fit:cover;border:2px solid var(--card);margin-left:-.5rem}
.home-lb-av>:first-child{margin-left:0}
.home-lb-card>i.go{color:var(--text-muted);font-size:.8rem}
@media(min-width:900px){.lb-page{padding-bottom:3rem}}
#app .lb-page{max-width:900px!important;margin-left:auto!important;margin-right:auto!important}
/* ---- levromart-dispute-photos ---- */
.dispute-photos{margin:.7rem 0 .8rem;padding:.7rem;border:1px dashed var(--border);border-radius:14px}
.dispute-photos-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-weight:700;font-size:.86rem;margin-bottom:.5rem}
.dispute-photo-list{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:.5rem}
.dispute-photo-list:empty{display:none}
.dispute-photo{position:relative;width:5.2rem;height:5.2rem;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.dispute-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dispute-photo button{position:absolute;top:.2rem;right:.2rem;width:1.5rem;height:1.5rem;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;display:grid;place-items:center;cursor:pointer}
.dispute-evidence{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
.dispute-evidence img{width:5.6rem;height:5.6rem;object-fit:cover;border-radius:12px;border:1px solid var(--border);display:block}
/* ---- levromart-final-appstore-category-rail ---- */
  /* Deliberately compact, App Store-inspired category pills.
     Visual-only: no data, click handlers, ordering, or category logic changed. */
  #app .levro-home-cat-rail{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:3px 2px 9px!important;
    margin:0!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
  }
  #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;
    justify-content:center!important;
    gap:6px!important;
    width:auto!important;
    min-width:0!important;
    min-height:30px!important;
    height:30px!important;
    padding:0 11px!important;
    border:1px solid rgba(15,23,42,.09)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.96)!important;
    color:var(--text)!important;
    box-shadow:0 2px 7px rgba(15,23,42,.075)!important;
    white-space:nowrap!important;
    transform:none!important;
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
  }
  #app .levro-home-cat-chip:active{transform:scale(.965)!important;}

  /* Use the existing real Font Awesome pictograms directly. No generated
     artwork, no coloured square behind them, and no artificial icon tile. */
  #app .levro-home-cat-icon{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--cat-color,var(--primary))!important;
    font-size:16px!important;
    line-height:1!important;
  }
  #app .levro-home-cat-icon i{
    display:block!important;
    font-size:inherit!important;
    line-height:1!important;
  }
  #app .levro-home-cat-label{
    display:inline-block!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    color:var(--text)!important;
    font-size:12.5px!important;
    line-height:1!important;
    font-weight:650!important;
    letter-spacing:-.015em!important;
  }

  /* Clean selected state: restrained green tint instead of a heavy box. */
  #app .levro-home-cat-chip.active{
    background:color-mix(in srgb,var(--cat-color,var(--primary)) 9%,#fff)!important;
    border-color:color-mix(in srgb,var(--cat-color,var(--primary)) 48%,rgba(15,23,42,.09))!important;
    box-shadow:0 2px 9px color-mix(in srgb,var(--cat-color,var(--primary)) 12%,transparent)!important;
  }
  #app .levro-home-cat-chip.active .levro-home-cat-icon{
    background:transparent!important;
    box-shadow:none!important;
    color:var(--cat-color,var(--primary))!important;
  }
  #app .levro-home-cat-chip.active .levro-home-cat-label{
    color:var(--text)!important;
    font-weight:750!important;
  }

  @media(max-width:420px){
    #app .levro-home-cat-rail{gap:7px!important;padding:3px 1px 8px!important;}
    #app .levro-home-cat-chip{min-height:29px!important;height:29px!important;padding:0 10px!important;gap:5px!important;}
    #app .levro-home-cat-icon{width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;font-size:15px!important;}
    #app .levro-home-cat-label{font-size:12px!important;}
  }
/* ---- levromart-final-product-total-position ---- */
  /* Move the delivery icon + label down/left slightly. The total amount stays
     exactly where it is, as requested. */
  #app .product-card-total-line{
    padding-top:1.15rem!important;
  }
  #app .product-card-total-line > i,
  #app .product-card-total-line .product-card-total-label{
    transform:translate(-.62rem,.08rem)!important;
  }
  #app .product-card-total-line > strong{
    transform:none!important;
  }

<!-- LEVROMART STOREFRONT ACTIONS, FINAL MOBILE PLACEMENT -->
<style id="levromart-storefront-actions-final-placement-20261004">
/* The banner owns ONLY the three-dot button. */
#app .storefront-profile .storefront-cover{
  position:relative!important;
}
#app .storefront-profile .storefront-cover > .storefront-banner-more{
  position:absolute!important;
  inset:12px 12px auto auto!important;
  left:auto!important;
  right:12px!important;
  top:12px!important;
  z-index:20!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Give the avatar a real row in the document flow. It still overlaps the
   bottom of the banner, but it no longer lets the following controls float
   into the avatar's physical area. */
#app .storefront-profile .storefront-avatar-row{
  position:relative!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  min-height:82px!important;
  height:82px!important;
  margin-top:-41px!important;
  margin-bottom:.35rem!important;
  overflow:visible!important;
  z-index:3!important;
}
#app .storefront-profile .storefront-avatar-row .storefront-avatar,
#app .storefront-profile .storefront-avatar-row .storefront-avatar-button{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:0!important;
  flex:0 0 82px!important;
}

/* Identity first; actions come beneath it and stay in normal flow. */
#app .storefront-profile .storefront-name-row{
  position:relative!important;
  z-index:4!important;
  width:100%!important;
  margin:.1rem 0 0!important;
  padding:0!important;
}
#app .storefront-profile .storefront-profile-actions.storefront-public-actions{
  position:relative!important;
  inset:auto!important;
  z-index:4!important;
  width:100%!important;
  min-height:40px!important;
  height:40px!important;
  margin:.65rem 0 0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.5rem!important;
  flex-wrap:nowrap!important;
}
#app .storefront-profile .storefront-public-actions .storefront-follow-wrap{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  gap:.5rem!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
}
#app .storefront-profile .storefront-public-actions .storefront-follow-controls{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.5rem!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
#app .storefront-profile .storefront-public-actions .follow-btn.follow-btn-icon{
  position:static!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:110px!important;
  max-width:150px!important;
  height:40px!important;
  min-height:40px!important;
  padding:.45rem 1rem!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42rem!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:.82rem!important;
}
#app .storefront-profile .storefront-public-actions .follow-btn.follow-btn-icon .follow-btn-label{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
}
#app .storefront-profile .storefront-public-actions .follow-settings-btn{
  position:static!important;
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  padding:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}
#app .storefront-profile .storefront-public-actions .follow-settings-btn i{
  font-size:1rem!important;
}
@media(max-width:620px){
  #app .storefront-profile .storefront-avatar-row{
    min-height:74px!important;
    height:74px!important;
    margin-top:-37px!important;
  }
  #app .storefront-profile .storefront-avatar-row .storefront-avatar,
  #app .storefront-profile .storefront-avatar-row .storefront-avatar-button{
    flex-basis:74px!important;
    width:74px!important;
    height:74px!important;
    min-width:74px!important;
    min-height:74px!important;
    max-width:74px!important;
    max-height:74px!important;
  }
  #app .storefront-profile .storefront-profile-actions.storefront-public-actions{
    height:38px!important;
    min-height:38px!important;
    margin-top:.6rem!important;
  }
  #app .storefront-profile .storefront-public-actions .follow-btn.follow-btn-icon{
    min-width:108px!important;
    max-width:140px!important;
    height:38px!important;
    min-height:38px!important;
    padding:.4rem .85rem!important;
    font-size:.78rem!important;
  }
  #app .storefront-profile .storefront-public-actions .follow-settings-btn{
    flex-basis:38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
  }
}
/* ---- levro-storefront-final-visual-polish-20261004 ---- */
/* ================================================================
   FINAL STOREFRONT VISUAL POLISH
   1) Banner touches the app header with no dead gap.
   2) Three-dot control is light, crisp and properly framed.
   3) Profile image is larger and sits higher over the banner.
   4) Notification preferences are a clean, full-width bottom sheet.
   ================================================================ */

/* ---------- 1. HEADER -> BANNER CONTINUITY ---------- */
body:has(#app .storefront-profile) #app.container{
  width:100%!important;
  max-width:none!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-left:0!important;
  padding-right:0!important;
  padding-top:0!important;
}

/* The storefront is the page itself, so its banner starts immediately
   underneath the sticky app header. */
#app .storefront-profile{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

/* ---------- 2. LIGHT, CRISP THREE-DOT CONTROL ---------- */
#app .storefront-profile .storefront-cover > .storefront-banner-more{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;

  /* Light framed treatment, not the heavy dark computer-like circle. */
  background:rgba(255,255,255,.20)!important;
  border:2px solid rgba(255,255,255,.78)!important;
  color:#fff!important;
  box-shadow:0 3px 12px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:30!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

#app .storefront-profile .storefront-cover > .storefront-banner-more i{
  color:#fff!important;
  font-size:1.02rem!important;
  line-height:1!important;
  opacity:.98!important;
}

#app .storefront-profile .storefront-cover > .storefront-banner-more:active{
  transform:scale(.96)!important;
  background:rgba(255,255,255,.28)!important;
}

/* ---------- 3. LARGER / MORE PRONOUNCED PROFILE IMAGE ---------- */
#app .storefront-profile .storefront-avatar-row{
  position:relative!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  min-height:96px!important;
  height:96px!important;
  margin-top:-48px!important;
  margin-bottom:.42rem!important;
  overflow:visible!important;
  z-index:5!important;
}

#app .storefront-profile .storefront-avatar-row .storefront-avatar,
#app .storefront-profile .storefront-avatar-row .storefront-avatar-button{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;

  width:96px!important;
  height:96px!important;
  min-width:96px!important;
  min-height:96px!important;
  max-width:96px!important;
  max-height:96px!important;
  flex:0 0 96px!important;
  margin:0!important;

  border:4px solid var(--bg)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
}

/* Keep the name and actions safely below the enlarged avatar. */
#app .storefront-profile .storefront-name-row{
  position:relative!important;
  z-index:6!important;
  margin:.12rem 0 0!important;
}

/* ---------- 4. CLEAN NOTIFICATION BOTTOM SHEET ---------- */
/* The backdrop should dim the page evenly without making the sheet itself
   look gray or muddy. */
#app .storefront-profile .follow-sheet-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  background:rgba(15,23,42,.48)!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:2147483002!important;
}

/* Full-width sheet, clean white/light surface, no boxed-card appearance. */
#app .storefront-profile .follow-menu{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;

  width:100vw!important;
  max-width:none!important;
  max-height:min(72dvh,600px)!important;
  margin:0!important;

  padding:10px max(20px,env(safe-area-inset-left))
           calc(22px + env(safe-area-inset-bottom))
           max(20px,env(safe-area-inset-right))!important;

  background:var(--card)!important;
  color:var(--text)!important;

  border:0!important;
  border-top:1px solid color-mix(in srgb,var(--border) 78%,transparent)!important;
  border-radius:28px 28px 0 0!important;
  box-shadow:0 -14px 44px rgba(15,23,42,.20)!important;

  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  z-index:2147483003!important;
  transform:translateY(0)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  appearance:none!important;
}

/* Bottom-sheet handle. */
#app .storefront-profile .follow-menu::before{
  content:""!important;
  display:block!important;
  width:42px!important;
  height:5px!important;
  margin:1px auto 16px!important;
  border-radius:999px!important;
  background:var(--border)!important;
}

/* Sheet title and intro. */
#app .storefront-profile .follow-menu > strong{
  display:block!important;
  margin:0!important;
  padding:0 0 5px!important;
  border:0!important;
  color:var(--text)!important;
  font-size:1.12rem!important;
  line-height:1.3!important;
  font-weight:800!important;
}

#app .storefront-profile .follow-mode-intro{
  margin:0 0 10px!important;
  padding:0!important;
  color:var(--text-muted)!important;
  font-size:.78rem!important;
  line-height:1.45!important;
}

/* Kill every browser/default gray button treatment. */
#app .storefront-profile .follow-mode-row,
#app .storefront-profile .follow-mode-row:hover,
#app .storefront-profile .follow-mode-row:focus,
#app .storefront-profile .follow-mode-row:focus-visible,
#app .storefront-profile .follow-mode-row:active{
  width:100%!important;
  min-width:0!important;
  min-height:70px!important;
  height:auto!important;

  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:13px!important;

  margin:0!important;
  padding:11px 0!important;

  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent)!important;
  border-radius:0!important;

  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;

  color:var(--text)!important;
  text-align:left!important;
  font:inherit!important;
  outline:none!important;

  appearance:none!important;
  -webkit-appearance:none!important;
  -webkit-tap-highlight-color:transparent!important;
  cursor:pointer!important;
}

#app .storefront-profile .follow-mode-row:last-child{
  border-bottom:0!important;
}

/* Icon tile: deliberately subtle, not a gray block. */
#app .storefront-profile .follow-mode-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  border-radius:14px!important;

  display:grid!important;
  place-items:center!important;

  background:color-mix(in srgb,var(--primary) 8%,var(--card))!important;
  border:1px solid color-mix(in srgb,var(--primary) 12%,var(--border))!important;
  box-shadow:none!important;

  font-size:1rem!important;
}

/* Preserve the three unique LevroMart notification identities. */
#app .storefront-profile .follow-mode-icon-all{
  background:color-mix(in srgb,#3b82f6 9%,var(--card))!important;
  border-color:color-mix(in srgb,#3b82f6 18%,var(--border))!important;
  color:#2563eb!important;
}
#app .storefront-profile .follow-mode-icon-relevant{
  background:color-mix(in srgb,#8b5cf6 9%,var(--card))!important;
  border-color:color-mix(in srgb,#8b5cf6 18%,var(--border))!important;
  color:#7c3aed!important;
}
#app .storefront-profile .follow-mode-icon-off{
  background:color-mix(in srgb,var(--text) 5%,var(--card))!important;
  border-color:var(--border)!important;
  color:var(--text-muted)!important;
}

/* Text remains crisp and readable. */
#app .storefront-profile .follow-mode-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:3px!important;
}

#app .storefront-profile .follow-mode-copy b{
  display:block!important;
  margin:0!important;
  color:var(--text)!important;
  font-size:.92rem!important;
  line-height:1.25!important;
  font-weight:750!important;
}

#app .storefront-profile .follow-mode-copy small{
  display:block!important;
  margin:0!important;
  color:var(--text-muted)!important;
  font-size:.73rem!important;
  line-height:1.4!important;
}

/* Selection indicator is clean and circular. */
#app .storefront-profile .follow-mode-check{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  border:2px solid var(--border)!important;
  border-radius:50%!important;
  background:transparent!important;
  color:transparent!important;

  display:grid!important;
  place-items:center!important;
  box-shadow:none!important;
}

#app .storefront-profile .follow-mode-row[aria-pressed="true"] .follow-mode-check{
  border-color:var(--primary)!important;
  background:var(--primary)!important;
  color:#fff!important;
}

#app .storefront-profile .follow-mode-row[aria-pressed="true"] .follow-mode-copy b{
  font-weight:800!important;
}

/* The hidden state must always remain truly hidden even if another legacy
   storefront rule tries to position the menu. */
#app .storefront-profile .follow-menu.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Mobile sizing: LinkedIn-like proportions without oversized gray panels. */
@media(max-width:620px){
  #app .storefront-profile .storefront-cover > .storefront-banner-more{
    top:11px!important;
    right:11px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }

  #app .storefront-profile .storefront-avatar-row{
    min-height:96px!important;
    height:96px!important;
    margin-top:-48px!important;
  }

  #app .storefront-profile .storefront-avatar-row .storefront-avatar,
  #app .storefront-profile .storefront-avatar-row .storefront-avatar-button{
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    min-height:96px!important;
    flex-basis:96px!important;
  }

  #app .storefront-profile .follow-menu{
    padding-left:max(18px,env(safe-area-inset-left))!important;
    padding-right:max(18px,env(safe-area-inset-right))!important;
    border-radius:26px 26px 0 0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #app .storefront-profile .follow-menu{
    transition:none!important;
  }
}
/* ---- levromart-storefront-avatar-name-spacing-final ---- */
/*
  STOREFRONT: PROFILE PICTURE -> VENDOR NAME SPACING + AVATAR RING ONLY.
  The avatar row/avatar keep their original (absolute, overlapping-banner) placement;
  nothing here moves the avatar or the Follow row.
  Cause of the collision: "#app .storefront-profile .storefront-profile-actions + .storefront-name-row"
  (margin-top:0!important) out-ranked every later name margin. This rule is more specific.
*/
#app .storefront-profile .storefront-profile-body > .storefront-profile-actions + .storefront-name-row{
  margin-top:28px!important;
  transform:none!important;
}
/* Avatar ring: one solid opaque ring (no banner showing through, no two-tone halo). */
#app .storefront-profile .storefront-avatar-row .storefront-avatar,
#app .storefront-profile .storefront-avatar-row .storefront-avatar-button{
  border:0!important;
  padding:4px!important;
  background:var(--bg)!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
#app .storefront-profile .storefront-avatar-row .storefront-avatar img{
  border-radius:50%!important;
}
/* ---- lv-onboarding-auth ---- */
/* ===== LevroMart first-visit onboarding + full-page authentication ===== */
:root{--lv-g:#3fb97f;--lv-g2:#12a266;--lv-ink:#052e1e;--lv-muted:#5f6f68;--lv-line:#dbe8e1}
html.lv-lock,html.lv-lock body{overflow:hidden!important}
.lv-onb,#loginModal.lv-auth{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--lv-ink);color-scheme:light;-webkit-font-smoothing:antialiased}
.lv-onb *,#loginModal.lv-auth *{box-sizing:border-box}
.lv-bgfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lv-bgfx i{position:absolute;border-radius:50%;border:2px solid rgba(18,162,102,.10);background:rgba(18,162,102,.06)}
.lv-bgfx .o1{width:min(80vw,540px);aspect-ratio:1;right:-30vw;top:-26vw}
.lv-bgfx .o2{width:min(90vw,620px);aspect-ratio:1;left:-46vw;bottom:-34vw;background:rgba(18,162,102,.07)}
.lv-bgfx .o3{width:min(34vw,220px);aspect-ratio:1;left:-12vw;top:34%;background:transparent}
.lv-bgfx::before{content:"";position:absolute;width:70vmax;height:70vmax;right:-35vmax;top:-45vmax;background:radial-gradient(circle,rgba(18,162,102,.16),transparent 62%)}
.lv-logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.3rem;letter-spacing:-.025em;color:var(--lv-ink)}
.lv-logo-img{width:36px;height:36px;border-radius:10px;display:block;object-fit:cover;flex:none;box-shadow:0 4px 12px -4px rgba(5,46,30,.45)}
.lv-logo .a{fill:none;stroke:var(--lv-g2);stroke-width:7;stroke-linecap:round}
.lv-logo .d{fill:var(--lv-g2)}
.lv-eyebrow{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.2em;color:var(--lv-g2);text-transform:uppercase}
.lv-lead{margin:0;font-size:1rem;line-height:1.5;color:var(--lv-muted)}
em.lv-em,.lv-onb h2 em,.lv-auth h1 em{font-style:normal;color:var(--lv-g2)}

/* ---- Onboarding ---- */
.lv-onb{position:fixed;inset:0;z-index:200001;display:flex;flex-direction:column;background:linear-gradient(180deg,#f9fffc 0%,#eefaf4 55%,#e5f6ee 100%);overflow:hidden}
.lv-onb[hidden]{display:none!important}
.lv-onb:focus{outline:none}
.lv-onb-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:min(100%,1100px);align-self:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 22px 0}
.lv-skip{background:none;border:0;font:inherit;font-weight:700;font-size:.98rem;color:var(--lv-muted);padding:.6rem .5rem;border-radius:10px;cursor:pointer;transition:opacity .2s,visibility .2s}
.lv-skip.gone{opacity:0;visibility:hidden}
.lv-onb button:focus-visible,#loginModal.lv-auth button:focus-visible,#loginModal.lv-auth a:focus-visible{outline:3px solid rgba(18,162,102,.45);outline-offset:2px}
.lv-onb-viewport{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:pan-y;cursor:grab}
.lv-onb-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.22,.8,.24,1);will-change:transform}
.lv-slide{flex:0 0 100%;min-width:0;height:100%;display:flex;flex-direction:column;opacity:.3;transform:scale(.97);transition:opacity .4s ease,transform .5s ease}
.lv-slide.on{opacity:1;transform:none}
.lv-slide-art{position:relative;flex:1 1 0;min-height:0;margin:4px 12px 0}
.lv-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:lvFloat 5s ease-in-out infinite;-webkit-user-drag:none;user-select:none;pointer-events:none}
.lv-slide:not(.on) .lv-hero,.lv-slide:not(.on) .lv-fb *{animation-play-state:paused}
.lv-slide-copy{flex:0 0 auto;padding:8px 28px 6px;text-align:center}
.lv-slide-copy h2{margin:.55rem 0 .7rem;font-size:clamp(2rem,9vw,2.7rem);line-height:1.03;font-weight:800;letter-spacing:-.035em;color:var(--lv-ink)}
.lv-slide-copy.tight h2{font-size:clamp(1.9rem,8.2vw,2.45rem)}
.lv-slide-copy .lv-lead{max-width:31ch;margin:0 auto}
.lv-onb-bottom{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;width:min(100%,1100px);align-self:center;padding:14px 24px calc(env(safe-area-inset-bottom,0px) + 22px)}
.lv-dots{display:flex;gap:8px;align-items:center}
.lv-dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(11,110,74,.22);cursor:pointer;transition:width .3s,background .3s}
.lv-dot[aria-selected="true"]{width:26px;background:var(--lv-g2)}
.lv-cta{width:100%;max-width:420px;height:56px;border:0;border-radius:999px;background:linear-gradient(135deg,#14ad6c,#3fb97f);color:#fff;font:inherit;font-weight:800;font-size:1.06rem;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;box-shadow:0 14px 26px -12px rgba(11,110,74,.7);cursor:pointer;transition:transform .15s,box-shadow .15s}
.lv-cta:active{transform:scale(.98)}
.lv-cta svg{width:20px;height:20px;transition:transform .2s}
.lv-cta:hover svg{transform:translateX(3px)}
.lv-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lv-slide-art.has-img .lv-fb{display:none}
.lv-fb .core{width:min(56%,250px);aspect-ratio:1;border-radius:32%;background:linear-gradient(145deg,#14ad6c,#3fb97f);display:grid;place-items:center;box-shadow:0 30px 50px -22px rgba(11,110,74,.6);animation:lvFloat 5s ease-in-out infinite}
.lv-fb .core svg{width:58%;height:58%}
.lv-fb .core .a{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.lv-fb .core .d{fill:#fff}
.lv-chip{position:absolute;width:54px;height:54px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 14px 28px -12px rgba(5,46,30,.35);font-size:1.25rem;color:var(--lv-g);animation:lvBob 3.8s ease-in-out infinite}
.lv-chip.y{color:#f2b01e}
.lv-fb .c1{left:16%;top:14%}.lv-fb .c2{right:14%;top:22%;animation-delay:-1.2s}.lv-fb .c3{left:22%;bottom:12%;animation-delay:-2.2s}.lv-fb .c4{right:20%;bottom:16%;animation-delay:-.6s}
@keyframes lvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lvBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@media (min-width:900px){
  .lv-onb-top,.lv-onb-bottom{width:min(calc(100% - 96px),1100px)}
  .lv-onb-top{padding-left:0;padding-right:0}
  .lv-slide{flex-direction:row-reverse;align-items:center;padding:0 max(48px,calc((100% - 1100px)/2));gap:56px}
  .lv-slide-art{flex:1 1 55%;height:min(68vh,620px);min-height:0;margin:0}
  .lv-slide-copy{flex:1 1 45%;text-align:left;padding:0}
  .lv-slide-copy h2,.lv-slide-copy.tight h2{font-size:clamp(3rem,5vw,4.2rem)}
  .lv-slide-copy .lv-lead{margin:0;font-size:1.12rem;max-width:36ch}
  .lv-onb-bottom{flex-direction:row-reverse;justify-content:space-between;padding:18px 0 34px}
  .lv-cta{width:auto;min-width:260px;padding:0 2rem}
}
@media (max-height:600px) and (max-width:899px){.lv-slide-copy .lv-lead{display:none}.lv-slide-copy h2{font-size:1.7rem;margin:.3rem 0}.lv-onb-bottom{gap:10px}}

/* ---- Authentication page (restyles the existing #loginModal; all ids/handlers preserved) ---- */
#loginModal.lv-auth{position:fixed!important;inset:0!important;z-index:200000!important;padding:0!important;display:block;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:linear-gradient(180deg,#f9fffc 0%,#eefaf4 50%,#e6f7ef 100%)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#loginModal.lv-auth:not(.hidden){display:block!important}
#loginModal.lv-auth.hidden{display:none!important}
#loginModal.lv-auth .modal-content{position:relative;width:100%!important;max-width:none!important;max-height:none!important;min-height:100%;overflow:visible!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--lv-ink)!important}
#loginModal.lv-auth .lv-auth-wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 22px calc(env(safe-area-inset-bottom,0px) + 26px);animation:lvIn .4s ease both}
#loginModal.lv-auth #loginModalLogo{display:none!important}
.lv-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lv-auth-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4px;margin-top:20px}
.lv-auth h1{margin:.5rem 0 .65rem;font-size:clamp(2rem,9vw,2.6rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;color:var(--lv-ink)}
.lv-auth .lv-lead{font-size:.92rem}
.lv-auth-art{position:relative;aspect-ratio:1/1.05;min-width:0}
.lv-auth-char{position:absolute;left:4%;right:0;bottom:2%;width:96%;height:88%;object-fit:contain;animation:lvFloat 4.6s ease-in-out infinite;pointer-events:none;-webkit-user-drag:none}
.lv-draw{position:absolute;left:-14%;top:-14%;width:128%;height:120%;overflow:visible;pointer-events:none}
.lv-ring{fill:none;stroke:rgba(18,162,102,.28);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:22 28;transform-origin:120px 140px;animation:lvSpin 24s linear infinite}
.lv-sq{fill:none;stroke:var(--lv-g2);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:lvDraw 6.5s ease-in-out infinite}
.lv-pt{display:none}
@supports (offset-path:path('M0 0')){.lv-pt{display:block;fill:#f2b01e;offset-path:path('M16 236C-6 190 4 120 30 84C56 46 100 22 150 20C190 18 220 40 228 84');offset-distance:0%;animation:lvDot 6.5s ease-in-out infinite}}
.lv-spk line{stroke:var(--lv-g2);stroke-width:3;stroke-linecap:round;animation:lvBlink 2.6s ease-in-out infinite}
.lv-spk line:nth-child(2){animation-delay:.5s}.lv-spk line:nth-child(3){animation-delay:1s}
.lv-auth-art .lv-chip{width:36px;height:36px;border-radius:11px;font-size:.9rem}
.lv-auth-art .c1{left:-2%;top:4%}.lv-auth-art .c2{right:0;top:10%;animation-delay:-1.4s}
@keyframes lvDraw{0%{stroke-dashoffset:100}45%{stroke-dashoffset:0}70%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes lvDot{0%{offset-distance:0%;opacity:1}45%{offset-distance:100%;opacity:1}70%{offset-distance:100%;opacity:1}85%{offset-distance:100%;opacity:0}100%{offset-distance:0%;opacity:0}}
@keyframes lvSpin{to{transform:rotate(360deg)}}
@keyframes lvBlink{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes lvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#loginModal.lv-auth .auth-mode-tabs{display:flex!important;gap:0!important;padding:0!important;margin:22px 0 4px!important;background:transparent!important;border-radius:0!important;border-bottom:1.5px solid var(--lv-line)!important}
#loginModal.lv-auth .auth-mode-tab{flex:1;position:relative;min-width:0;padding:.85rem .5rem!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#8a97a0!important;font:inherit!important;font-size:1rem!important;font-weight:800!important;cursor:pointer;transition:color .2s}
#loginModal.lv-auth .auth-mode-tab::after{content:"";position:absolute;left:12%;right:12%;bottom:-1.5px;height:3px;border-radius:3px;background:var(--lv-g2);transform:scaleX(0);transition:transform .28s cubic-bezier(.3,.8,.3,1)}
#loginModal.lv-auth .auth-mode-tab.active{color:var(--lv-g)!important;background:transparent!important;box-shadow:none!important}
#loginModal.lv-auth .auth-mode-tab.active::after{transform:scaleX(1)}
#loginModal.lv-auth .lv-body.lv-in{animation:lvIn .28s ease both}
#loginModal.lv-auth .error-text{background:#fff1f1;border:1px solid #ffd0d0;color:#b42318!important;border-radius:12px;padding:.7rem .9rem;font-size:.88rem;margin:.9rem 0 0}
#loginModal.lv-auth #googleAuthWrap{margin-top:18px}
#loginModal.lv-auth .google-auth-btn{width:100%;height:54px;border-radius:14px;border:1.5px solid var(--lv-line);background:#fff;color:#0f1f18;font:inherit;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:.7rem;box-shadow:0 2px 6px rgba(5,46,30,.05);cursor:pointer}
#loginModal.lv-auth .google-auth-btn:hover{background:#fafefc}
#loginModal.lv-auth .google-auth-btn svg{width:20px;height:20px}
#loginModal.lv-auth .auth-or-divider{margin:1.1rem 0 .3rem;color:#8a97a0;font-size:.78rem;font-weight:700;letter-spacing:.12em}
#loginModal.lv-auth .auth-or-divider::before,#loginModal.lv-auth .auth-or-divider::after{background:var(--lv-line)}
#loginModal.lv-auth label{display:block;margin:.95rem 0 .4rem;font-size:.8rem;font-weight:700;color:#3d4f47}
#loginModal.lv-auth input:not([type=checkbox]),#loginModal.lv-auth select{width:100%;height:52px;margin:0!important;padding:0 1rem!important;border:1.5px solid var(--lv-line)!important;border-radius:14px!important;background-color:#fff!important;color:var(--lv-ink)!important;font:inherit;font-size:1rem;box-shadow:0 1px 2px rgba(5,46,30,.04)!important}
#loginModal.lv-auth input::placeholder{color:#9aa8a1}
#loginModal.lv-auth input:not([type=checkbox]):focus,#loginModal.lv-auth select:focus{outline:none;border-color:var(--lv-g2)!important;box-shadow:0 0 0 4px rgba(18,162,102,.15)!important}
#loginModal.lv-auth #loginEmail{padding-left:2.9rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9b93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:1rem 50%!important;background-size:20px!important}
#loginModal.lv-auth #loginPassword{padding-left:2.9rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9b93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:1rem 50%!important;background-size:20px!important}
#loginModal.lv-auth .password-input-wrap input{padding-right:3rem!important}
#loginModal.lv-auth .lv-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0 1.2rem}
#loginModal.lv-auth .lv-row #forgotPasswordLinkWrap{margin:0!important}
#loginModal.lv-auth .lv-row a{color:var(--lv-g2);font-weight:700;font-size:.9rem;text-decoration:none}
#loginModal.lv-auth .lv-check{position:relative;display:inline-flex;align-items:center;gap:.6rem;margin:0;font-size:.92rem;font-weight:600;color:#26382f;cursor:pointer}
#loginModal.lv-auth .lv-check input{position:absolute!important;opacity:0;width:22px!important;height:22px!important;margin:0!important;cursor:pointer}
.lv-check .box{width:22px;height:22px;border-radius:7px;border:1.5px solid #c3d4cb;background:#fff;display:inline-grid;place-items:center;transition:background .15s,border-color .15s;flex:none}
.lv-check input:checked+.box{background:var(--lv-g2);border-color:var(--lv-g2)}
.lv-check .box::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);margin-top:-2px;transition:transform .15s}
.lv-check input:checked+.box::after{transform:rotate(45deg) scale(1)}
.lv-check input:focus-visible+.box{outline:3px solid rgba(18,162,102,.45);outline-offset:2px}
#loginModal.lv-auth #authAgreementMsg,#loginModal.lv-auth #forgotPasswordMsg{font-size:.82rem!important;line-height:1.45;margin:.9rem 0 0;color:var(--lv-muted)}
#loginModal.lv-auth #authAgreementMsg a{color:var(--lv-g2);font-weight:700}
#loginModal.lv-auth .lv-actions{margin-top:1.2rem}
#loginModal.lv-auth #authSubmitBtn{width:100%;height:56px;border:0;border-radius:999px;background:linear-gradient(135deg,#14ad6c,#3fb97f)!important;color:#fff!important;font:inherit;font-weight:800;font-size:1.06rem;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 14px 26px -12px rgba(11,110,74,.7);cursor:pointer;transition:transform .15s,opacity .2s}
#loginModal.lv-auth #authSubmitBtn::after{content:"\2192";font-size:1.2rem;transition:transform .2s}
#loginModal.lv-auth #authSubmitBtn:hover::after{transform:translateX(3px)}
#loginModal.lv-auth #authSubmitBtn:active{transform:scale(.98)}
#loginModal.lv-auth #authSubmitBtn:disabled{opacity:.65;cursor:progress}
#loginModal.lv-auth .lv-switch,#loginModal.lv-auth .lv-togglewrap{text-align:center;margin:1.1rem 0 0;font-size:.93rem;color:#4d5e56}
#loginModal.lv-auth .lv-switch a,#loginModal.lv-auth #authToggleLink{color:var(--lv-g2);font-weight:800;text-decoration:none}
#loginModal.lv-auth .lv-guest{display:block;margin:.5rem auto 0;background:none;border:0;color:var(--lv-muted);font:inherit;font-size:.86rem;font-weight:600;text-decoration:underline;padding:.7rem 1rem;cursor:pointer}
#loginModal.lv-auth .muted{color:var(--lv-muted)!important}
@media (min-width:900px){
  #loginModal.lv-auth .lv-auth-wrap{max-width:1120px;min-height:100dvh;display:grid;grid-template-columns:1fr 440px;grid-template-rows:auto 1fr;column-gap:84px;padding:28px 48px 40px}
  #loginModal.lv-auth .lv-auth-brand{grid-column:1/-1}
  #loginModal.lv-auth .lv-auth-hero{display:block;align-self:center;margin:0}
  #loginModal.lv-auth .lv-auth-hero h1{font-size:clamp(3rem,4.6vw,4rem)}
  #loginModal.lv-auth .lv-auth-hero .lv-lead{font-size:1.08rem;max-width:36ch}
  #loginModal.lv-auth .lv-auth-art{width:min(100%,420px);margin-top:20px}
  #loginModal.lv-auth .lv-formcol{align-self:center}
}
/* The app's default "calm" mode switches off every animation/transition globally. Onboarding + auth are
   deliberate brand moments, so re-enable their motion here (OS-level reduced-motion is still honoured). */
@media (prefers-reduced-motion:no-preference){
  html[data-levro-motion] .lv-hero{animation:lvFloat 5s ease-in-out infinite!important}
  html[data-levro-motion] .lv-fb .core{animation:lvFloat 5s ease-in-out infinite!important}
  html[data-levro-motion] .lv-chip{animation:lvBob 3.8s ease-in-out infinite!important}
  html[data-levro-motion] .lv-fb .c2{animation-delay:-1.2s!important}
  html[data-levro-motion] .lv-fb .c3{animation-delay:-2.2s!important}
  html[data-levro-motion] .lv-fb .c4{animation-delay:-.6s!important}
  html[data-levro-motion] .lv-auth-art .c2{animation-delay:-1.4s!important}
  html[data-levro-motion] .lv-slide:not(.on) .lv-hero,html[data-levro-motion] .lv-slide:not(.on) .lv-fb *{animation-play-state:paused!important}
  html[data-levro-motion] .lv-auth-char{animation:lvFloat 4.6s ease-in-out infinite!important}
  html[data-levro-motion] .lv-ring{animation:lvSpin 24s linear infinite!important}
  html[data-levro-motion] .lv-sq{animation:lvDraw 6.5s ease-in-out infinite!important}
  html[data-levro-motion] .lv-spk line{animation:lvBlink 2.6s ease-in-out infinite!important}
  html[data-levro-motion] .lv-spk line:nth-child(2){animation-delay:.5s!important}
  html[data-levro-motion] .lv-spk line:nth-child(3){animation-delay:1s!important}
  html[data-levro-motion] #loginModal.lv-auth .lv-auth-wrap{animation:lvIn .4s ease both!important}
  html[data-levro-motion] #loginModal.lv-auth .lv-body.lv-in{animation:lvIn .28s ease both!important}
  html[data-levro-motion] .lv-onb-track{transition:transform .5s cubic-bezier(.22,.8,.24,1)!important}
  html[data-levro-motion] .lv-slide{transition:opacity .4s ease,transform .5s ease!important}
  html[data-levro-motion] .lv-skip{transition:opacity .2s,visibility .2s!important}
  html[data-levro-motion] .lv-dot{transition:width .3s,background .3s!important}
  html[data-levro-motion] .lv-cta{transition:transform .15s,box-shadow .15s!important}
  html[data-levro-motion] .lv-cta svg{transition:transform .2s!important}
  html[data-levro-motion] #loginModal.lv-auth .auth-mode-tab{transition:color .2s!important}
  html[data-levro-motion] #loginModal.lv-auth .auth-mode-tab::after{transition:transform .28s cubic-bezier(.3,.8,.3,1)!important}
  html[data-levro-motion] #loginModal.lv-auth #authSubmitBtn{transition:transform .15s,opacity .2s!important}
  html[data-levro-motion] #loginModal.lv-auth #authSubmitBtn::after{transition:transform .2s!important}
  html[data-levro-motion] .lv-check .box{transition:background .15s,border-color .15s!important}
  html[data-levro-motion] .lv-check .box::after{transition:transform .15s!important}
}
@supports (offset-path:path('M0 0')){
  @media (prefers-reduced-motion:no-preference){html[data-levro-motion] .lv-pt{animation:lvDot 6.5s ease-in-out infinite!important}}
}
@media (prefers-reduced-motion:reduce){
  .lv-onb *,#loginModal.lv-auth *{animation:none!important;transition:none!important}
  .lv-sq{stroke-dashoffset:0!important}.lv-pt{display:none!important}
}

/* ---- Onboarding layout hardening: iPhone Safari + every phone size ----
   Safari resolves height:100% inside flex items unreliably (the slide collapsed and the headline/lead were
   clipped). Everything below uses definite sizes (absolute track, stretch instead of height:100%) and
   viewport-height-aware type so the text always fits. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.lv-onb{height:100vh;height:100dvh;height:var(--lv-vh,100dvh);width:100%;max-width:100vw}
.lv-onb-viewport{flex:1 1 0;min-height:0;position:relative;overflow:hidden}
.lv-onb-track{position:absolute;top:0;right:0;bottom:0;left:0;height:auto;display:flex;align-items:stretch;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.lv-slide{height:auto;align-self:stretch;min-height:0}
.lv-slide,.lv-slide:not(.on){transform:none;-webkit-transform:none}
.lv-slide-art{flex:1 1 0;min-height:0;margin:2px 12px 0;position:relative}
.lv-slide-copy{flex:0 0 auto;overflow:visible;padding:6px 24px 6px}
.lv-slide-copy h2{overflow:visible;padding-bottom:.06em;margin:.4rem 0 .55rem;font-size:clamp(1.6rem,min(9vw,5.6vh),2.7rem);line-height:1.06;text-wrap:balance}
.lv-slide-copy.tight h2{font-size:clamp(1.5rem,min(8.2vw,5vh),2.45rem)}
.lv-slide-copy .lv-lead{font-size:clamp(.86rem,min(4.1vw,2.4vh),1rem);line-height:1.45}
.lv-eyebrow{font-size:clamp(.62rem,3.2vw,.74rem)}
.lv-onb-top{flex:0 0 auto;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.lv-onb-bottom{flex:0 0 auto;gap:clamp(10px,2.2vh,18px);padding:10px 22px calc(env(safe-area-inset-bottom,0px) + 16px)}
.lv-cta{height:clamp(48px,7vh,56px);-webkit-appearance:none;appearance:none}
.lv-hero{object-position:center;max-width:100%}
.lv-hero-girl{inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(5,46,30,.18))}
/* floating chips sit at the outer edges around her */
.lv-fb{pointer-events:none}
.lv-fb .c1{left:4%;top:9%}.lv-fb .c2{right:4%;top:15%}.lv-fb .c3{left:5%;bottom:10%}.lv-fb .c4{right:5%;bottom:7%}
.lv-chip{width:clamp(40px,12vw,54px);height:clamp(40px,12vw,54px);border-radius:14px;font-size:clamp(1rem,4.6vw,1.25rem)}
/* short phones (iPhone SE/8 with Safari bars): keep headline + lead, just tighten */
@media (max-height:640px) and (max-width:899px){
  .lv-slide-copy .lv-lead{display:block;font-size:.82rem;line-height:1.35;max-width:34ch}
  .lv-slide-copy h2,.lv-slide-copy.tight h2{font-size:clamp(1.35rem,min(7.4vw,5.2vh),1.9rem);margin:.25rem 0 .35rem}
  .lv-onb-bottom{gap:8px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .lv-cta{height:46px;font-size:1rem}
  .lv-chip{width:36px;height:36px;font-size:.95rem;border-radius:11px}
}
@media (max-height:440px) and (max-width:899px){.lv-slide-copy .lv-lead{display:none}}
@media (max-width:340px){.lv-slide-copy{padding-left:16px;padding-right:16px}.lv-onb-top{padding-left:16px;padding-right:16px}}
/* landscape phones: art beside the copy so nothing is squeezed */
@media (orientation:landscape) and (max-height:520px) and (max-width:899px){
  .lv-slide{flex-direction:row;align-items:center;gap:12px;padding:0 20px}
  .lv-slide-art{flex:1 1 50%;margin:0;height:100%}
  .lv-slide-copy{flex:1 1 50%;text-align:left;padding:0}
  .lv-slide-copy .lv-lead{display:block;font-size:.8rem}
}
/* ---- levromart-flat-pages ---- */
/* ===== FLAT PAGES: order details, settings, profile. No cards, hairline dividers, everything on the page. ===== */
:root{--lv-hair:color-mix(in srgb,var(--text) 10%,transparent)}
.lv-svg-ico{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex:0 0 auto}

/* ---- link rows (profile) ---- */
.lv-group{max-width:700px;margin:0 auto;padding:.2rem 0 .3rem;border-top:1px solid var(--lv-hair)}
.lv-group-flush{border-top:0;padding-top:0}
.lv-group-title{margin:.9rem 0 .25rem;font-size:.72rem!important;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.lv-row{display:flex;align-items:center;gap:.85rem;width:100%;min-height:3.3rem;padding:.55rem .1rem;border:0;border-top:1px solid var(--lv-hair);background:transparent;color:var(--text);font:inherit;font-size:.95rem;font-weight:600;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lv-group-title+.lv-row{border-top:0}
.lv-row:active{background:color-mix(in srgb,var(--text) 5%,transparent)}
.lv-row-static{cursor:default}
.lv-row-ico{flex:0 0 1.5rem;width:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.02rem}
.lv-row-label{flex:1;min-width:0}
.lv-row-val{flex:0 0 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-weight:600;font-size:.88rem}
.lv-row-chev{flex:0 0 auto;font-size:.68rem;color:var(--text-muted);opacity:.7}
.buyer-profile-settings-btn,#profilePanel .profile-settings-gear{border:0!important;background:color-mix(in srgb,var(--text) 6%,transparent)!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;color:var(--text)!important}
.buyer-profile-settings-btn .lv-svg-ico{width:1.3rem;height:1.3rem}
#profilePanel .profile-settings-gear .lv-svg-ico{width:1.25rem;height:1.25rem}
.vh-row-ico .lv-svg-ico,.vp-ico .lv-svg-ico{width:1.2rem;height:1.2rem}

/* ---- profile pages: header + hub flat ---- */
html body #app .vendor-profile-header-card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body #app .vendor-profile-header-cover{border-radius:14px!important}
html body #app .vh-list{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--lv-hair)!important}
html body #app .vh-list-single{margin-top:.4rem!important}
html body #app .vh-row{padding:.6rem .1rem!important;min-height:3.6rem!important}
html body #app .vh-row-ico{background:transparent!important;width:1.6rem!important;height:1.6rem!important;border-radius:0!important;font-size:1.05rem!important}
html body #app .vh-row+.vh-row{border-top:1px solid var(--lv-hair)!important}
html body #app .vh-stats{gap:0!important;border-top:1px solid var(--lv-hair);border-bottom:1px solid var(--lv-hair)}
html body #app .vh-stat{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:.75rem .4rem!important}
html body #app .vh-stat+.vh-stat{border-left:1px solid var(--lv-hair)!important}
html body #app .vh-stat-ico{background:transparent!important;width:1.6rem!important;height:1.6rem!important}
html body #app .vh-stat .vh-chev{display:none}
html body #app .vh-tabs button{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:2px solid transparent!important}
html body #app .vl-discarded{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--lv-hair)!important;border-bottom:1px solid var(--lv-hair)!important;padding-left:.1rem!important;padding-right:.1rem!important}
html body #app .vendor-profile-divider{border-top-color:var(--lv-hair)!important}

/* ---- profile drawer: stats as linked rows ---- */
#profilePanel .profile-panel-stats{display:flex!important;flex-direction:column;gap:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:.6rem 1.1rem 0!important}
#profilePanel .profile-panel-stat{flex-direction:row-reverse!important;justify-content:space-between;align-items:center;text-align:left;width:100%;padding:.8rem .1rem!important;border-radius:0!important;border-top:1px solid var(--lv-hair)!important;gap:.6rem}
#profilePanel .profile-panel-stat:first-child{border-top:0!important}
#profilePanel .profile-panel-stat strong{font-size:.95rem!important;font-weight:700;max-width:55%}
#profilePanel .profile-panel-stat span{font-size:.92rem!important;font-weight:600;color:var(--text)!important}
#profilePanel .profile-panel-stat-link::after{content:"\f054";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;font-size:.62rem;color:var(--text-muted);order:3;margin-left:.2rem}
#profilePanel .profile-panel-stat-link{padding:.8rem .1rem!important}
#profilePanel .vendor-profile-divider{border-top-color:var(--lv-hair)!important}
#profilePanel .vp-row{border-top-color:var(--lv-hair)!important}
#profilePanel .vp-ico{background:transparent!important;color:var(--primary)!important}

/* ---- settings: sections sit on the page ---- */
html body #app .settings-page-section{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;margin:0!important;padding:1.05rem .1rem!important;border-bottom:1px solid var(--lv-hair)!important}
html body #app .settings-page-section:last-of-type{border-bottom:0!important}
html body #app .settings-page-section h3{font-size:.74rem!important;font-weight:800!important;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)!important;margin-bottom:.15rem!important}
html body #app .settings-page-section h3 i{color:var(--text-muted)!important}
html body #app .settings-close-page{background:transparent!important;border:0!important;color:var(--text-muted)!important}
html body #app .settings-choice,html body #app .settings-action-row,html body #app .settings-simple-row,html body #app .settings-toggle-row{background:transparent!important;box-shadow:none!important;border-radius:0!important}

/* ---- order details: flat page ---- */
html body #app .od-page .od-card,html body #app .od-page .od-status,html body #app .od-page .od-info,html body #app .od-page .od-strip-card,html body #app .od-page .card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--lv-hair)!important;margin:0!important;padding-left:.15rem!important;padding-right:.15rem!important}
html body #app .od-page .od-status{padding-top:.9rem!important;padding-bottom:1rem!important}
html body #app .od-page .od-strip{background:transparent!important;border-radius:0!important;padding-left:0!important;padding-right:0!important}
html body #app .od-page .od-card-head{border-bottom:0!important;margin-bottom:.3rem!important}
html body #app .od-page .od-btn-light{box-shadow:none!important}
html body #app .od-page .od-card:last-of-type{border-bottom:0!important}
html body #app .od-page .od-item-img{border-radius:10px!important}
html body #app .od-page .od-menu{border-radius:14px}
/* ---- levromart-flat-pages-2 ---- */
/* ---- slimmer top bar: the bar had a min-height taller than its content, leaving dead space under the icons ---- */
html body > header{min-height:0!important;height:auto!important;padding-bottom:.3rem!important}
html body > header .header-top-row{min-height:42px!important}
@media (max-width:720px){
  html body > header{padding-top:calc(.35rem + env(safe-area-inset-top,0px))!important;padding-bottom:.3rem!important}
  html body{padding-top:calc(56px + env(safe-area-inset-top,0px))!important}
}
/* ---- chat icon: only when there are open chats; search bar stretches into the freed space ---- */
#messagesWrap{transition:max-width .3s ease,opacity .25s ease,margin .3s ease;max-width:3.2rem;overflow:visible}
#messagesWrap.lv-chat-off{max-width:0!important;opacity:0;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none;visibility:hidden;transition:max-width .3s ease,opacity .2s ease,margin .3s ease,visibility 0s .3s}
#messagesWrap:not(.lv-chat-off) .icon-btn>i{animation:levroWiggle 2.4s ease-in-out infinite;transform-origin:50% 60%}
@media (prefers-reduced-motion:reduce){#messagesWrap .icon-btn>i{animation:none!important}}
.header-search-row{transition:flex-basis .3s ease,width .3s ease}

/* ---- profile panel: LinkedIn-style ---- */
#profilePanel .lv-hide,#profilePanel .profile-greeting,#profilePanel .avatar-edit-badge{display:none!important}
#profilePanel .profile-panel-static,#profilePanel .profile-panel-static .drawer-header{background:transparent!important;box-shadow:none!important;border:0!important;padding-bottom:.4rem}
#profilePanel .profile-panel-header{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
#profilePanel .profile-panel-scroll{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto}
#profilePanel .lv-pp{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#profilePanel .lv-pp-stats{display:flex;flex-direction:column;gap:.15rem;padding:1.05rem 0;border-top:1px solid var(--lv-hair)}
#profilePanel .lv-pp-stat{background:none;border:0;padding:.55rem 0;font:inherit;font-size:.95rem;color:var(--text-muted);text-align:left;cursor:pointer}
#profilePanel .lv-pp-stat b{color:var(--primary);font-weight:800}
#profilePanel .lv-pp-group{display:flex;flex-direction:column;flex:1 1 auto;justify-content:space-evenly;padding:.3rem 0;border-top:1px solid var(--lv-hair)}
#profilePanel .lv-pp-row{display:flex;align-items:center;gap:.6rem;width:100%;min-height:3.1rem;padding:.5rem 0;background:none;border:0;font:inherit;font-size:1.02rem;font-weight:700;color:var(--text);text-align:left;cursor:pointer}
#profilePanel .lv-pp-row:active{opacity:.6}
#profilePanel .lv-pp-badge{font-style:normal;font-size:.7rem;font-weight:800;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;background:#e5484d;color:#fff;display:inline-flex;align-items:center;justify-content:center}

/* ---- profile page: shorter banner, avatar and identity higher ---- */
html body #app .vendor-profile-header-cover{height:72px!important}
html body #app .vendor-profile-header-avatar-row{margin-top:.35rem!important}
html body #app .storefront-profile .storefront-cover{height:128px!important}

/* ---- request page: form sits on the page ---- */
html body #app .request-equipment-page{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-left:.15rem!important;padding-right:.15rem!important;max-width:560px!important}
html body #app .request-equipment-page .theme-option{background:transparent!important;border-radius:12px!important}
html body #app #myRequestsAccordion,html body #app #myRequestsAccordion .accordion-trigger{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body #app #myRequestsAccordion{border-top:1px solid var(--lv-hair)!important;padding-top:.3rem}
html body #app #myRequestsAccordion .card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--lv-hair)!important;padding-left:0!important;padding-right:0!important}

/* ---- product page: flat sections ---- */
html body #app .product-gallery-varieties,html body #app .product-gallery-variant-meta,html body #app .sv-card,html body #app .selected-variant-summary,html body #app .product-variant-picker,html body #app .pd-about,html body #app .product-price-hero,html body #app .pd-total-box,html body #app .pd-note-box{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-left:.1rem!important;padding-right:.1rem!important;border-top:1px solid var(--lv-hair)!important}
html body #app .product-price-hero{background-image:none!important}
html body #app .product-gallery-varieties{border-top:0!important}
html body #app .pd-about>summary{padding-left:0!important;padding-right:0!important}
html body #app .product-reviews-card,html body #app .product-comments-card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--lv-hair)!important}
html body #app .card:has(#buyQty),html body #app .card:has(#rentStart),html body #app .card:has(#selectedVariantSummary){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--lv-hair)!important;padding-left:.1rem!important;padding-right:.1rem!important}
/* ---- levromart-flat-pages-3 ---- */
/* ===== product cards ===== */
html body #app .product-card-compact{display:flex!important}
html body #app .product-card-compact>.card{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-width:0}
html body #app .product-card-compact h4{display:flex!important;align-items:center;gap:.45rem;margin:.65rem .1rem .45rem!important;min-width:0;white-space:nowrap;overflow:hidden}
html body #app .product-card-compact .pc-vlogo-wrap{display:inline-flex;flex:0 0 auto}
html body #app .product-card-compact .pc-vlogo{width:1.5rem!important;height:1.5rem!important;max-width:none!important;border-radius:50%!important;object-fit:cover;border:1px solid var(--lv-hair);background:var(--card);display:block}
html body #app .product-card-compact .pc-vlogo-txt{display:inline-flex!important;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent)}
html body #app .product-card-compact .pc-name{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #app .product-card-compact .product-card-compact-footer{margin-top:auto!important;padding-top:.5rem}
html body #app .product-card-compact .product-card-dist{display:inline-flex;align-items:center;gap:.3rem;align-self:flex-start;margin:.45rem 0 .5rem .7rem;padding:.14rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--primary) 11%,transparent);color:var(--primary);font-size:.74rem;font-weight:700;line-height:1.3;white-space:nowrap}
:root[data-theme="dark"] .product-card-dist,:root[data-theme="black"] .product-card-dist{color:#4cc38a!important;background:rgba(76,195,138,.12)!important}
html body #app .product-card-compact .product-card-total-line{margin-top:.55rem!important;padding-top:.5rem!important;padding-bottom:.55rem!important}
/* flat add-to-cart */
html body #app .card-cart-btn,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){background:var(--primary)!important;background-image:none!important;border:0!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;border-radius:12px!important;transform:none!important;width:2.4rem!important;height:2.4rem!important;min-width:0!important}
html body #app .card-cart-btn:active{opacity:.8}
html body #app .card-cart-btn::before,html body #app .card-cart-btn::after{box-shadow:none!important;background:none!important}

/* ===== product page: no card around the page, quieter option colours ===== */
html body #app .product-detail-card,html body:has(.product-detail-card) #app .card:not(.product-card-compact .card){background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body #app .product-price-hero{background:transparent!important;background-image:none!important;border:0!important;border-top:1px solid var(--lv-hair)!important;border-radius:0!important;box-shadow:none!important;padding-left:.1rem!important;padding-right:.1rem!important}
html body #app .product-payment-plan-notice,html body #app .product-payment-plan-notice.pay-after,html body #app .product-payment-plan-notice.pay-before{background:transparent!important;background-image:none!important;border:1px solid var(--lv-hair)!important;border-left:3px solid color-mix(in srgb,#b7791f 60%,transparent)!important;border-radius:10px!important;box-shadow:none!important;color:var(--text)!important}
html body #app .product-payment-plan-notice.pay-before{border-left-color:color-mix(in srgb,var(--primary) 60%,transparent)!important}
html body #app .product-payment-plan-notice *,html body #app .product-payment-plan-notice strong,html body #app .product-payment-plan-notice span{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
html body #app .product-payment-plan-notice i{color:#9a6b12!important;-webkit-text-fill-color:#9a6b12!important}
html body #app .product-payment-plan-notice.pay-before i{color:#3fb97f!important;-webkit-text-fill-color:#3fb97f!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:#d9a441!important;-webkit-text-fill-color:#d9a441!important}
:root[data-theme="dark"] body #app .product-payment-plan-notice.pay-before i,:root[data-theme="black"] body #app .product-payment-plan-notice.pay-before i{color:#4cc38a!important;-webkit-text-fill-color:#4cc38a!important}
html body #app .pd-step-title i{color:#3fb97f!important}
:root[data-theme="dark"] body #app .pd-step-title i,:root[data-theme="black"] body #app .pd-step-title i{color:#4cc38a!important}
html body #app .delivery-method-row label,html body #app .delivery-method-row:not(.cart-delivery *) label{background:transparent!important;background-image:none!important;border:1px solid var(--lv-hair)!important;box-shadow:none!important;border-radius:12px!important;color:var(--text)!important}
html body #app .delivery-method-row label:has(input:checked),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){background:transparent!important;background-image:none!important;border:1.5px solid color-mix(in srgb,var(--primary) 75%,transparent)!important;box-shadow:none!important}
html body #app .delivery-method-row label *,html body #app .delivery-method-row label:has(input:checked) *{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
html body #app .delivery-method-row input[type=radio]{accent-color:var(--primary)!important}
html body #app .product-gallery-varieties-list{scroll-behavior:smooth}
:root[data-theme="dark"] .pc-vlogo-txt,:root[data-theme="black"] .pc-vlogo-txt{color:#4cc38a!important}

/* ---- round 2: aligned title row, bottom-anchored price block, outlined cart ---- */
html body #app .product-card-compact h4{display:block!important;-webkit-line-clamp:unset!important;overflow:hidden!important;white-space:nowrap!important}
html body #app .product-card-compact .pc-title-row{display:flex!important;align-items:center!important;gap:.5rem;width:100%;min-width:0;line-height:1.2}
html body #app .product-card-compact .pc-vlogo-wrap{display:flex!important;align-items:center;flex:0 0 auto;margin:0!important}
html body #app .product-card-compact .pc-vlogo{margin:0!important;display:block!important;flex:0 0 auto}
html body #app .product-card-compact .pc-name{display:block!important;margin:0!important;padding:0!important;line-height:1.2}
html body #app .product-card-compact .product-card-dist-empty{visibility:hidden}
html body #app .product-card-compact .product-card-total-line{margin-top:.4rem!important;padding-top:.8rem!important;padding-bottom:.8rem!important;border-top-width:1px}
html body #app .card-cart-btn,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){background:transparent!important;background-image:none!important;border:1.5px solid #1fb768!important;color:#1fb768!important;-webkit-text-fill-color:#1fb768!important;box-shadow:none!important}
html body #app .card-cart-btn i,html body #app .card-cart-btn svg{color:#1fb768!important;-webkit-text-fill-color:#1fb768!important;fill:#1fb768}
html body #app .card-cart-btn:active{background:color-mix(in srgb,#1fb768 14%,transparent)!important}
html body #app .product-card-compact .pc-vlogo.pc-vlogo-txt{display:flex!important;align-items:center;justify-content:center;line-height:1}

/* ---- round 3: cart button on the distance row, no dead space at the bottom ---- */
html body #app .product-card-compact>.card{padding-bottom:0!important}
html body #app .product-card-compact .product-card-compact-footer{padding-bottom:0!important;min-height:0!important}
html body #app .product-card-compact .product-card-meta{display:flex!important;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .7rem 0!important;min-height:2.7rem}
html body #app .product-card-compact .product-card-meta .product-card-dist{margin:0!important}
html body #app .product-card-compact .product-card-meta .card-cart-btn,html body #app .product-card-compact .product-card-meta .card-service-btn,html body #app .product-card-compact .product-card-meta .own-listing-badge{position:static!important;inset:auto!important;margin:0 0 0 auto!important;flex:0 0 auto}
html body #app .product-card-compact .product-card-meta .card-cart-btn:not(.added){width:2.3rem!important;height:2.3rem!important;min-width:2.3rem!important}
html body #app .product-card-compact .product-card-total-line{margin-top:.35rem!important;padding-top:.7rem!important;padding-bottom:.75rem!important}

html body #app .product-card-wrap.product-card-compact>.card>.product-card-meta{padding:.45rem .7rem .6rem!important}
html body #app .product-card-wrap.product-card-compact>.card>.product-card-compact-footer{padding-bottom:.15rem!important}
html body #app .product-card-wrap.product-card-compact>.card>.product-card-total-line{margin-top:0!important;padding:.75rem .7rem .8rem!important}

html body #app .product-card-wrap.product-card-compact{height:auto!important;min-height:0!important}
html body #app .product-card-wrap.product-card-compact>.card{height:auto!important;min-height:0!important;padding-bottom:0!important;flex:1 1 auto!important}
html body #app .hscroll.trending-scroll{align-items:stretch!important}
html body #app .grid:has(> .product-card-wrap){align-items:stretch!important}

html body #app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card,html body #app .hscroll.trending-scroll > .product-card-wrap.product-card-compact > .card,html body #app .hscroll.trending-scroll .product-card-wrap.product-card-compact > .card{padding-bottom:0!important}
html body #app .product-card-wrap.product-card-compact>.card>.product-card-total-line{padding-bottom:.6rem!important}
/* ---- levromart-flat-neutral-final ---- */
/* ---------- Product cards: spacing + no tap flash ---------- */
#app, #app *{-webkit-tap-highlight-color:transparent!important}
#app .product-card-wrap .card:active,#app .product-card-wrap .card:focus,#app .product-card-wrap .card:focus-within{outline:none!important;filter:none!important}
#app .card-cart-btn:focus,#app .card-cart-btn:focus-visible,#app .card-cart-btn:active{outline:none!important;box-shadow:none!important}
#app .product-card-compact h4{margin-bottom:.4rem!important}
#app .product-card-compact .product-card-meta{align-items:center!important;margin-top:.6rem!important;margin-bottom:0!important}
#app .product-card-compact .product-card-total-line{margin-top:.1rem!important}
/* ---------- Flat pages: no cards, simple dividing lines ---------- */
#app .cart-page .cart-card,#app .cart-page .cart-vendor-card,#app .cart-page .cart-summary,#app .cart-page .cart-delivery,#app .cart-page .cart-note{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#app .cart-page .cart-vendor-card{padding:0 0 1.1rem!important;margin:0 0 1.1rem!important;border-bottom:1px solid var(--border)!important}
#app .cart-page .cart-vendor-card .cart-card{padding-left:0!important;padding-right:0!important;border-top:1px solid var(--border)!important;margin-top:.8rem!important;padding-top:.8rem!important}
#app .cart-page .cart-items>*{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--border)!important}
#app .messages-conversation-list{gap:0!important}
#app .conv-row-wrap,#app .conv-list-item{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#app .conv-row-wrap{border-bottom:1px solid var(--border)!important}
#app .search-page-section .search-result-row{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid var(--border)!important;padding-left:0!important;padding-right:0!important}
#app .lm-related{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--border)}
#app .lm-related-title{margin:0 0 .8rem;font-size:1.05rem;font-weight:700}
/* ---------- Home: six actions keep their original look, just calmer (less saturated, a touch darker) ---------- */
/* ---------- Neutral accents instead of orange / purple ---------- */
#app input[type=checkbox],#app input[type=radio]{accent-color:#6b7a73}
/* ---------- Profile panel ---------- */
#profilePanel .lv-pp-stat b,#profilePanel .profile-view-full-link{color:#2fb07a!important}
#profilePanel .profile-settings-gear{background:transparent!important;border:0!important;box-shadow:none!important}
#profilePanel .lv-pp-row .lm-gear{flex:0 0 auto;margin-right:.7rem;opacity:.85}
#profilePanel .lv-pp-row:has(.lm-gear){display:flex;align-items:center}
/* ---------- Settings page ---------- */
#app .settings-page-header h2{font-size:1.2rem!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.25!important}
#app .settings-page-header p{font-size:.78rem!important}
#app .settings-page-header .settings-back-btn{width:2.3rem!important;height:2.3rem!important;font-size:.9rem!important}
#app .settings-page{padding-bottom:.5rem!important;margin-bottom:0!important;min-height:0!important}
/* ---------- Dialogs: Cancel left, action right, spread across the width ---------- */
.modal .flex:has(> button[id$="Cancel"]),.modal .flex:has(> .cc-cancel){display:grid!important;grid-template-columns:1fr 1fr;gap:.75rem;justify-content:stretch!important}
.modal .flex:has(> button[id$="Cancel"]) .btn,.modal .flex:has(> .cc-cancel) button{width:100%;min-height:48px;border-radius:999px!important;font-size:1rem;font-weight:600;margin:0}
.modal button[id$="Cancel"],.cc-cancel{order:-1;background:transparent!important;color:var(--text)!important;border:1px solid var(--border)!important}
#confirmModal .modal-content{max-width:420px!important;border-radius:20px!important;padding:1.4rem!important}
.order-action-pair .order-action-cancel,.order-action-pair .order-action-decline{order:-1}
.order-action-pair .order-action-edit{order:1}

#app .levro-quick-action{filter:none!important}
/* ---------- Product card: distance pill sits at the bottom of its row, just above the dividing line ---------- */
#app .product-card-compact .product-card-meta{align-items:flex-end!important}
#app .product-card-compact .product-card-meta .product-card-dist{align-self:flex-end!important;margin:0 0 .2rem!important}
#app .product-card-compact .product-card-meta > span:empty{align-self:flex-end!important}
/* ---------- Search results: cart button matches the product-card one ---------- */
#app .search-result-row .sr-cart{width:2.3rem!important;height:2.3rem!important;min-width:0!important;padding:0!important;border-radius:.85rem!important;background:transparent!important;border:2px solid #1faa6a!important;color:var(--text)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:.85rem!important;box-shadow:none!important}
#app .search-result-row .sr-cart.added{background:#1faa6a!important;color:#fff!important}
/* ---------- Dialog buttons: text centred ---------- */
.modal .flex:has(> button[id$="Cancel"]) .btn,.modal .flex:has(> .cc-cancel) button{display:flex!important;align-items:center;justify-content:center;text-align:center!important}
/* ---------- Settings: tighter bottom ---------- */
body:has(#settings-page) #app{padding-bottom:4.4rem!important}
body:has(#settings-page) .site-footer{display:none!important}
body:has(#settings-page) .settings-page{padding-bottom:0!important}
body:has(#settings-page) .settings-page > .settings-page-section:last-child{margin-bottom:0!important;padding-bottom:.4rem!important}

/* ---------- Product cards (final, beats the older "html body #app" rules) ---------- */
html body #app .product-card-compact .product-card-meta{align-items:flex-end!important}
html body #app .product-card-compact .product-card-meta .product-card-dist{align-self:flex-end!important;margin:0 0 .1rem!important}
html body #app .product-card-compact .product-card-meta > span:empty,html body #app .product-card-compact .product-card-meta .product-card-dist-empty{align-self:flex-end!important}
html body #app .product-card-compact h4{margin-bottom:.9rem!important}
/* ---- levromart-polish-20261006 ---- */
/* ============ 1. HOME: the six action tiles - bright and lively again ============ */
html body #app .levro-home-quick-actions .levro-quick-action{filter:saturate(1.12) brightness(1.02)!important;border-color:transparent!important}
html body #app .levro-home-quick-actions .levro-quick-mint,html body #app .levro-home-quick-actions .levro-quick-mint:hover,html body #app .levro-home-quick-actions .levro-quick-mint:focus,html body #app .levro-home-quick-actions .levro-quick-mint:active{background:#b4efcf!important}
html body #app .levro-home-quick-actions .levro-quick-peach,html body #app .levro-home-quick-actions .levro-quick-peach:hover,html body #app .levro-home-quick-actions .levro-quick-peach:focus,html body #app .levro-home-quick-actions .levro-quick-peach:active{background:#ffd8ae!important}
html body #app .levro-home-quick-actions .levro-quick-lavender,html body #app .levro-home-quick-actions .levro-quick-lavender:hover,html body #app .levro-home-quick-actions .levro-quick-lavender:focus,html body #app .levro-home-quick-actions .levro-quick-lavender:active{background:#d6ccff!important}
html body #app .levro-home-quick-actions .levro-quick-pink,html body #app .levro-home-quick-actions .levro-quick-pink:hover,html body #app .levro-home-quick-actions .levro-quick-pink:focus,html body #app .levro-home-quick-actions .levro-quick-pink:active{background:#ffcad6!important}
html body #app .levro-home-quick-actions .levro-quick-aqua,html body #app .levro-home-quick-actions .levro-quick-aqua:hover,html body #app .levro-home-quick-actions .levro-quick-aqua:focus,html body #app .levro-home-quick-actions .levro-quick-aqua:active{background:#b0f0e3!important}
html body #app .levro-home-quick-actions .levro-quick-blue,html body #app .levro-home-quick-actions .levro-quick-blue:hover,html body #app .levro-home-quick-actions .levro-quick-blue:focus,html body #app .levro-home-quick-actions .levro-quick-blue:active{background:#bcd8ff!important}

/* ============ 2. ADD-TO-CART icon: visible in light AND dark mode ============ */
html body #app{--lv-cart-green:#0f9d58}
:root[data-theme="dark"] body #app,:root[data-theme="black"] body #app{--lv-cart-green:#34d27b}
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){border:1.8px solid var(--lv-cart-green)!important;background:transparent!important;color:var(--lv-cart-green)!important;-webkit-text-fill-color:var(--lv-cart-green)!important}
html body #app .product-card-compact .card-cart-btn:not(.added) i,html body #app .card-cart-btn:not(.added) i,html body #app .product-card-compact .card-cart-btn:not(.added) i::before,html body #app .card-cart-btn:not(.added) i::before{color:var(--lv-cart-green)!important;-webkit-text-fill-color:var(--lv-cart-green)!important;opacity:1!important;visibility:visible!important}
html body #app .product-card-compact .card-cart-btn:not(.added) svg,html body #app .card-cart-btn:not(.added) svg{fill:var(--lv-cart-green)!important;color:var(--lv-cart-green)!important}
html body #app .card-cart-btn.added,html body #app .product-card-compact .card-cart-btn.added{background:var(--lv-cart-green)!important;border:1.8px solid var(--lv-cart-green)!important}
html body #app .card-cart-btn.added i,html body #app .product-card-compact .card-cart-btn.added i{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body #app .search-result-row .sr-cart:not(.added),html body #app .search-result-row .sr-cart:not(.added) i{color:var(--lv-cart-green)!important;-webkit-text-fill-color:var(--lv-cart-green)!important;border-color:var(--lv-cart-green)!important}

/* ============ 3. PRODUCT CARDS: spacing (browse grid + trending) ============ */
html body #app .grid > .product-card-wrap.product-card-compact{--lv-pad:.65rem}
html body #app .hscroll.trending-scroll .product-card-wrap.product-card-compact{--lv-pad:.95rem}
html body #app .product-card-wrap.product-card-compact > .card > h4{margin:.7rem 0 1.05rem!important;padding:0 var(--lv-pad)!important}
html body #app .product-card-wrap.product-card-compact > .card > h4 .pc-title-row{gap:.45rem!important}
html body #app .product-card-wrap.product-card-compact > .card > .product-card-compact-footer{padding:0 var(--lv-pad)!important;margin:0!important;min-height:1.5rem!important;align-items:center!important}
html body #app .product-card-wrap.product-card-compact > .card > .product-card-meta{padding:.5rem var(--lv-pad) .55rem!important;margin-top:.15rem!important;align-items:flex-end!important}
html body #app .product-card-wrap.product-card-compact > .card > .product-card-total-line{padding:.75rem var(--lv-pad) .8rem!important}
/* trending: distance pill sits down near the Total line, not up by the price */

/* ============ 4. SETTINGS: logout sits right above the bottom bar ============ */
html body:has(#settings-page){padding-bottom:calc(58px + env(safe-area-inset-bottom,0px) + .3rem)!important}
html body:has(#settings-page) #app{padding-bottom:0!important;margin-bottom:0!important}
html body:has(#settings-page) .settings-page,html body:has(#settings-page) #app .settings-page{padding-bottom:0!important;margin-bottom:0!important;min-height:0!important}
html body:has(#settings-page) #app .settings-page > .settings-page-section:last-child,html body:has(#settings-page) #app .settings-page-section:has(.settings-logout-row){padding-bottom:0!important;margin-bottom:0!important;border-bottom:0!important}
html body:has(#settings-page) #app .settings-logout-row{margin-bottom:0!important}
html body:has(#settings-page) > footer.site-footer{display:none!important}

/* ============ 5. PRODUCT PAGE: rounded, flat, calm - light and dark ============ */
html body #app .product-detail-media,html body #app .product-gallery-carousel,html body #app .product-gallery-track,html body #app .product-gallery-main{border-radius:20px!important;overflow:hidden!important}
html body #app .product-gallery-slide,html body #app .product-gallery-slide img,html body #app .product-gallery-main > img{border-radius:20px!important}
html body #app .product-gallery-thumb{border-radius:14px!important}
html body #app .product-gallery-count{border-radius:999px!important}
/* price: no orange block */
html body #app .product-price-hero{background:transparent!important;background-image:none!important;border:0!important;border-top:1px solid var(--lv-hair)!important;border-radius:0!important;box-shadow:none!important;padding:.9rem .1rem .6rem!important}
html body #app .product-price-hero .pph-label{color:var(--text-muted)!important;-webkit-text-fill-color:var(--text-muted)!important;font-weight:700!important}
html body #app .product-price-hero .pph-now{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
html body #app .product-price-hero .pph-was{color:var(--text-muted)!important;-webkit-text-fill-color:var(--text-muted)!important}
/* delivery / pickup: plain rows, only a quiet green ring when chosen */
html body #app .delivery-method-row label,html body #app .delivery-method-row:not(.cart-delivery *) label{background:transparent!important;background-image:none!important;border:1px solid var(--lv-hair)!important;border-radius:14px!important;box-shadow:none!important}
html body #app .delivery-method-row label:has(input:checked),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){background:color-mix(in srgb,var(--primary) 5%,transparent)!important;border:1.5px solid color-mix(in srgb,var(--primary) 55%,transparent)!important;box-shadow:none!important}
html body #app .delivery-method-row input[type=radio],html body #app .delivery-method-row input[type=checkbox]{accent-color:var(--primary)!important}
/* pay-before / pay-after notice: soft tint, no neon, no side bar */
html body #app .product-payment-plan-notice,html body #app .product-payment-plan-notice.pay-before,html body #app .product-payment-plan-notice.pay-after{background:color-mix(in srgb,var(--primary) 6%,transparent)!important;background-image:none!important;border:1px solid color-mix(in srgb,var(--primary) 20%,transparent)!important;border-left:1px solid color-mix(in srgb,var(--primary) 20%,transparent)!important;border-radius:14px!important;box-shadow:none!important}
html body #app .product-payment-plan-notice.pay-after{background:color-mix(in srgb,#b7791f 6%,transparent)!important;border-color:color-mix(in srgb,#b7791f 22%,transparent)!important}
/* comments: flat on the page, no highlighted box */
html body #app .product-comments-card,html body #app .package-comments-card{background:transparent!important;background-image:none!important;border:0!important;border-top:1px solid var(--lv-hair)!important;border-radius:0!important;box-shadow:none!important}
html body #app .product-comments-toggle,html body #app .product-comments-toggle:hover,html body #app .product-comments-toggle:active,html body #app .product-comments-toggle:focus{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;padding-left:.1rem!important;padding-right:.1rem!important}
html body #app .product-comments-panel,html body #app .product-comment-composer{background:transparent!important;border-radius:0!important;box-shadow:none!important}
html body #app .product-comment-composer{border-top:1px solid var(--lv-hair)!important;position:static!important}
html body #app .product-comment-composer textarea{background:transparent!important;border:1px solid var(--lv-hair)!important;border-radius:16px!important;box-shadow:none!important}
html body #app .product-comment-composer .product-comment-send-btn{border-radius:50%!important;box-shadow:none!important}
/* ---- levromart-polish-2-20261006 ---- */
/* ===== product page: Add to cart left, Place order right ===== */
html body #app .pd-buy-actions{flex-direction:row!important}
html body #app .pd-buy-actions .btn:first-child{flex:1!important}
html body #app .pd-buy-actions .btn:last-child{flex:1.3!important}
html body #app .pd-buy-actions .btn:only-child{flex:1!important}

/* ===== modern note icon ===== */
html body #app .df-label .lv-pen-ico{flex:0 0 auto;color:var(--primary,#3fb97f)!important;stroke:currentColor!important}

/* ===== tighter gap: Buy price -> Place order ===== */
html body #app .product-price-hero{margin:0!important;padding:.7rem .1rem .1rem!important;min-height:0!important}
html body #app .product-price-hero .pph-row{margin:0!important;min-height:0!important}
html body #app .product-detail-card{padding-bottom:.2rem!important;margin-bottom:0!important}
html body #app .product-detail-card > :last-child{margin-bottom:0!important}
html body #app .card:has(.pd-buy-actions){margin-top:0!important;padding-top:.55rem!important}
html body #app .card:has(.pd-buy-actions) > h3:first-child{margin:.15rem 0 .5rem!important}

/* ===== fee explainer + breakdown: readable in light mode ===== */
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table{background:color-mix(in srgb,var(--primary,#3fb97f) 5%,transparent)!important;border:1px solid color-mix(in srgb,var(--primary,#3fb97f) 18%,transparent)!important;box-shadow:none!important;border-radius:14px!important}
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc,
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc-body{opacity:1!important}
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc>summary,
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc>summary *{color:#3fb97f!important;-webkit-text-fill-color:#3fb97f!important;opacity:1!important;font-weight:700!important}
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc-row,
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc-row strong{color:#1E293B!important;-webkit-text-fill-color:#1E293B!important;opacity:1!important}
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc-row span,
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc small{color:#475569!important;-webkit-text-fill-color:#475569!important;opacity:1!important}
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc{border-top:1px dashed rgba(11,110,74,.35)!important}
:root:not([data-theme="dark"]):not([data-theme="black"]) body #app .price-breakdown-table .fee-calc-row{border-bottom-color:rgba(15,23,42,.12)!important}
:root[data-theme="dark"] body #app .price-breakdown-table .fee-calc>summary,:root[data-theme="black"] body #app .price-breakdown-table .fee-calc>summary,
:root[data-theme="dark"] body #app .price-breakdown-table .fee-calc>summary *,:root[data-theme="black"] body #app .price-breakdown-table .fee-calc>summary *{color:#5eeaa0!important;-webkit-text-fill-color:#5eeaa0!important}

/* ===== comments: everything flat on the page ===== */
html body #app .product-comments-card,html body #app .product-comments-card :where(div,section,form,ul,li,p,label,textarea):not([class*="avatar"]):not(.btn):not(.badge){background:transparent!important;background-image:none!important;box-shadow:none!important}
html body #app .product-comments-card .product-comment-compose-row{width:100%!important;margin:.5rem 0 0!important;padding:0!important;border:0!important;border-radius:0!important}
html body #app .product-comments-card .product-comment-composer{padding:.6rem 0 0!important;border:0!important;border-top:1px solid var(--lv-hair)!important;border-radius:0!important}
html body #app .product-comments-card .product-comment-composer textarea{border:0!important;border-bottom:1px solid var(--lv-hair)!important;border-radius:0!important;padding:.55rem .1rem!important;min-height:2.6rem!important;outline:0!important}
html body #app .product-comments-card .product-comment-composer textarea:focus{border-bottom-color:var(--primary,#3fb97f)!important}
html body #app .product-comments-card .product-comment-compose-row > button{width:2.4rem!important;height:2.4rem!important;min-width:2.4rem!important;padding:0!important;border-radius:50%!important;box-shadow:none!important}
html body #app .product-comments-toggle{background:transparent!important;border:0!important;box-shadow:none!important}
/* ---- levromart-polish-3-20261006 ---- */
/* ===== product cards: classic layout back; only the photo is taller ===== */
:root:root body #app .product-card-wrap.product-card-compact > .card{display:flex!important;flex-direction:column!important}
:root body #app .grid:has(> .product-card-wrap) > .product-card-wrap > .card > .product-img,
:root body #app .grid:has(> .product-card-wrap) > .product-card-wrap.product-card-compact > .card > .product-img,
:root body #app .hscroll.trending-scroll .product-card-wrap.product-card-compact > .card > .product-img,
:root body #app .vendor-product-card-grid .product-card-wrap > .card > .product-img,
:root body #app .vendor-product-card-grid .product-card-wrap.product-card-compact > .card > .product-img{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;aspect-ratio:1/1.1!important}
:root body #app .grid:has(> .product-card-wrap) > .product-card-wrap .card > .product-img img,
:root body #app .hscroll.trending-scroll .product-card-wrap .card > .product-img img,
:root body #app .vendor-product-card-grid .product-card-wrap .card > .product-img img{width:100%!important;height:100%!important;object-fit:cover!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > h4{margin:.55rem 0 .15rem!important;padding:0 var(--lv-pad,.65rem)!important;min-height:0!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > .product-card-compact-footer{display:flex!important;justify-content:flex-start!important;align-items:center!important;text-align:left!important;padding:0 var(--lv-pad,.65rem)!important;margin:0!important;min-height:0!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > .product-card-compact-footer > *{margin:0!important;text-align:left!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > .product-card-meta{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:flex-end!important;margin:.85rem 0 0!important;padding:0 var(--lv-pad,.65rem) .3rem!important;min-height:0!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > .product-card-meta > .product-card-dist{margin:0!important;align-self:flex-end!important;justify-self:auto!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > .product-card-meta > :not(.product-card-dist):not(span:empty){margin:0 0 0 auto!important;align-self:flex-end!important;flex:0 0 auto!important}
:root:root body #app .product-card-wrap.product-card-compact > .card > .product-card-total-line{margin:.2rem var(--lv-pad,.65rem) .6rem!important;padding:.45rem 0 0!important}

/* ===== all vendors: flat outline view icons (like the store icon) ===== */
:root body #app .vd-views{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;gap:.1rem!important}
:root body #app .vd-page .vd-views button.vd-view{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:10px!important;width:2.5rem!important;height:2.4rem!important;color:var(--text-muted)!important;-webkit-text-fill-color:currentColor!important}
:root body #app .vd-page .vd-views button.vd-view svg{display:block;width:22px;height:22px;stroke:currentColor!important;fill:none!important}
:root body #app .vd-page .vd-views button.vd-view.active,:root body #app .vd-views #vendorsViewGridBtn.active,:root body #app .vd-views #vendorsViewListBtn.active,:root body #app .vd-views #vendorsViewMapBtn.active{background:transparent!important;box-shadow:none!important;color:var(--primary,#3fb97f)!important;-webkit-text-fill-color:currentColor!important}
:root body #app .vd-page .vd-views button.vd-view.active svg{stroke-width:2.1}
:root[data-theme="dark"] body #app .vd-page .vd-views button.vd-view.active,:root[data-theme="black"] body #app .vd-page .vd-views button.vd-view.active{color:#4cc38a!important}

/* ===== one green for the small icons and highlights on the product page ===== */
html body #app{--lv-ico-green:#3fb97f}
:root[data-theme="dark"] body #app,:root[data-theme="black"] body #app{--lv-ico-green:#4cc38a}
:root body #app .df-label i,:root body #app .df-label .lv-pen-ico,:root body #app .pd-step-title i,:root body #app .pd-about > summary i:first-child,:root body #app .product-storefront-share-btn,:root body #app .product-storefront-share-btn i,:root body #app .sv-price,:root body #app #selectedVariantName,:root body #app .fee-calc-title i{color:var(--lv-ico-green)!important;-webkit-text-fill-color:var(--lv-ico-green)!important}
:root[data-theme="dark"] body #app .df-label i,:root[data-theme="black"] body #app .df-label i,:root[data-theme="dark"] body #app .pd-step-title i,:root[data-theme="black"] body #app .pd-step-title i{color:var(--lv-ico-green)!important;-webkit-text-fill-color:var(--lv-ico-green)!important}
:root body #app .df-label .lv-pen-ico{stroke:currentColor!important}
/* ---- levromart-polish-4-20261006 ---- */
: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}
.vd-page,.search-page{--vd-g:#3fb97f!important;--vd-gt:#3fb97f!important}
/* vendors: slim pill search + icon-only filter */
html body #app .vd-head{margin:.1rem 0 .45rem!important}
html body #app .vd-seg{margin-bottom:.35rem!important}
html body #app .vd-tools{margin:0 0 .45rem!important;gap:.45rem!important;align-items:center}
html body #app .vd-search{min-height:2.35rem!important;height:2.35rem!important;border-radius:999px!important;padding:0 .85rem!important}
html body #app .vd-search input{font-size:.92rem!important}
html body #app .vd-filter-btn{min-height:2.35rem!important;height:2.35rem!important;width:2.6rem!important;padding:0!important;justify-content:center!important;border-radius:14px!important}
/* product price block: centred */
html body #app .product-price-hero{text-align:center!important;padding:.4rem 0!important;margin:.2rem 0 .6rem!important}
html body #app .product-price-hero .pph-row{justify-content:center!important}
/* search page: tighter top */
html body #app .search-page-head{padding-top:0!important}
html body #app .search-page-bar{margin-bottom:.5rem!important}
html body #app .search-page-input-wrap{height:2.4rem!important}
html body #app .search-page-filters{margin-bottom:.4rem!important}
body:has(.search-page) #app{padding-top:.1rem!important}
.search-page .search-page-results{padding-top:.2rem}
/* circular vendor row */
.lv-svr{margin:.3rem 0 .9rem;padding-bottom:.8rem;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.lv-svr-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .5rem}
.lv-svr-head strong{font-size:1.05rem;font-weight:800}
.lv-svr-head button{border:0;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);font:inherit;font-size:.8rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;cursor:pointer}
.lv-svr-row{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.1rem 0 .2rem}
.lv-svr-row::-webkit-scrollbar{display:none}
.lv-svr-item{flex:0 0 4.6rem;width:4.6rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.lv-svr-ico{width:3.7rem;height:3.7rem;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#3fb97f 22%,var(--card));color:#3fb97f;font-weight:800;font-size:1.25rem}
.lv-svr-ico img{width:100%;height:100%;object-fit:cover;display:block}
.lv-svr-name{font-size:.74rem;font-weight:600;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}
/* ---- levromart-exact-logo-20261006 ---- */
#levromartSplash .lv-sp-foot img.lv-sp-foot-logo{width:28px!important;height:28px!important;border-radius:8px!important;opacity:1!important;filter:none!important;-webkit-filter:none!important}
html body #aiChatFab .ai-chat-fab-logo,html body #app #aiChatFab .ai-chat-fab-logo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important;filter:none!important;-webkit-filter:none!important;background:transparent!important;margin:0!important}
html body #aiChatFab{overflow:hidden!important;border-radius:50%!important}
html body #aiChatFab::before,html body #aiChatFab::after{display:none!important}
html body #tourLeviLogo,html body #aiChatHeaderLogo,html body #installModalLogo,html body .settings-levi-logo{filter:none!important;-webkit-filter:none!important;border-radius:50%!important;object-fit:cover!important;background:transparent!important}