/*
  SaloCart V3.4 — Aura mobile polish layer
  Loaded after V3.3. Keeps all API and database behaviour intact.
  Brand direction: community emerald + professional ink + clear sky accents.
*/
:root{
  --sc-green:#087A57;
  --sc-green-deep:#075C43;
  --sc-green-dark:#053E30;
  --sc-blue:#2F69E7;
  --sc-blue-soft:#EAF1FF;
  --sc-lime:#C7E970;
  --sc-lime-soft:#F4F9DF;
  --sc-mint:#E9F8F0;
  --sc-mint-strong:#D7F0E2;
  --sc-orange:#E88C2D;
  --sc-ink:#10252B;
  --sc-ink-soft:#4C6268;
  --sc-muted:#70848A;
  --sc-line:#D9E7E3;
  --sc-line-strong:#C4D9D2;
  --sc-soft:#F5F8F8;
  --sc-surface:#FFFFFF;
  --sc-surface-alt:#F7FAFA;
  --sc-shadow-xs:0 2px 10px rgba(18,52,47,.055);
  --sc-shadow-sm:0 12px 28px rgba(18,52,47,.09);
  --sc-shadow-lg:0 28px 68px rgba(10,41,35,.17);
  --font-display:"Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tap-size:44px;
}

html{background:var(--sc-soft)}
body{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.012em;
  background:
    radial-gradient(circle at 100% -8%,rgba(47,105,231,.095),transparent 26rem),
    radial-gradient(circle at -5% 22%,rgba(199,233,112,.12),transparent 25rem),
    linear-gradient(180deg,#FCFDFD 0%,#F6F9F9 56%,#F4F8F7 100%);
}
html[data-theme="dark"]{
  --sc-green:#49D69A;
  --sc-green-deep:#A5F6CF;
  --sc-green-dark:#073E2E;
  --sc-blue:#8BB2FF;
  --sc-blue-soft:#1C2C45;
  --sc-lime:#D1EF86;
  --sc-lime-soft:#293B20;
  --sc-mint:#123D2E;
  --sc-mint-strong:#184C39;
  --sc-orange:#FFC16B;
  --sc-ink:#EFFAF6;
  --sc-ink-soft:#C2D6CE;
  --sc-muted:#92AAA1;
  --sc-line:#2A4A40;
  --sc-line-strong:#3A6456;
  --sc-soft:#091410;
  --sc-surface:#101C18;
  --sc-surface-alt:#14251F;
  --sc-shadow-xs:0 3px 13px rgba(0,0,0,.23);
  --sc-shadow-sm:0 13px 34px rgba(0,0,0,.29);
  --sc-shadow-lg:0 31px 73px rgba(0,0,0,.43);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 100% 0,rgba(76,133,255,.10),transparent 27rem),
    radial-gradient(circle at 0 32%,rgba(73,214,154,.075),transparent 22rem),
    linear-gradient(180deg,#0B1712 0%,#09130F 60%,#0C1712 100%);
}

/* Typography: clearer hierarchy and calmer numeric information. */
.brand-copy strong,.page-header h1,.page-header h2,.sheet-head h2,.empty-state h3,.cart-empty h3,
.hero h1,.hero-cart-card strong,.dashboard-banner h1,.stat-card strong,.order-number,.deal-card h3,
.deal-price-grid strong,.cart-total strong,.checkout-total strong,.account-menu strong{
  font-family:var(--font-display)!important;
  font-variation-settings:"opsz" 32;
}
.page-header h1,.hero h1{letter-spacing:-.062em!important}
.page-header h1{font-weight:800!important}
.page-header h2{font-weight:800!important;letter-spacing:-.047em!important}
.page-header p,.hero-copy{font-size:.88rem!important;line-height:1.66!important}
.section-kicker{font-family:var(--font-ui);font-size:.64rem!important;letter-spacing:.115em!important}
.deal-price-grid strong,.cart-total strong,.checkout-total strong,.stat-card strong,.order-total{font-variant-numeric:tabular-nums lining-nums}
.money-value{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.035em}

/* Header becomes compact and more deliberate, without sacrificing touch targets. */
.topbar{
  height:70px;
  background:color-mix(in srgb,var(--sc-surface) 88%,transparent)!important;
  border-bottom-color:color-mix(in srgb,var(--sc-line) 92%,transparent)!important;
  box-shadow:0 5px 22px rgba(12,50,40,.045)!important;
}
html[data-theme="dark"] .topbar{box-shadow:0 5px 24px rgba(0,0,0,.18)!important}
.topbar-inner{min-height:70px;gap:14px!important}
.brand-button{min-height:var(--tap-size);padding:0 2px!important}
.brand-mark{
  width:42px!important;height:42px!important;border-radius:14px!important;
  background:linear-gradient(145deg,#0A825C 0%,#064C3A 100%)!important;
  box-shadow:0 9px 19px rgba(5,91,64,.21),inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.brand-mark i{font-size:1.25rem!important}.brand-mark b{bottom:5px!important}
.brand-copy strong{font-size:1.16rem!important;letter-spacing:-.07em!important}
.brand-copy small{font-family:var(--font-ui);font-size:.57rem!important;font-weight:700!important;letter-spacing:.005em!important}
.desktop-nav{gap:3px!important;margin-left:15px!important}
.desktop-nav button{min-height:var(--tap-size)!important;border-radius:13px!important;font-family:var(--font-ui);font-size:.77rem!important;letter-spacing:-.012em!important}
.desktop-nav button.active{background:var(--sc-blue-soft)!important;color:var(--sc-blue)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc-blue) 16%,transparent)!important}
.desktop-nav button:hover{color:var(--sc-green)!important;background:var(--sc-mint)!important}
.top-actions{gap:7px!important}
.icon-button,.account-button,.install-button{min-height:var(--tap-size)!important}
.icon-button{height:var(--tap-size)!important;width:var(--tap-size)!important;border-radius:14px!important;background:var(--sc-surface-alt)!important;color:var(--sc-ink-soft)!important;border-color:var(--sc-line)!important}
.icon-button:hover{background:var(--sc-surface)!important;color:var(--sc-green)!important}
.cart-button{background:var(--sc-mint)!important;border-color:#CBEAD8!important;color:var(--sc-green)!important}
.cart-badge{background:#E76B4D!important;border-color:var(--sc-surface)!important}
.location-pill{background:var(--sc-surface-alt)!important;border-color:var(--sc-line)!important;color:var(--sc-ink-soft)!important}
.location-pill i{color:var(--sc-blue)!important}

/* Reliable buttons and form controls, with a commerce-grade visual hierarchy. */
.btn-sc,.btn-sc-alt,.btn-sc-light,.btn-sc-danger{
  min-height:var(--tap-size)!important;border-radius:14px!important;font-family:var(--font-ui)!important;
  font-size:.78rem!important;font-weight:800!important;letter-spacing:-.012em!important;
}
.btn-sc{background:linear-gradient(135deg,#087A57 0%,#075641 100%)!important;box-shadow:0 10px 21px rgba(5,101,71,.18)!important}
.btn-sc:hover{background:linear-gradient(135deg,#076747 0%,#064C3A 100%)!important;box-shadow:0 13px 26px rgba(5,89,63,.22)!important}
.btn-sc-alt{background:var(--sc-blue-soft)!important;color:var(--sc-blue)!important;border:1px solid color-mix(in srgb,var(--sc-blue) 14%,transparent)!important}
.btn-sc-light{background:var(--sc-surface)!important;border-color:var(--sc-line)!important;color:var(--sc-ink)!important}
.form-control,.form-select,.input-group-text{min-height:48px!important;border-radius:14px!important;font-family:var(--font-ui)!important;font-size:.84rem!important;border-color:var(--sc-line)!important;background:var(--sc-surface)!important;color:var(--sc-ink)!important}
.form-control::placeholder{color:var(--sc-muted)!important;opacity:.85}
.form-control:focus,.form-select:focus{border-color:color-mix(in srgb,var(--sc-blue) 65%,white)!important;box-shadow:0 0 0 .24rem color-mix(in srgb,var(--sc-blue) 14%,transparent)!important}
.input-group>.input-group-text{background:var(--sc-surface-alt)!important;color:var(--sc-blue)!important}
.form-label{font-family:var(--font-ui)!important;font-size:.74rem!important;letter-spacing:.005em!important;color:var(--sc-ink-soft)!important}

/* Homepage and deal discovery: focus on scanability, prices and next action. */
.hero{
  border-radius:0 0 30px 30px!important;
  background:
    radial-gradient(circle at 86% 17%,rgba(199,233,112,.48) 0,rgba(199,233,112,0) 17rem),
    radial-gradient(circle at 8% 122%,rgba(47,105,231,.22) 0,rgba(47,105,231,0) 26rem),
    linear-gradient(121deg,#053E30 0%,#075C43 54%,#087A57 100%)!important;
}
.hero .container-xxl{padding-top:46px!important;padding-bottom:42px!important}
.hero-inner{min-height:360px!important}
.hero h1{font-size:clamp(2.05rem,4.8vw,3.65rem)!important;line-height:1.02!important}
.hero h1 em{color:#E3F7AE!important}
.hero-search{min-height:58px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:17px!important;box-shadow:0 15px 31px rgba(0,27,19,.22)!important}
.hero-figure{border-radius:16px!important}.hero-figure strong{font-family:var(--font-display)!important}
.hero-cart-card{border-radius:24px!important}.hero-cart-icon{background:var(--sc-blue-soft)!important;color:var(--sc-blue)!important}
.hero-cart-card>i{color:var(--sc-green)!important}

.catalog-toolbar,.notice-card,.info-card,.list-card,.timeline-card,.tier-card,.table-card,.stat-card,.how-step,.order-card,.checkout-summary-card,.payment-box{
  border-color:var(--sc-line)!important;
  box-shadow:var(--sc-shadow-xs)!important;
}
.catalog-toolbar{border-radius:18px!important;background:color-mix(in srgb,var(--sc-surface) 96%,transparent)!important}
.filter-chip{font-family:var(--font-ui)!important;font-size:.72rem!important;font-weight:750!important;border-radius:999px!important;min-height:36px!important}
.filter-chip.active{background:var(--sc-blue-soft)!important;color:var(--sc-blue)!important;border-color:color-mix(in srgb,var(--sc-blue) 20%,transparent)!important}
.deal-grid{gap:16px!important}
.deal-card{border:1px solid var(--sc-line)!important;border-radius:20px!important;background:var(--sc-surface)!important;box-shadow:var(--sc-shadow-xs)!important;overflow:hidden}
.deal-card:hover{box-shadow:var(--sc-shadow-sm)!important}
.deal-media{background:linear-gradient(150deg,#EAF5F0,#F6F9F9)!important}
.deal-card h3{font-size:.96rem!important;line-height:1.35!important;letter-spacing:-.032em!important}
.deal-meta{color:var(--sc-ink-soft)!important}
.deal-price-grid{background:var(--sc-surface-alt)!important;border-radius:15px!important}
.deal-price-grid>div+div{border-left-color:var(--sc-line)!important}
.deal-price-grid small{color:var(--sc-muted)!important}.deal-price-grid strong{color:var(--sc-ink)!important;font-size:1.1rem!important}
.deal-price-grid .best-price strong{color:var(--sc-green)!important}
.savings-badge{background:var(--sc-lime-soft)!important;color:#5B7B21!important;border:1px solid #E2EDB8!important}
.progress-line{height:8px!important;background:#E7EFEB!important}.progress-line>span{background:linear-gradient(90deg,#087A57,#5BBF8E)!important}
.batch-remaining{color:var(--sc-blue)!important}
.deal-footer{border-top-color:var(--sc-line)!important}

/* Cart and checkout are deliberately calm so totals and pickup details stand out. */
.cart-sheet,.modal-sheet{border-radius:24px 24px 0 0!important}
.cart-layout{gap:16px!important}.cart-line{border-color:var(--sc-line)!important;border-radius:16px!important;background:var(--sc-surface)!important}
.cart-line h3{font-family:var(--font-display)!important;font-size:.84rem!important;letter-spacing:-.025em!important}
.qty-control{min-height:40px!important;border-color:var(--sc-line)!important;background:var(--sc-surface-alt)!important;border-radius:12px!important}
.qty-control button{width:36px!important;min-height:38px!important;color:var(--sc-blue)!important}
.cart-summary,.checkout-summary-card{background:linear-gradient(145deg,var(--sc-surface) 0%,var(--sc-mint) 160%)!important;border-color:#CDE8D9!important;border-radius:18px!important}
html[data-theme="dark"] .cart-summary,html[data-theme="dark"] .checkout-summary-card{background:linear-gradient(145deg,var(--sc-surface) 0%,var(--sc-surface-alt) 160%)!important;border-color:var(--sc-line)!important}
.cart-total,.checkout-total{padding-top:12px!important;border-top-color:var(--sc-line)!important}.cart-total strong,.checkout-total strong{font-size:1.22rem!important;color:var(--sc-green)!important}
.cart-actions-bottom{background:color-mix(in srgb,var(--sc-surface) 93%,transparent)!important;border-top-color:var(--sc-line)!important;backdrop-filter:blur(16px)!important}
.reserve-panel{border-radius:18px!important;background:var(--sc-blue-soft)!important;border-color:color-mix(in srgb,var(--sc-blue) 13%,transparent)!important}

/* Status colors are not only color-dependent. */
.status-badge{font-family:var(--font-ui)!important;letter-spacing:.03em!important;font-size:.62rem!important;font-weight:850!important}
.status-badge.status-paid,.status-badge.status-completed,.status-badge.status-ready_for_pickup{background:var(--sc-mint)!important;color:var(--sc-green-deep)!important}
.status-badge.status-pending,.status-badge.status-awaiting_payment{background:var(--sc-lime-soft)!important;color:#697E22!important}
.status-badge.status-cancelled,.status-badge.status-payment_rejected{background:#FFF0F0!important;color:#B45454!important}

/* Mobile-first adjustments: predictable reach, readable cards, safe areas. */
@media(max-width:991.98px){
  body{font-size:14px;padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
  .topbar{height:64px!important}.topbar-inner{min-height:64px!important;padding-left:14px!important;padding-right:14px!important}
  .brand-mark{width:39px!important;height:39px!important;border-radius:13px!important}.brand-copy strong{font-size:1.09rem!important}
  .top-actions{gap:5px!important}.top-actions .notification-button{display:none!important}.top-actions .account-button{display:none!important}
  .top-actions .icon-button{width:42px!important;height:42px!important;min-height:42px!important}
  .page-root{min-height:calc(100vh - 64px)!important}.page-section{padding:22px 0 28px!important}.container-xxl{padding-left:14px!important;padding-right:14px!important}
  .page-header{align-items:flex-start!important;margin-bottom:15px!important}.page-header h1{font-size:clamp(1.45rem,7vw,1.9rem)!important}.page-header h2{font-size:1.16rem!important}.page-header p{font-size:.82rem!important;line-height:1.58!important}
  .hero{border-radius:0 0 25px 25px!important}.hero .container-xxl{padding-top:30px!important;padding-bottom:28px!important}.hero-inner{min-height:auto!important;display:block!important}.hero h1{font-size:clamp(1.95rem,9vw,2.55rem)!important;line-height:1.05!important}.hero-copy{font-size:.86rem!important;line-height:1.62!important}.hero-search{min-height:54px!important;padding:5px 5px 5px 13px!important;border-radius:15px!important}.hero-search .btn-sc{min-height:42px!important}.hero-figures{gap:7px!important;margin-top:16px!important}.hero-figure{min-height:70px!important;padding:9px!important}.hero-figure i{font-size:.92rem!important}.hero-figure strong{font-size:.66rem!important}.hero-figure{font-size:.59rem!important}.hero-cart-visual{display:none!important}
  .catalog-toolbar{padding:11px!important;border-radius:16px!important}.catalog-search-row{gap:7px!important}.filter-chip{min-height:35px!important;padding:7px 10px!important}
  .deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.deal-card{border-radius:17px!important}.deal-media{height:142px!important}.deal-content{padding:11px!important}.deal-card h3{font-size:.84rem!important;line-height:1.32!important}.deal-meta{font-size:.64rem!important;gap:5px!important}.deal-price-grid{gap:7px!important;padding:9px!important}.deal-price-grid small{font-size:.56rem!important}.deal-price-grid strong{font-size:.92rem!important}.savings-badge{font-size:.57rem!important;padding:4px 6px!important}.progress-line{height:7px!important}.deal-footer{padding:10px 11px!important}.deal-footer .btn-sc,.deal-footer .btn-sc-light{min-height:39px!important;padding:8px 9px!important;font-size:.67rem!important}
  .mobile-nav{min-height:72px!important;padding:7px 5px calc(7px + env(safe-area-inset-bottom))!important;background:color-mix(in srgb,var(--sc-surface) 94%,transparent)!important;border-top-color:var(--sc-line)!important;backdrop-filter:blur(18px) saturate(125%)!important}.mobile-nav .nav-item{min-height:52px!important;border-radius:14px!important;font-family:var(--font-ui)!important;font-size:.59rem!important;font-weight:750!important;letter-spacing:-.01em!important}.mobile-nav .nav-item i{font-size:1.08rem!important}.mobile-nav .nav-item.active{background:var(--sc-mint)!important;color:var(--sc-green)!important}.mobile-nav .nav-primary{background:linear-gradient(145deg,#087A57,#075641)!important;box-shadow:0 7px 16px rgba(5,92,63,.2)!important}.mobile-nav .nav-primary i{font-size:1.12rem!important}
  .modal-backdrop-sc{padding:0!important;align-items:flex-end!important}.modal-sheet,.cart-sheet{width:100%!important;max-height:calc(94dvh - env(safe-area-inset-top))!important;border-radius:24px 24px 0 0!important}.sheet-head{padding:16px 16px 12px!important}.sheet-body{padding:0 14px 16px!important}.cart-layout{grid-template-columns:1fr!important}.cart-actions-bottom{padding:11px 0 calc(11px + env(safe-area-inset-bottom))!important}.cart-line{padding:10px!important}.cart-line img{width:58px!important;height:58px!important}.cart-summary{padding:14px!important}
  .dashboard-banner{border-radius:19px!important;padding:17px!important}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.stat-card{padding:12px!important;border-radius:16px!important}.stat-card strong{font-size:1.1rem!important}
}

@media(max-width:390px){
  .brand-copy small{display:none!important}.top-actions .preference-button{display:none!important}
  .deal-grid{gap:8px!important}.deal-media{height:130px!important}.deal-content{padding:9px!important}.deal-card h3{font-size:.78rem!important}.deal-price-grid{padding:8px!important}.deal-footer{padding:8px 9px!important}.deal-footer .btn-sc-light{display:none!important}
  .mobile-nav .nav-item{font-size:.55rem!important}.mobile-nav .nav-primary{transform:none!important}
}

@media(min-width:992px){
  .page-section{padding-top:36px!important}.deal-grid{gap:18px!important}.deal-card{border-radius:21px!important}.deal-media{height:180px!important}.deal-content{padding:15px!important}.deal-card h3{font-size:1rem!important}.cart-sheet{border-radius:24px!important}.cart-layout{grid-template-columns:minmax(0,1fr) 264px!important}
}

@media(prefers-reduced-motion:reduce){
  .deal-card,.btn-sc,.btn-sc-alt,.btn-sc-light,.icon-button,.hero::before{transition:none!important;animation:none!important}
}