/* KARETA r62f — #services page polish.
   Scope: #services only. Builds on r62e.
   Goal: cleaner hero, stable search, stronger 3x3 grid, better buttons/adaptation. */

.services-app-page--home{
  --svc-r62f-bg:#eef0f2;
  --svc-r62f-card:#ffffff;
  --svc-r62f-soft:#f4f4f5;
  --svc-r62f-line:#e7e8eb;
  --svc-r62f-text:#080b10;
  --svc-r62f-muted:#6f747d;
  --svc-r62f-orange:#ffb000;
  --svc-r62f-orange2:#ff9800;
  --svc-r62f-shadow:0 18px 46px rgba(15,23,42,.085);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,176,0,.11), transparent 28%),
    linear-gradient(180deg,#f3f4f6 0%, #eef0f2 100%) !important;
}

/* The page card should look intentional on tablet/desktop and clean on phone. */
.services-app-page--home .services-app-phone{
  position:relative !important;
  isolation:isolate !important;
}

.services-app-page--home .services-app-phone::before{
  content:'' !important;
  position:absolute !important;
  z-index:-1 !important;
  right:-80px !important;
  top:-100px !important;
  width:260px !important;
  height:260px !important;
  border-radius:50% !important;
  background:rgba(255,176,0,.10) !important;
  pointer-events:none !important;
}

/* Header */
.services-app-page--home .services-app-logo-img{
  height:clamp(50px,6vw,70px) !important;
  image-rendering:auto !important;
}

.services-app-page--home .services-app-icon-btn{
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.services-app-page--home .services-app-icon-btn:active{
  transform:scale(.96) !important;
}

.services-app-page--home .services-app-home-head h1{
  max-width:680px !important;
  text-wrap:balance !important;
}

.services-app-page--home .services-app-hero-sub{
  max-width:520px !important;
  margin:12px 0 0 !important;
  color:var(--svc-r62f-muted) !important;
  font-size:clamp(14px,1.8vw,18px) !important;
  line-height:1.34 !important;
  font-weight:750 !important;
  letter-spacing:-.02em !important;
}

/* Search: visual polish and stronger focus state */
.services-app-page--home .services-app-search{
  position:relative !important;
  background:#fff !important;
  border-color:rgba(15,23,42,.07) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
}

.services-app-page--home .services-app-search:focus-within{
  border-color:rgba(255,176,0,.72) !important;
  box-shadow:0 0 0 4px rgba(255,176,0,.14), 0 10px 26px rgba(15,23,42,.065) !important;
}

.services-app-page--home .services-app-search > span{
  color:#7b828d !important;
}

.services-app-page--home .services-app-search button{
  margin-right:0 !important;
  border-radius:14px !important;
  transition:transform .14s ease, filter .14s ease !important;
}

.services-app-page--home .services-app-search button:active{
  transform:scale(.96) !important;
  filter:saturate(1.08) !important;
}

/* Quick action buttons */
.services-app-page--home .services-app-emergency-row button{
  background:#fff !important;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

.services-app-page--home .services-app-emergency-row button:hover{
  border-color:rgba(255,176,0,.32) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.065) !important;
}

.services-app-page--home .services-app-emergency-row button:active{
  transform:scale(.985) !important;
}

.services-app-page--home .services-app-emergency-row button:first-child{
  border-color:rgba(239,68,68,.18) !important;
}

.services-app-page--home .services-app-emergency-row button:first-child span{
  color:#ef4444 !important;
}

/* 9-tile grid: denser but readable */
.services-app-page--home .services-app-grid--r62f{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(8px,1.7vw,14px) !important;
}

.services-app-page--home .services-app-grid--r62f .services-app-tile{
  border:1px solid rgba(15,23,42,.045) !important;
  background:linear-gradient(180deg,#fff,#f8f8f9) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}

.services-app-page--home .services-app-grid--r62f .services-app-tile:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(255,176,0,.30) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.075) !important;
}

.services-app-page--home .services-app-grid--r62f .services-app-tile:active{
  transform:scale(.985) !important;
}

.services-app-page--home .services-app-grid--r62f .services-app-tile__icon{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.045) !important;
}

.services-app-page--home .services-app-grid--r62f .services-app-tile:nth-child(9){
  background:linear-gradient(180deg,#fff8df,#fff) !important;
  border-color:rgba(255,176,0,.34) !important;
}

.services-app-page--home .services-app-grid--r62f .services-app-tile:nth-child(9) .services-app-tile__icon{
  border:0 !important;
}

/* Nearby card improvement */
.services-app-page--home .services-app-shop-card{
  min-width:0 !important;
  width:100% !important;
  padding:14px !important;
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) 30px !important;
  gap:12px !important;
  align-items:center !important;
  border:1px solid var(--svc-r62f-line) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
  overflow:hidden !important;
  text-align:left !important;
}

.services-app-page--home .services-app-shop-photo{
  width:58px !important;
  height:58px !important;
  border-radius:16px !important;
  background:
    linear-gradient(135deg,rgba(255,176,0,.95),rgba(255,152,0,.78)),
    #ffb000 !important;
  position:relative !important;
  overflow:hidden !important;
}

.services-app-page--home .services-app-shop-photo::after{
  content:'K' !important;
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#111 !important;
  font-weight:950 !important;
  font-size:22px !important;
  letter-spacing:-.06em !important;
}

.services-app-page--home .services-app-shop-body{
  min-width:0 !important;
  display:grid !important;
  gap:4px !important;
}

.services-app-page--home .services-app-shop-body strong{
  color:var(--svc-r62f-text) !important;
  font-size:16px !important;
  line-height:1.12 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.services-app-page--home .services-app-shop-body em,
.services-app-page--home .services-app-shop-body small{
  min-width:0 !important;
  color:var(--svc-r62f-muted) !important;
  font-size:12px !important;
  line-height:1.18 !important;
  font-style:normal !important;
  font-weight:750 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.services-app-page--home .services-app-heart{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  background:#f4f4f5 !important;
  color:#111 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
}

/* Tablet wide: keep compact 3x3 and avoid text overflow */
@media (min-width:768px){
  .services-app-page--home .services-app-grid--r62f .services-app-tile{
    min-height:126px !important;
  }

  .services-app-page--home .services-app-search{
    max-width:560px !important;
  }
}

@media (min-width:1040px){
  .services-app-page--home .services-app-phone{
    max-width:1120px !important;
    padding:40px !important;
  }

  .services-app-page--home .services-app-home-head{
    margin-bottom:10px !important;
  }

  .services-app-page--home .services-app-grid--r62f{
    max-width:680px !important;
  }

  .services-app-page--home .services-app-nearby{
    max-width:680px !important;
  }
}

/* Phone: exact anti-overlap tuning */
@media (max-width:767px){
  .services-app-page--home .services-app-phone::before{
    display:none !important;
  }

  .services-app-page--home .services-app-hero-sub{
    font-size:14px !important;
    margin-top:10px !important;
  }

  .services-app-page--home .services-app-grid--r62f .services-app-tile{
    min-height:92px !important;
  }
}

@media (max-width:390px){
  .services-app-page--home .services-app-logo-img{
    height:40px !important;
    max-width:150px !important;
  }

  .services-app-page--home .services-app-home-head h1{
    font-size:31px !important;
  }

  .services-app-page--home .services-app-hero-sub{
    font-size:13px !important;
  }

  .services-app-page--home .services-app-grid--r62f{
    gap:7px !important;
  }

  .services-app-page--home .services-app-grid--r62f .services-app-tile{
    min-height:84px !important;
    padding:8px 4px !important;
  }

  .services-app-page--home .services-app-grid--r62f .services-app-tile__icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    border-radius:12px !important;
  }

  .services-app-page--home .services-app-grid--r62f .services-app-tile__icon svg{
    width:19px !important;
    height:19px !important;
  }

  .services-app-page--home .services-app-grid--r62f .services-app-tile__label{
    font-size:10px !important;
  }
}

/* Hard guard scoped to services only */
.services-app-page--home :where(h1,p,span,b,strong,em,small,button,input,div){
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}