/* Smartlub — estilos compartilhados, carregados sem bloquear a renderizacao. */

/* Botoes */
.slc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .625rem 1.125rem;
  border: 1.5px solid transparent; border-radius: var(--slc-radius);
  font-weight: 600; font-size: .9375rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  background: var(--slc-ink-900); color: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.slc-btn:hover { background: var(--slc-ink-700); }

.slc-btn--accent { background: var(--slc-yellow); color: var(--slc-ink-900); }
.slc-btn--accent:hover { background: #e0a400; }

.slc-btn--outline { background: transparent; color: var(--slc-ink-900); border-color: var(--slc-ink-300); }
.slc-btn--outline:hover { background: var(--slc-bg); border-color: var(--slc-ink-500); }

.slc-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Campos */
.slc-field { display: block; }
.slc-field__label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .25rem; }
.slc-field__input,
.slc-field__select {
  width: 100%; height: 44px; padding: 0 .75rem;
  border: 1.5px solid var(--slc-ink-300); border-radius: var(--slc-radius);
  background: var(--slc-surface); color: var(--slc-ink-900); font-size: .9375rem;
}
.slc-field__select:disabled { background: var(--slc-bg); color: var(--slc-ink-500); cursor: not-allowed; }

/* Sugestoes da busca */
.slc-search__results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--slc-surface); border: 1px solid var(--slc-ink-300);
  border-radius: var(--slc-radius); box-shadow: 0 8px 28px rgb(17 19 21 / 16%);
  max-height: 60vh; overflow-y: auto; padding: .25rem;
}
.slc-suggest__group { padding: .5rem .625rem .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slc-ink-500); }
.slc-suggest__item {
  display: flex; align-items: center; gap: .625rem; width: 100%;
  padding: .5rem .625rem; border: 0; border-radius: var(--slc-radius);
  background: none; text-align: left; text-decoration: none; cursor: pointer;
}
.slc-suggest__item:hover,
.slc-suggest__item[aria-selected="true"] { background: var(--slc-bg); }
.slc-suggest__item img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.slc-suggest__name { font-size: .875rem; }
.slc-suggest__meta { font-size: .75rem; color: var(--slc-ink-500); }

/* Navegacao desktop */
.slc-nav__inner { display: flex; align-items: center; gap: 1rem; min-height: 48px; }
.slc-nav__departments {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; color: #fff; font-weight: 600; cursor: pointer;
  padding: .5rem 0;
}
.slc-menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.slc-menu a { text-decoration: none; font-size: .9375rem; padding: .5rem 0; display: inline-block; }
.slc-nav__finder { margin-inline-start: auto; min-height: 36px; padding-block: .375rem; }

.slc-mega { background: var(--slc-surface); color: var(--slc-ink-900); border-bottom: 1px solid var(--slc-ink-300); }
.slc-mega__inner { padding-block: 1.25rem; }
.slc-mega__columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.slc-mega__column h3 { font-size: .9375rem; margin-bottom: .375rem; }
.slc-mega__column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.slc-mega__column a { text-decoration: none; font-size: .875rem; color: var(--slc-ink-500); }
.slc-mega__column a:hover { color: var(--slc-ink-900); }

/* Gaveta do mobile */
.slc-drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--slc-surface); display: flex; flex-direction: column; gap: 1rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.slc-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.slc-drawer__close { background: none; border: 0; cursor: pointer; padding: .5rem; color: inherit; }
.slc-drawer__cta { width: 100%; }
.slc-drawer__nav { border-top: 1px solid var(--slc-ink-300); padding-top: .875rem; }
.slc-drawer__heading { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slc-ink-500); margin: 0 0 .5rem; }
.slc-drawer__loading { margin: 0; font-size: .875rem; color: var(--slc-ink-500); }
.slc-drawer__menu { list-style: none; margin: 0; padding: 0; display: grid; }
.slc-drawer__menu a {
  display: block; padding: .75rem .25rem; text-decoration: none;
  font-size: .9375rem; border-bottom: 1px solid var(--slc-bg);
}
.slc-drawer__foot { margin-top: auto; border-top: 1px solid var(--slc-ink-300); padding-top: .875rem; display: grid; gap: .25rem; }
.slc-drawer__link { display: flex; align-items: center; gap: .625rem; padding: .75rem .25rem; text-decoration: none; font-size: .9375rem; }

@media (min-width: 720px) { .slc-drawer { display: none; } }

/* Barra Meu veiculo */
.slc-myvehicle { background: var(--slc-yellow-soft); border-bottom: 1px solid #f0dca5; font-size: .875rem; }
.slc-myvehicle__inner { display: flex; align-items: center; gap: .5rem; min-height: 40px; }
.slc-myvehicle__label { margin: 0; flex: 1; min-width: 0; }
.slc-myvehicle__change,
.slc-myvehicle__clear {
  background: none; border: 0; cursor: pointer; font-weight: 600;
  text-decoration: underline; padding: .5rem; color: var(--slc-ink-900);
}
.slc-myvehicle__clear { text-decoration: none; display: grid; place-items: center; }

/* Seletor de veiculo */
.slc-finder {
  background: var(--slc-surface); color: var(--slc-ink-900);
  border-radius: var(--slc-radius-lg); box-shadow: var(--slc-shadow); padding: 1.25rem;
}
.slc-finder__title { display: flex; align-items: center; gap: .5rem; font-size: 1.0625rem; margin-bottom: .875rem; }
.slc-finder__tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--slc-ink-300); margin-bottom: 1rem; overflow-x: auto; }
.slc-finder__tab {
  border: 0; background: none; cursor: pointer;
  padding: .625rem .75rem; font-size: .875rem; font-weight: 600; color: var(--slc-ink-500);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.slc-finder__tab[aria-selected="true"] { color: var(--slc-ink-900); border-bottom-color: var(--slc-yellow); }
.slc-finder__hint { font-size: .8125rem; color: var(--slc-ink-500); margin: 0 0 .625rem; }

.slc-vehicle-form { display: grid; gap: .75rem; }
.slc-vehicle-form__submit { margin-top: .25rem; }

.slc-plate { display: grid; gap: .75rem; }
.slc-plate__input { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; text-align: center; font-size: 1.125rem; }
.slc-plate__status { margin: 0; font-size: .8125rem; min-height: 1.2em; }
.slc-plate__status.is-error { color: var(--slc-danger); }

@media (min-width: 560px) {
  .slc-vehicle-form { grid-template-columns: 1fr 1fr; }
  .slc-vehicle-form__submit { grid-column: 1 / -1; }
}

/* Secoes */
.slc-section { padding-block: 2rem; }
.slc-section__title { font-size: 1.25rem; margin-bottom: 1rem; }

/* Grade de produtos */
.slc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--slc-gap); }

@media (min-width: 640px) { .slc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .slc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Card */
.slc-card {
  background: var(--slc-surface); border: 1px solid var(--slc-ink-300);
  border-radius: var(--slc-radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.slc-card__media { position: relative; display: block; aspect-ratio: 1; background: #fff; }
.slc-card__media img { width: 100%; height: 100%; object-fit: contain; }
.slc-card__flag {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--slc-yellow); color: var(--slc-ink-900);
  font-size: .6875rem; font-weight: 700; padding: .125rem .5rem; border-radius: 999px;
}
.slc-card__badge {
  position: absolute; bottom: .5rem; left: .5rem; right: .5rem;
  display: flex; align-items: center; gap: .25rem; justify-content: center;
  font-size: .6875rem; font-weight: 700; padding: .25rem .5rem; border-radius: 999px;
}
.slc-card__badge.is-fit { background: var(--slc-success); color: #fff; }
.slc-card__badge.is-nofit { background: #f1f2f4; color: var(--slc-ink-500); }

.slc-card__body { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; flex: 1; }
.slc-card__brand { margin: 0; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slc-ink-500); }
.slc-card__title { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.slc-card__title a { text-decoration: none; }
.slc-card__sku { margin: 0; font-size: .75rem; color: var(--slc-ink-500); }
.slc-card__price { margin-top: auto; padding-top: .375rem; font-size: 1.0625rem; font-weight: 700; }
.slc-card__price del { font-size: .8125rem; font-weight: 400; color: var(--slc-ink-500); }
.slc-card__stock { margin: 0; font-size: .75rem; font-weight: 600; }
.slc-card__stock.is-available { color: var(--slc-success); }
.slc-card__stock.is-out { color: var(--slc-ink-500); }
.slc-card__buy { width: 100%; margin-top: .5rem; }

/* Departamentos */
.slc-departments__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--slc-gap); list-style: none; margin: 0; padding: 0; }
.slc-departments__link {
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  background: var(--slc-surface); border: 1px solid var(--slc-ink-300);
  border-radius: var(--slc-radius); padding: 1rem .75rem; text-align: center; text-decoration: none;
}
.slc-departments__link:hover { border-color: var(--slc-yellow); }
.slc-departments__name { font-size: .875rem; font-weight: 600; }
.slc-departments__count { font-size: .75rem; color: var(--slc-ink-500); }

@media (min-width: 640px) { .slc-departments__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .slc-departments__list { grid-template-columns: repeat(8, 1fr); } }

/* Garantias */
.slc-guarantees__list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.slc-guarantees__item { display: flex; gap: .75rem; align-items: flex-start; }
.slc-guarantees__icon { flex: 0 0 auto; color: var(--slc-yellow); }
.slc-guarantees__title { margin: 0; font-weight: 600; font-size: .9375rem; }
.slc-guarantees__text { margin: 0; font-size: .8125rem; color: var(--slc-ink-500); }

@media (min-width: 720px) { .slc-guarantees__list { grid-template-columns: repeat(4, 1fr); } }

/* Rodape */
.slc-footer { background: var(--slc-ink-900); color: #c9ced4; margin-top: 2.5rem; }
.slc-footer__inner { display: grid; gap: 1.5rem; padding-block: 2rem; }
.slc-footer__tagline { font-size: .875rem; max-width: 40ch; }
.slc-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.slc-footer__menu a { text-decoration: none; font-size: .875rem; }
.slc-footer__menu a:hover { color: #fff; }
.slc-footer__bottom { border-top: 1px solid #2a2e33; font-size: .8125rem; padding-block: .875rem; }
.slc-footer__bottom p { margin: 0; }

@media (min-width: 720px) { .slc-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }

/* Texto longo */
.slc-prose { max-width: 70ch; }
.slc-prose h2 { margin-top: 1.75rem; }
.slc-page-title { font-size: clamp(1.375rem, 4vw, 1.875rem); margin-block: 1.5rem 1rem; }

/* Indice de marcas e modelos */
.slc-lead { color: var(--slc-ink-500); max-width: 68ch; margin-block: 0 1.25rem; }
.slc-brandgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.slc-brandgrid__item {
  display: flex; flex-direction: column; gap: .125rem;
  background: var(--slc-surface); border: 1px solid var(--slc-ink-300);
  border-radius: var(--slc-radius); padding: .75rem .875rem; text-decoration: none;
}
.slc-brandgrid__item:hover { border-color: var(--slc-yellow); }
.slc-brandgrid__name { font-weight: 600; font-size: .9375rem; }
.slc-brandgrid__count { font-size: .75rem; color: var(--slc-ink-500); }

@media (min-width: 640px) { .slc-brandgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .slc-brandgrid { grid-template-columns: repeat(6, 1fr); } }
.slc-footer__heading { font-weight: 600; color: #fff; margin: 0 0 .5rem; font-size: .9375rem; }
.slc-btn.is-loading { opacity: .65; pointer-events: none; }
.slc-btn.is-added { background: var(--slc-success); color: #fff; }