/* V31 — Tire Shop refinements: improved finder dropdown, remove clutter, and replace left intro with infographic */

html body.tire-shop-page .tire-size-finder-layout{
  align-items:start;
}

html body.tire-shop-page .tire-size-finder-copy{
  display:flex;
  align-items:stretch;
}

html body.tire-shop-page .qa-tire-guide-replacement{
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:#ffffff;
  box-shadow:0 20px 50px rgba(7,18,26,.18);
}

html body.tire-shop-page .qa-tire-guide-replacement img{
  display:block;
  width:100%;
  height:auto;
  background:#ffffff;
}

/* Cleaner, brighter search controls */
html body.tire-shop-page #qa23-tire-search-panel .tire-size-input-shell,
html body.tire-shop-page main#main-content.wrap section#tire-size-finder #qa23-tire-search-panel .tire-size-input-shell{
  border:1.5px solid #b9d7d2 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f9fcfb 100%) !important;
  box-shadow:0 10px 24px rgba(16,40,38,.09) !important;
}

html body.tire-shop-page #qa23-tire-search-panel .tire-size-input-shell:focus-within,
html body.tire-shop-page main#main-content.wrap section#tire-size-finder #qa23-tire-search-panel .tire-size-input-shell:focus-within{
  border-color:#13766d !important;
  box-shadow:0 0 0 4px rgba(19,118,109,.10),0 14px 30px rgba(16,40,38,.12) !important;
}

html body.tire-shop-page #qa23-tire-search-panel .tire-size-search-icon{
  stroke:#14776d !important;
}

html body.tire-shop-page #qa23-tire-search-panel #tire-size-input{
  color:#102826 !important;
  font-family:"Manrope", Arial, sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}

html body.tire-shop-page #qa23-tire-search-panel #tire-size-input::placeholder{
  color:#7d8d8a !important;
}

html body.tire-shop-page #qa23-tire-search-panel .tire-size-clear,
html body.tire-shop-page .tire-size-finder button.tire-size-clear{
  border:0 !important;
  background:#eef2f3 !important;
  color:#5b6874 !important;
  box-shadow:none !important;
}

html body.tire-shop-page #qa23-tire-search-panel .tire-size-clear:hover,
html body.tire-shop-page #qa23-tire-search-panel .tire-size-clear:focus-visible,
html body.tire-shop-page .tire-size-finder button.tire-size-clear:hover,
html body.tire-shop-page .tire-size-finder button.tire-size-clear:focus-visible{
  background:#dfe8e8 !important;
  color:#102826 !important;
}

html body.tire-shop-page #qa23-tire-search-panel .tire-size-submit,
html body.tire-shop-page main#main-content.wrap section#tire-size-finder #qa23-tire-search-panel .tire-size-submit,
html body.tire-shop-page .tire-size-finder button.tire-size-submit{
  min-width:138px !important;
  border:0 !important;
  border-radius:13px !important;
  background:linear-gradient(135deg,#169788 0%,#0f7268 100%) !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(15,111,103,.22) !important;
}

html body.tire-shop-page #qa23-tire-search-panel .tire-size-submit:hover,
html body.tire-shop-page #qa23-tire-search-panel .tire-size-submit:focus-visible,
html body.tire-shop-page .tire-size-finder button.tire-size-submit:hover,
html body.tire-shop-page .tire-size-finder button.tire-size-submit:focus-visible{
  background:linear-gradient(135deg,#1aa393 0%,#0d665d 100%) !important;
  box-shadow:0 13px 26px rgba(15,111,103,.28) !important;
}

/* Replace the dark ugly dropdown with a clean readable list */
html body.tire-shop-page .tire-size-suggestions,
html body.tire-shop-page .tire-shop-page .tire-size-suggestions{
  overflow:auto;
  margin-top:10px !important;
  padding:8px !important;
  border:1px solid #d7e4e2 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfb 100%) !important;
  box-shadow:0 18px 38px rgba(13,30,40,.14) !important;
  scrollbar-width:thin;
  scrollbar-color:#b8c7c4 transparent;
}

html body.tire-shop-page .tire-size-suggestions::-webkit-scrollbar{
  width:10px;
}
html body.tire-shop-page .tire-size-suggestions::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:#c0cfcc;
  background-clip:padding-box;
}

html body.tire-shop-page .tire-size-finder button.tire-size-suggestion,
html body.tire-shop-page button.tire-size-suggestion{
  display:grid !important;
  grid-template-columns:minmax(120px,.42fr) minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
  width:100% !important;
  min-height:60px !important;
  padding:11px 12px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  background:transparent !important;
  color:#173131 !important;
  box-shadow:none !important;
  text-align:left !important;
}

html body.tire-shop-page .tire-size-suggestion + .tire-size-suggestion{
  border-top:0 !important;
  margin-top:4px;
}

html body.tire-shop-page .tire-size-finder button.tire-size-suggestion:hover,
html body.tire-shop-page .tire-size-finder button.tire-size-suggestion.is-active,
html body.tire-shop-page .tire-size-finder button.tire-size-suggestion:focus-visible{
  border-color:#cae3df !important;
  background:linear-gradient(135deg,#f1faf8 0%,#e8f4f2 100%) !important;
  color:#0f4d49 !important;
  outline:0 !important;
}

html body.tire-shop-page .tire-size-finder button.tire-size-suggestion strong{
  color:#113a38 !important;
  font-family:"IBM Plex Sans", "Manrope", Arial, sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

html body.tire-shop-page .tire-size-finder button.tire-size-suggestion span{
  color:#60706f !important;
  font-size:13px !important;
  line-height:1.45 !important;
  white-space:normal !important;
}

html body.tire-shop-page .tire-size-finder button.tire-size-suggestion em{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#ecf5f4 !important;
  color:#12746b !important;
  font-size:17px !important;
  font-style:normal !important;
  font-weight:900 !important;
}

/* Mobile tightening */
@media (max-width: 980px){
  html body.tire-shop-page .tire-size-finder-layout{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  html body.tire-shop-page .qa-tire-guide-replacement{
    max-width:760px;
    margin-inline:auto;
  }
}

@media (max-width: 640px){
  html body.tire-shop-page .qa-tire-guide-replacement{
    border-radius:18px;
  }

  html body.tire-shop-page .tire-size-suggestions{
    border-radius:16px !important;
    padding:6px !important;
  }

  html body.tire-shop-page .tire-size-finder button.tire-size-suggestion,
  html body.tire-shop-page button.tire-size-suggestion{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:12px 11px !important;
  }

  html body.tire-shop-page .tire-size-finder button.tire-size-suggestion strong{
    grid-column:1 / 2;
    font-size:19px !important;
  }

  html body.tire-shop-page .tire-size-finder button.tire-size-suggestion span{
    grid-column:1 / 2;
    font-size:12px !important;
  }

  html body.tire-shop-page .tire-size-finder button.tire-size-suggestion em{
    grid-column:2 / 3;
    grid-row:1 / span 2;
    align-self:center;
  }
}