/*
  SaloCart V4.0 — Shopper Navigation & Dashboard Home
  Loaded after all legacy UI layers. No framework or database changes.
*/

.skip-link{position:fixed;left:14px;top:10px;z-index:5000;transform:translateY(-170%);padding:10px 14px;border-radius:12px;background:var(--sc-ink);color:#fff;font-family:var(--font-ui);font-size:.75rem;font-weight:800;text-decoration:none;box-shadow:var(--sc-shadow-sm);transition:transform .18s ease}.skip-link:focus{transform:translateY(0);color:#fff}

/* The signed-in home route behaves like a real shopper home, not a generic landing page. */
.desktop-nav .smart-home-nav.active{background:var(--sc-mint)!important;color:var(--sc-green)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc-green) 16%,transparent)!important}
.mobile-nav .smart-home-nav.active{background:var(--sc-mint)!important;color:var(--sc-green)!important}

/* Welcome identity makes the dashboard immediately feel personal without using a large hero. */
.shopper-dashboard-v4{padding-top:28px!important}.shopper-welcome-bar-v4{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 21px;border:1px solid color-mix(in srgb,var(--sc-line) 92%,transparent);border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--sc-surface) 97%,#fff),color-mix(in srgb,var(--sc-mint) 35%,var(--sc-surface)));box-shadow:var(--sc-shadow-xs)}.shopper-welcome-identity{display:flex;align-items:center;gap:13px;min-width:0}.shopper-welcome-avatar-wrap{display:grid;place-items:center;width:54px;height:54px;flex:0 0 54px;border-radius:18px;background:linear-gradient(145deg,var(--sc-green),var(--sc-green-deep));box-shadow:0 10px 22px color-mix(in srgb,var(--sc-green) 20%,transparent)}.shopper-welcome-avatar{display:grid;overflow:hidden;place-items:center;width:48px;height:48px;border:2px solid color-mix(in srgb,#fff 85%,transparent);border-radius:15px;background:color-mix(in srgb,var(--sc-mint) 18%,#fff);color:var(--sc-green-deep);font-family:var(--font-display);font-size:1.15rem;font-weight:800}.shopper-welcome-avatar .avatar-photo{width:100%;height:100%;object-fit:cover}.shopper-welcome-bar-v4 h1{margin:2px 0 4px;color:var(--sc-ink);font-family:var(--font-display);font-size:1.42rem;font-weight:800;letter-spacing:-.065em}.shopper-welcome-bar-v4 p{max-width:560px;margin:0;color:var(--sc-muted);font-size:.72rem;line-height:1.52}.shopper-welcome-bar-v4 .shopper-welcome-tools{flex:0 0 auto}.shopper-welcome-bar-v4 .shopper-inbox-button,.shopper-welcome-bar-v4 .shopper-cart-button{min-height:43px!important;border-radius:14px!important}

/* Five compact shortcuts stay visible, scroll gracefully on narrow phones, and never shrink their text into unreadability. */
.shopper-command-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:13px;padding:7px;border:1px solid var(--sc-line);border-radius:19px;background:color-mix(in srgb,var(--sc-surface) 95%,transparent);box-shadow:var(--sc-shadow-xs)}.shopper-command-item{position:relative;display:flex;min-width:0;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 9px;border:0;border-radius:13px;background:transparent;color:var(--sc-ink-soft);font-family:var(--font-ui);font-size:.68rem;font-weight:820;line-height:1;text-align:center;transition:background .18s ease,color .18s ease,transform .18s ease}.shopper-command-item>span{position:relative;display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:9px;background:var(--sc-surface-alt);color:var(--sc-blue);font-size:.95rem}.shopper-command-item>span b{position:absolute;right:-7px;top:-8px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border:2px solid var(--sc-surface);border-radius:99px;background:var(--sc-coral);color:#fff;font-size:.51rem;font-style:normal;font-variant-numeric:tabular-nums}.shopper-command-item strong{overflow:hidden;max-width:100%;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.shopper-command-item:hover,.shopper-command-item:focus-visible{background:var(--sc-mint);color:var(--sc-green);outline:none}.shopper-command-item.active{background:linear-gradient(135deg,var(--sc-green),var(--sc-green-deep));color:#fff;box-shadow:0 8px 16px color-mix(in srgb,var(--sc-green) 18%,transparent)}.shopper-command-item.active>span{background:rgba(255,255,255,.16);color:#fff}.shopper-command-item:active{transform:scale(.98)}

/* Stronger priority card and a more intentional quick-action hierarchy. */
.shopper-dashboard-v4 .shopper-dayline{margin-top:14px}.shopper-dashboard-v4 .shopper-next-card{border-width:1px;box-shadow:var(--sc-shadow-xs)}.shopper-dashboard-v4 .shopper-next-action>.btn-sc,.shopper-dashboard-v4 .shopper-next-action>.btn-sc-alt{min-width:146px}.shopper-quick-section{position:relative}.dashboard-quick-grid-v4 .dashboard-quick-action{min-height:92px}.dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(1) .dashboard-quick-icon{background:var(--sc-mint);color:var(--sc-green)}.dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(2) .dashboard-quick-icon{background:var(--sc-blue-soft);color:var(--sc-blue)}.dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(3) .dashboard-quick-icon{background:#FFF2DE;color:#B96D17}.dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(4) .dashboard-quick-icon{background:#FCECEF;color:#C94D63}.dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(5) .dashboard-quick-icon{background:var(--sc-lime-soft);color:#6A851E}.dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(6) .dashboard-quick-icon{background:#F0ECFF;color:#6A55B5}.dashboard-quick-grid-v4 .dashboard-quick-action{border-color:color-mix(in srgb,var(--sc-line) 82%,transparent)}.dashboard-quick-grid-v4 .dashboard-quick-action:hover{border-color:color-mix(in srgb,var(--sc-green) 28%,var(--sc-line));box-shadow:0 12px 27px rgba(11,118,88,.10)}

/* Keep the two deal panels visually and spatially independent at every breakpoint. */
.shopper-dashboard-columns-v4{align-items:start}.shopper-dashboard-columns-v4 .shopper-main-stack{display:flex!important;min-width:0!important;flex-direction:column!important;gap:18px!important}.shopper-dashboard-columns-v4 .shopper-saved-panel,.shopper-dashboard-columns-v4 .shopper-popular-panel{position:relative!important;isolation:isolate!important;min-width:0!important;overflow:visible!important;clear:both!important}.shopper-dashboard-columns-v4 .shopper-popular-panel{margin:0!important}.shopper-dashboard-columns-v4 .dashboard-popular-grid{min-width:0!important}

/* Mobile More sheet: exposes actions without forcing users through an account-only menu. */
.mobile-menu-sheet{max-width:500px!important}.mobile-menu-profile{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:13px;border:1px solid var(--sc-line);border-radius:18px;background:linear-gradient(135deg,var(--sc-mint),var(--sc-surface))}.mobile-menu-avatar{display:grid;place-items:center;width:47px;height:47px;flex:0 0 47px;border-radius:15px;background:var(--sc-green);box-shadow:0 8px 17px color-mix(in srgb,var(--sc-green) 20%,transparent)}.mobile-menu-avatar-image{display:grid;overflow:hidden;place-items:center;width:42px;height:42px;border:2px solid rgba(255,255,255,.8);border-radius:13px;background:#fff;color:var(--sc-green-deep);font-family:var(--font-display);font-size:1rem;font-weight:800}.mobile-menu-avatar-image .avatar-photo{width:100%;height:100%;object-fit:cover}.mobile-menu-profile>div:last-child{display:flex;min-width:0;flex-direction:column;gap:2px}.mobile-menu-profile strong{overflow:hidden;color:var(--sc-ink);font-family:var(--font-display);font-size:.95rem;letter-spacing:-.04em;text-overflow:ellipsis;white-space:nowrap}.mobile-menu-profile span{color:var(--sc-green);font-size:.62rem;font-weight:820}.mobile-menu-profile small{overflow:hidden;color:var(--sc-muted);font-size:.59rem;text-overflow:ellipsis;white-space:nowrap}.mobile-menu-list{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sc-line);border-radius:18px;background:var(--sc-surface)}.mobile-menu-item{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;min-height:67px;padding:10px 12px;border:0;border-bottom:1px solid var(--sc-line);background:transparent;color:var(--sc-ink);text-align:left;transition:background .18s ease}.mobile-menu-item:last-child{border-bottom:0}.mobile-menu-item:hover,.mobile-menu-item:focus-visible{background:var(--sc-soft);outline:none}.mobile-menu-item:active{background:var(--sc-mint)}.mobile-menu-item>span:nth-child(2){display:flex;min-width:0;flex-direction:column;gap:2px}.mobile-menu-item strong{overflow:hidden;font-family:var(--font-ui);font-size:.74rem;font-weight:820;text-overflow:ellipsis;white-space:nowrap}.mobile-menu-item small{overflow:hidden;color:var(--sc-muted);font-size:.59rem;text-overflow:ellipsis;white-space:nowrap}.mobile-menu-item>i{color:var(--sc-muted);font-size:.76rem}.mobile-menu-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-size:1rem}.mobile-menu-icon.tone-green{background:var(--sc-mint);color:var(--sc-green)}.mobile-menu-icon.tone-blue{background:var(--sc-blue-soft);color:var(--sc-blue)}.mobile-menu-icon.tone-coral{background:#FCECEF;color:#C94D63}.mobile-menu-icon.tone-lime{background:var(--sc-lime-soft);color:#718A28}.mobile-menu-icon.tone-violet{background:#F0ECFF;color:#6A55B5}.mobile-menu-icon.tone-orange{background:#FFF2DE;color:#B96D17}.mobile-menu-icon.tone-slate{background:var(--sc-surface-alt);color:var(--sc-ink-soft)}.mobile-menu-signout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:12px;border:1px solid color-mix(in srgb,var(--sc-coral) 32%,var(--sc-line));border-radius:14px;background:color-mix(in srgb,var(--sc-coral) 6%,var(--sc-surface));color:var(--sc-coral);font-family:var(--font-ui);font-size:.72rem;font-weight:820}.mobile-menu-signout:hover{background:color-mix(in srgb,var(--sc-coral) 11%,var(--sc-surface))}

/* Dark mode keeps the navigation calm, with strong text and readable tap targets. */
html[data-theme="dark"] .shopper-welcome-bar-v4{background:linear-gradient(135deg,color-mix(in srgb,var(--sc-surface) 96%,#14382b),var(--sc-surface-alt));border-color:var(--sc-line)}html[data-theme="dark"] .shopper-command-nav,html[data-theme="dark"] .mobile-menu-list{background:color-mix(in srgb,var(--sc-surface) 94%,transparent)}html[data-theme="dark"] .shopper-command-item>span{background:var(--sc-surface-alt)}html[data-theme="dark"] .mobile-menu-profile{background:linear-gradient(135deg,var(--sc-surface-alt),var(--sc-surface)}html[data-theme="dark"] .mobile-menu-item:hover{background:var(--sc-surface-alt)}html[data-theme="dark"] .dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(3) .dashboard-quick-icon{background:#3B2A18;color:#FFC377}html[data-theme="dark"] .dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(4) .dashboard-quick-icon{background:#392329;color:#FFACB5}html[data-theme="dark"] .dashboard-quick-grid-v4 .dashboard-quick-action:nth-child(6) .dashboard-quick-icon{background:#30274A;color:#C3B5FF}

@media(min-width:992px){.shopper-dashboard-v4{padding-top:34px!important}.shopper-command-nav{grid-template-columns:repeat(5,max-content);justify-content:flex-start;padding:6px;width:max-content;max-width:100%}.shopper-command-item{padding:9px 13px}.shopper-dashboard-v4 .shopper-welcome-bar-v4{padding:22px 24px}.shopper-dashboard-v4 .shopper-welcome-bar-v4 h1{font-size:1.62rem}.shopper-dashboard-v4 .dashboard-quick-grid-v4{grid-template-columns:repeat(6,minmax(0,1fr))}.dashboard-quick-grid-v4 .dashboard-quick-action{grid-template-columns:36px minmax(0,1fr);min-height:82px;padding:12px}.dashboard-quick-grid-v4 .dashboard-quick-action>i{display:block}.dashboard-quick-grid-v4 .dashboard-quick-action small{display:block;white-space:nowrap}.dashboard-quick-grid-v4 .dashboard-quick-icon{width:36px;height:36px}.shopper-dashboard-columns-v4 .shopper-main-stack{gap:20px!important}}

@media(max-width:767.98px){.shopper-dashboard-v4{padding-top:17px!important}.shopper-welcome-bar-v4{align-items:flex-start;flex-direction:column;gap:13px;padding:15px;border-radius:21px}.shopper-welcome-identity{gap:10px}.shopper-welcome-avatar-wrap{width:47px;height:47px;flex-basis:47px;border-radius:15px}.shopper-welcome-avatar{width:42px;height:42px;border-radius:13px;font-size:.95rem}.shopper-welcome-bar-v4 h1{font-size:1.32rem}.shopper-welcome-bar-v4 p{font-size:.67rem;line-height:1.48}.shopper-welcome-bar-v4 .shopper-welcome-tools{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:8px}.shopper-welcome-bar-v4 .shopper-inbox-button,.shopper-welcome-bar-v4 .shopper-cart-button{justify-content:center;width:100%;min-height:42px!important}.shopper-command-nav{display:flex;overflow-x:auto;gap:7px;margin:10px -2px 0;padding:6px 2px 8px;border:0;border-radius:0;background:transparent;box-shadow:none;scrollbar-width:none}.shopper-command-nav::-webkit-scrollbar{display:none}.shopper-command-item{min-width:74px;flex:0 0 74px;flex-direction:column;gap:4px;min-height:67px;padding:7px 5px;border:1px solid var(--sc-line);border-radius:16px;background:var(--sc-surface);box-shadow:var(--sc-shadow-xs)}.shopper-command-item>span{width:26px;height:26px}.shopper-command-item strong{font-size:.56rem}.shopper-command-item.active{border-color:transparent}.shopper-dashboard-v4 .shopper-dayline{margin-top:1px}.shopper-dashboard-v4 .shopper-next-action>.btn-sc,.shopper-dashboard-v4 .shopper-next-action>.btn-sc-alt{min-width:0}.dashboard-quick-grid-v4{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashboard-quick-grid-v4 .dashboard-quick-action:last-child{grid-column:auto!important;grid-template-columns:1fr!important;min-height:93px!important}.dashboard-quick-grid-v4 .dashboard-quick-action:last-child>i{display:none!important}.dashboard-quick-grid-v4 .dashboard-quick-action:last-child small{white-space:normal!important}.shopper-dashboard-columns-v4{margin-top:16px!important}.shopper-dashboard-columns-v4 .shopper-main-stack{gap:13px!important}.shopper-dashboard-columns-v4 .shopper-saved-panel,.shopper-dashboard-columns-v4 .shopper-popular-panel{padding:14px!important}.mobile-menu-sheet{max-width:100%!important}.mobile-menu-item{min-height:64px}.mobile-menu-item small{font-size:.57rem}}

@media(max-width:390px){.shopper-command-item{min-width:69px;flex-basis:69px}.shopper-command-item strong{font-size:.53rem}.shopper-welcome-bar-v4 .shopper-inbox-button,.shopper-welcome-bar-v4 .shopper-cart-button{font-size:.66rem!important}.mobile-menu-item{grid-template-columns:38px minmax(0,1fr) 15px;gap:9px;padding:9px}.mobile-menu-icon{width:38px;height:38px;border-radius:12px}.mobile-menu-profile{padding:11px}}

@media(prefers-reduced-motion:reduce){.skip-link,.shopper-command-item,.mobile-menu-item,.dashboard-quick-grid-v4 .dashboard-quick-action{transition:none!important}}
