/* Sulit v1.0 Final Consumer Polish — targeted, no business-logic changes */
:root{
  --sulit-bg:#f4f8f4;
  --sulit-surface:#ffffff;
  --sulit-text:#17231b;
  --sulit-muted:#68756d;
  --sulit-line:#dfe8e1;
  --sulit-green:#238a4b;
  --sulit-green-soft:#edf8f0;
  --sulit-info:#eef5fb;
  --sulit-info-line:#d5e5f2;
  --sulit-error:#c93838;
  --sulit-shadow:0 10px 28px rgba(28,58,37,.07);
}
html,body{background:var(--sulit-bg)!important}
body .app{background:linear-gradient(180deg,#f7faf7 0%,var(--sulit-bg) 36%,#f7faf7 100%)!important}

/* Headers blend into the page; decorative header icons removed. */
body .app>header{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.sulit-page-header{
  display:block!important;
  min-height:0!important;
  padding:28px 22px 24px!important;
  background:linear-gradient(180deg,#f7faf7 0%,#f2f7f3 100%)!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
.sulit-page-header::after,.sulit-header-icon{display:none!important}
.sulit-header-copy{max-width:100%!important}
.sulit-header-label{margin-bottom:8px!important;color:#52715d!important;font-size:10px!important;letter-spacing:.13em!important}
.sulit-page-header h1{font-size:28px!important;line-height:1.08!important;letter-spacing:-.035em!important}
.sulit-page-header p{margin-top:7px!important;font-size:14px!important;line-height:1.42!important}
.sulit-header-status{margin-top:11px!important;font-size:12px!important;line-height:1.35!important}
.sulit-home-brand{margin-bottom:8px!important}
.sulit-home-greeting{font-size:24px!important}
body .app>main{border-top:1px solid var(--sulit-line)!important}

/* Approved search results: preserve structure, fix name/size spacing only. */
#results{margin-top:8px!important}
.phase1-search-result{min-height:78px!important;padding:13px 14px!important;gap:12px!important}
.phase1-search-result .result-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;min-width:0!important}
.phase1-search-result .result-copy strong{display:block!important;line-height:1.22!important;white-space:normal!important}
.phase1-search-result .result-copy small{display:block!important;margin:0!important;line-height:1.25!important;color:var(--sulit-muted)!important}
.phase1-search-result .freshness{display:block!important;margin-top:4px!important;line-height:1.2!important}

/* Category section spacing and working compact action. */
.add-items-intro{margin-bottom:14px!important}
.section-label-row{margin-top:24px!important;margin-bottom:12px!important;align-items:center!important}
#viewAllCategories{background:#fff!important;color:var(--sulit-green)!important;border:1px solid var(--sulit-line)!important;border-radius:999px!important;padding:8px 12px!important;line-height:1!important;width:auto!important;max-width:none!important}

/* Change Brand: calm white options with a soft selected state. */
body .brand-sheet-card{padding-left:18px!important;padding-right:18px!important}
body .brand-sheet .brand-choice,
body #homeBrandSheet .brand-choice{
  display:flex!important;
  width:100%!important;
  min-height:70px!important;
  padding:12px!important;
  margin:0 0 10px!important;
  border:1px solid var(--sulit-line)!important;
  border-radius:15px!important;
  background:#fff!important;
  color:var(--sulit-text)!important;
  box-shadow:none!important;
}
body .brand-sheet .brand-choice:hover{background:#fafcfb!important}
body .brand-sheet .brand-choice.selected,
body #homeBrandSheet .brand-choice.selected{
  background:var(--sulit-green-soft)!important;
  border:1.5px solid #79b98d!important;
  color:var(--sulit-text)!important;
  box-shadow:0 7px 18px rgba(35,138,75,.07)!important;
}
body .brand-choice.selected strong,body .brand-choice.selected small,
body .brand-choice strong,body .brand-choice small{color:inherit!important}
body .brand-choice small{color:var(--sulit-muted)!important;margin-top:3px!important}
body .brand-choice-price{display:flex!important;align-items:center!important;gap:9px!important}
body .brand-radio{width:20px!important;height:20px!important;border:1.5px solid #a9b5ad!important;background:#fff!important;box-shadow:none!important}
body .brand-choice.selected .brand-radio{border-color:var(--sulit-green)!important;background:var(--sulit-green)!important;box-shadow:inset 0 0 0 5px #fff!important}
.brand-sheet-quantity{margin-top:8px!important;padding-top:16px!important}

/* Account: no empty hero; balanced rows and true destructive action. */
body.account-page .account-profile-card{display:none!important}
body.account-page .phase3-shell{padding-top:22px!important}
.account-section-label{margin:0 0 9px!important;padding:0 2px!important}
.account-settings{overflow:hidden!important;border-radius:18px!important;background:#fff!important;border:1px solid var(--sulit-line)!important;box-shadow:var(--sulit-shadow)!important}
.account-row{min-height:68px!important;background:#fff!important;color:var(--sulit-text)!important;border:0!important;border-bottom:1px solid #e8eee9!important;border-radius:0!important;box-shadow:none!important;padding:12px 14px!important}
.account-row:last-child{border-bottom:0!important}
.account-row-icon{background:var(--sulit-green-soft)!important;color:var(--sulit-green)!important}
.account-row-copy small{color:var(--sulit-muted)!important}
.account-status{background:#eef2ef!important;color:#5d6961!important}
.account-status.is-on{background:var(--sulit-green-soft)!important;color:var(--sulit-green)!important}
.account-logout{background:#fff!important;color:var(--sulit-error)!important;border:1px solid #e7a9a9!important;box-shadow:none!important;margin-top:24px!important}

/* Best Prices: recommendation first, alternatives second. */
.consumer-recommendation-hero{margin:0 0 24px!important;padding:22px!important;background:linear-gradient(145deg,#fff 0%,#f0f8f2 100%)!important;border:1px solid #cfe4d5!important;border-radius:22px!important;box-shadow:var(--sulit-shadow)!important}
.consumer-recommendation-hero small{color:#52715d!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.consumer-recommendation-hero h2{font-size:27px!important;margin:7px 0 8px!important}
.consumer-recommendation-hero p{color:var(--sulit-muted)!important;line-height:1.45!important}
.consumer-hero-metrics{margin-top:18px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.consumer-hero-metrics>div{background:#fff!important;border:1px solid var(--sulit-line)!important;border-radius:14px!important;padding:12px!important}
.store-ranking-label{margin:0 0 12px!important;font-size:17px!important;font-weight:800!important}
.store-card{margin-bottom:12px!important;padding:17px!important;border-radius:19px!important;background:#fff!important}
.store-card.consumer-best{display:none!important}
.store-rank{background:#eef3ef!important;color:#52625a!important}
.store-logo{background:var(--sulit-green-soft)!important}
.store-price .price{color:var(--sulit-text)!important}
.store-status{font-weight:700!important;color:#26352c!important}
.store-difference{color:var(--sulit-muted)!important}

/* Calm information and success messages. */
.sulit-info-card,.plan-note,.missing-products-card{
  border-radius:16px!important;
  padding:14px 15px!important;
  line-height:1.45!important;
  box-shadow:none!important;
}
.sulit-info-card{background:#fff!important;border:1px solid var(--sulit-info-line)!important;color:#334d5c!important}
.plan-note{background:#fff!important;border:1px solid var(--sulit-line)!important;color:#34433a!important}
.plan-note.warning{background:#fff!important;border:1px solid var(--sulit-info-line)!important;color:#334d5c!important}
.plan-note.success{background:var(--sulit-green-soft)!important;border:1px solid #cce5d3!important;color:#236d40!important}

/* Consistent non-red separator and section rhythm. */
body hr,body .phase-divider{border-color:var(--sulit-line)!important}
.phase1-header,.phase3-header,.brand-header{border-color:var(--sulit-line)!important}
main>section+section{margin-top:24px}

@media(max-width:390px){
  .sulit-page-header{padding:24px 18px 21px!important}
  .sulit-page-header h1{font-size:26px!important}
  .sulit-home-greeting{font-size:23px!important}
  .consumer-hero-metrics{grid-template-columns:1fr!important}
}

/* Targeted fixes — 2026-07-17 */
/* Category-filter/search result spacing */
body .phase1-search-result{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 20px!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:0!important;
  padding:14px!important;
}
body .phase1-search-result .result-copy{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:4px!important;
  min-width:0!important;
}
body .phase1-search-result .result-copy strong,
body .phase1-search-result .result-copy small,
body .phase1-search-result .result-copy .freshness{
  display:block!important;
  width:100%!important;
  margin:0!important;
  white-space:normal!important;
}
body .phase1-search-result .result-copy strong{font-size:15px!important}
body .phase1-search-result .result-copy small{font-size:12px!important}

/* Change-brand helper is neutral, not green */
body .tap-brand-hint{
  background:#f3f5f3!important;
  border:1px solid #d8ded9!important;
  color:#5f6962!important;
  box-shadow:none!important;
}

/* Brand sheet options remain white; selection uses border/radio only */
body .brand-sheet .brand-choice,
body #homeBrandSheet .brand-choice,
body .brand-sheet .brand-choice.selected,
body #homeBrandSheet .brand-choice.selected{
  background:#fff!important;
  color:var(--sulit-text)!important;
  border:1px solid var(--sulit-line)!important;
  box-shadow:none!important;
  margin-bottom:12px!important;
}
body .brand-sheet .brand-choice.selected,
body #homeBrandSheet .brand-choice.selected{
  border:2px solid var(--sulit-green)!important;
  padding:11px!important;
}
body .brand-choice.selected strong{color:var(--sulit-text)!important}
body .brand-choice.selected small{color:var(--sulit-muted)!important}
body .brand-choice-price strong{color:var(--sulit-text)!important}

/* Recommended hero text and values must always be readable */
body .consumer-recommendation-hero,
body .consumer-recommendation-hero *{color:var(--sulit-text)!important}
body .consumer-recommendation-hero small{color:#52715d!important}
body .consumer-recommendation-hero p,
body .consumer-recommendation-hero .consumer-hero-action,
body .consumer-recommendation-hero .consumer-hero-metrics span{color:var(--sulit-muted)!important}
body .consumer-recommendation-hero .consumer-hero-metrics strong{color:var(--sulit-text)!important}
body .consumer-recommendation-hero .consumer-hero-action{font-weight:800!important}


.consumer-hero-button{
width:100%;
margin-top:16px;
padding:14px 18px;
border-radius:14px;
border:none;
background:#2e8b57;
color:#fff;
font-weight:700;
font-size:16px;
cursor:pointer;
}
.tap-brand-hint{
background:#f3f4f6!important;
color:#4b5563!important;
border:1px solid #d1d5db!important;
border-radius:10px;
padding:6px 10px;
display:inline-block;
margin-top:8px;
}
.brand-option,.brand-card,.brand-choice{
background:#fff!important;
}
.brand-option.selected,.brand-card.selected,.brand-choice.selected{
background:#fff!important;
border:2px solid #2e8b57!important;
}
.search-result-card .muted,.product-search-card .muted,.search-product .muted{
display:block;
margin-top:6px;
line-height:1.45;
}


/* Exact requested fix: category-filter product spacing */
html body #results .phase1-search-result > .result-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:0!important;
}
html body #results .phase1-search-result > .result-copy > strong,
html body #results .phase1-search-result > .result-copy > small{
  display:block!important;
  width:100%!important;
  margin:0!important;
  white-space:normal!important;
  line-height:1.25!important;
}

/* Exact requested fix: never use a solid green brand-choice card */
html body #homeBrandSheet button.brand-choice,
html body #homeBrandSheet button.brand-choice.selected,
html body #brandSheet button.brand-choice,
html body #brandSheet button.brand-choice.selected,
html body .brand-sheet button.brand-choice,
html body .brand-sheet button.brand-choice.selected{
  background:#fff!important;
  background-image:none!important;
  color:#172019!important;
  border:1px solid #dce3dd!important;
  box-shadow:none!important;
}
html body #homeBrandSheet button.brand-choice.selected,
html body #brandSheet button.brand-choice.selected,
html body .brand-sheet button.brand-choice.selected{
  background:#fff!important;
  background-image:none!important;
  border:2px solid #2f8f57!important;
}
html body #homeBrandSheet button.brand-choice.selected *,
html body #brandSheet button.brand-choice.selected *,
html body .brand-sheet button.brand-choice.selected *{
  color:inherit!important;
}
html body .brand-sheet button.brand-choice.selected small{
  color:#6d776f!important;
}