/*--------------------------------------------------------------
# Vitrine (modulo Produtos): catalogo, produto, orcamento e conta
#
# Segue a linguagem dos blocos do tema (service-showcase, hero-split):
# eyebrow em caixa alta, titulos na --heading-font, cartoes .75rem com
# borda sutil e elevacao no hover, botoes em pilula. Tudo derivado das
# variaveis do tema, entao acompanha as cores (claras ou escuras) de cada
# site. Sobrescrevivel por site em "Estilos do Site" (arquivo: catalog).
--------------------------------------------------------------*/

.catalog-page {
  --catalog-radius: 0.75rem;
  --catalog-radius-sm: 0.5rem;
  --catalog-line: color-mix(in srgb, var(--default-color) 10%, transparent);
  --catalog-line-strong: color-mix(in srgb, var(--default-color) 20%, transparent);
  --catalog-muted: color-mix(in srgb, var(--default-color) 65%, transparent);
  --catalog-soft: color-mix(in srgb, var(--default-color) 4%, transparent);
  --catalog-tint: color-mix(in srgb, var(--accent-color) 12%, transparent);
  --catalog-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);
  --catalog-success: #22a06b;
  --catalog-warning: #e5a000;
  --catalog-danger: #e5484d;
  --catalog-info: var(--accent-color);
  background-color: var(--background-color);
  color: var(--default-color);
}

.catalog-section {
  padding: 3rem 0 5rem;
}

.catalog-related {
  padding-top: 0;
}

.catalog-muted {
  color: var(--catalog-muted);
  font-weight: 400;
}

.catalog-hint {
  font-size: 0.875rem;
  color: var(--catalog-muted);
}

.catalog-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color) 65%, transparent);
}

.catalog-section-title {
  margin: 0 0 1.5rem;
  font-family: var(--heading-font);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.catalog-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.catalog-section-header .catalog-section-title {
  margin: 0;
}

.catalog-divider {
  border-color: var(--catalog-line);
  opacity: 1;
  margin: 0.5rem 0;
}

/*--------------------------------------------------------------
# Cabecalho (hero)
--------------------------------------------------------------*/
.catalog-hero {
  padding: 140px 0 2.5rem;
  border-bottom: 1px solid var(--catalog-line);
  background:
    radial-gradient(60rem 20rem at 85% -10%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 70%),
    var(--background-color);
}

.catalog-hero--compact {
  padding-bottom: 1.25rem;
}

.catalog-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.catalog-hero__heading {
  max-width: 46rem;
  margin-top: 2.25rem;
}

.catalog-hero__title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading-color);
}

.catalog-hero__description {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color) 78%, transparent);
}

.catalog-hero__actions {
  display: flex;
  gap: 0.5rem;
}

.catalog-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.catalog-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--catalog-muted);
}

.catalog-crumbs li + li::before {
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons";
  font-size: 0.7rem;
  opacity: 0.6;
}

.catalog-crumbs a {
  color: var(--catalog-muted);
}

.catalog-crumbs a:hover {
  color: var(--accent-color);
}

.catalog-crumbs [aria-current] {
  color: var(--heading-color);
  font-weight: 500;
}

/*--------------------------------------------------------------
# Botoes
--------------------------------------------------------------*/
.catalog-btn,
.catalog-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s ease;
}

.catalog-btn {
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.catalog-btn--block {
  width: 100%;
}

.catalog-btn--primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.catalog-btn--primary:hover,
.catalog-btn--primary:focus-visible {
  background-color: color-mix(in srgb, var(--accent-color), #000 12%);
  border-color: color-mix(in srgb, var(--accent-color), #000 12%);
  color: var(--contrast-color);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.catalog-btn--ghost {
  background: transparent;
  border-color: var(--catalog-line-strong);
  color: var(--heading-color);
}

.catalog-btn--ghost:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.catalog-btn--success {
  background-color: var(--catalog-success);
  border-color: var(--catalog-success);
  color: #fff;
}

.catalog-btn--success:hover {
  background-color: color-mix(in srgb, var(--catalog-success), #000 12%);
  color: #fff;
}

.catalog-btn--danger {
  background-color: var(--catalog-danger);
  border-color: var(--catalog-danger);
  color: #fff;
}

.catalog-btn:disabled,
.catalog-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.catalog-pill {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  border: 1px solid var(--catalog-line-strong);
  color: var(--heading-color);
}

.catalog-pill:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.catalog-pill--solid {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.catalog-pill--solid:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 12%);
  color: var(--contrast-color);
}

.catalog-pill--sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
}

.catalog-pill__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background-color: var(--contrast-color);
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 700;
}

.catalog-pill__count[hidden] {
  display: none;
}

.catalog-round-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--catalog-line-strong);
  background: transparent;
  color: var(--heading-color);
  transition: all 0.25s ease;
}

.catalog-round-btn:hover,
.catalog-round-btn--accent {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.catalog-round-btn--accent:hover {
  transform: scale(1.06);
}

.catalog-round-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.catalog-icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--catalog-muted);
  transition: all 0.2s ease;
}

.catalog-icon-btn:hover {
  background-color: color-mix(in srgb, var(--catalog-danger) 12%, transparent);
  color: var(--catalog-danger);
}

.catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-color);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.catalog-link:hover {
  color: color-mix(in srgb, var(--accent-color), var(--heading-color) 30%);
}

.catalog-link--danger {
  color: var(--catalog-danger);
}

/*--------------------------------------------------------------
# Superficies
--------------------------------------------------------------*/
.catalog-panel {
  background-color: var(--surface-color);
  border: 1px solid var(--catalog-line);
  border-radius: var(--catalog-radius);
  padding: 1.75rem;
}

.catalog-panel + .catalog-panel {
  margin-top: 1rem;
}

.catalog-panel--soft {
  background-color: var(--catalog-soft);
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
}

.catalog-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.catalog-panel__title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-sticky {
  position: sticky;
  top: 110px;
}

.catalog-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--catalog-radius-sm);
  background-color: var(--catalog-tint);
  color: var(--heading-color);
  font-size: 0.9rem;
}

.catalog-note .bi {
  color: var(--accent-color);
  font-size: 1.1rem;
}

/* Avisos */
.catalog-alert {
  --tone: var(--catalog-info);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-radius: var(--catalog-radius-sm);
  background-color: color-mix(in srgb, var(--tone) 10%, var(--surface-color));
  color: var(--heading-color);
  font-size: 0.92rem;
}

.catalog-alert > .bi {
  color: var(--tone);
  font-size: 1.15rem;
}

.catalog-alert__text {
  flex: 1;
}

.catalog-alert__text ul {
  margin: 0;
  padding-left: 1.1rem;
}

.catalog-alert--success { --tone: var(--catalog-success); }
.catalog-alert--warning { --tone: var(--catalog-warning); }
.catalog-alert--danger { --tone: var(--catalog-danger); }

/* Vazio */
.catalog-empty {
  padding: 4rem 1rem;
  text-align: center;
}

.catalog-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  font-size: 1.75rem;
}

.catalog-empty__title {
  margin-bottom: 0.5rem;
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-empty__text {
  max-width: 28rem;
  margin: 0 auto 1.5rem;
  color: var(--catalog-muted);
}

/*--------------------------------------------------------------
# Formularios e tabelas (Bootstrap) no tema do site -- sem isto ficam
# brancos em temas escuros.
--------------------------------------------------------------*/
.catalog-page .form-label {
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading-color);
}

.catalog-page .form-control,
.catalog-page .form-select {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--catalog-line-strong);
  border-radius: var(--catalog-radius-sm);
  background-color: var(--catalog-soft);
  color: var(--default-color);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-page .form-select {
  padding-right: 2.25rem;
}

.catalog-page .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color) 45%, transparent);
}

.catalog-page .form-control:focus,
.catalog-page .form-select:focus {
  border-color: var(--accent-color);
  background-color: var(--surface-color);
  color: var(--default-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.catalog-page .form-control:disabled {
  opacity: 0.6;
}

.catalog-page .form-select option {
  background-color: var(--surface-color);
  color: var(--default-color);
}

.catalog-page .form-text {
  color: var(--catalog-muted);
}

.catalog-page .form-check-input {
  background-color: var(--catalog-soft);
  border-color: var(--catalog-line-strong);
}

.catalog-page .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.catalog-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--default-color);
  --bs-table-border-color: var(--catalog-line);
}

.catalog-page .pagination {
  --bs-pagination-bg: transparent;
  --bs-pagination-color: var(--default-color);
  --bs-pagination-border-color: var(--catalog-line);
  --bs-pagination-active-bg: var(--accent-color);
  --bs-pagination-active-border-color: var(--accent-color);
  --bs-pagination-hover-bg: var(--catalog-soft);
  --bs-pagination-hover-color: var(--accent-color);
  --bs-pagination-disabled-bg: transparent;
}

/* Isca anti-robo */
.catalog-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Listagem
--------------------------------------------------------------*/
.catalog-chips {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.catalog-chips::-webkit-scrollbar {
  display: none;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border: 1px solid var(--catalog-line);
  border-radius: 999px;
  background-color: var(--surface-color);
  color: var(--heading-color);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.25s ease;
}

.catalog-chip img,
.catalog-chip .bi {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  object-fit: cover;
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  font-size: 0.85rem;
}

.catalog-chip:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.catalog-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--catalog-line);
  border-radius: var(--catalog-radius-sm);
  background-color: var(--surface-color);
  color: var(--heading-color);
  font-weight: 500;
}

.catalog-filter-toggle .catalog-pill__count {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.catalog-filters {
  padding: 1.5rem;
}

.catalog-filters__group {
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--catalog-line);
}

.catalog-filters__group:last-of-type {
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.catalog-filters__title {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--catalog-muted);
}

.catalog-search {
  position: relative;
}

.catalog-search .bi {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--catalog-muted);
  pointer-events: none;
}

.catalog-page .catalog-search .form-control {
  padding-left: 2.4rem;
  border-radius: 999px;
}

/* Arvore de categorias */
.catalog-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-tree .catalog-tree {
  margin: 0.15rem 0 0.35rem 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--catalog-line);
}

.catalog-tree a,
.catalog-tree__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: var(--catalog-radius-sm);
  color: var(--default-color);
  font-size: 0.93rem;
  transition: all 0.2s ease;
}

.catalog-tree a .bi {
  font-size: 0.7rem;
  color: var(--catalog-muted);
}

.catalog-tree a:hover,
.catalog-tree__all:hover {
  background-color: var(--catalog-soft);
  color: var(--accent-color);
}

.catalog-tree a.is-open {
  color: var(--heading-color);
  font-weight: 500;
}

.catalog-tree a.is-current,
.catalog-tree__all.is-current {
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  font-weight: 600;
}

/* Opcoes (filtros e variacoes): input escondido + rotulo em pilula */
.catalog-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.catalog-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--catalog-line-strong);
  border-radius: 999px;
  color: var(--default-color);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.catalog-option--sm {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}

.catalog-option:hover {
  border-color: var(--accent-color);
}

.btn-check:checked + .catalog-option {
  border-color: var(--accent-color);
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}

.btn-check:focus-visible + .catalog-option {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.catalog-option.is-unavailable {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

.catalog-swatch {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.catalog-option--sm .catalog-swatch {
  width: 0.8rem;
  height: 0.8rem;
}

/* Barra de resultados */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.catalog-toolbar__count {
  margin: 0;
  color: var(--catalog-muted);
}

.catalog-toolbar__count strong {
  color: var(--heading-color);
}

.catalog-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--catalog-muted);
}

.catalog-page .catalog-toolbar__sort .form-select {
  width: auto;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  border-radius: 999px;
}

/* Paginacao */
.catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3rem;
}

.catalog-page-link {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--default-color);
  font-weight: 500;
}

.catalog-page-link:hover {
  background-color: var(--catalog-soft);
  color: var(--accent-color);
}

.catalog-page-link.is-active {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Card de produto (formato do service-showcase)
--------------------------------------------------------------*/
.catalog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--catalog-radius);
  background-color: var(--surface-color);
  border: 1px solid var(--catalog-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--catalog-shadow);
  border-color: var(--catalog-line-strong);
}

.catalog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.catalog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.catalog-card:hover .catalog-card__media img {
  transform: scale(1.04);
}

.catalog-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--default-color) 6%, transparent);
  color: color-mix(in srgb, var(--accent-color) 70%, transparent);
  font-size: 2.5rem;
}

.catalog-card__tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background-color: var(--surface-color);
  color: var(--heading-color);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.catalog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.4rem 1.4rem;
}

.catalog-card__eyebrow {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color);
}

.catalog-card__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.catalog-card__title a {
  color: var(--heading-color);
}

.catalog-card__title a:hover {
  color: var(--accent-color);
}

.catalog-card__text {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--default-color) 72%, transparent);
}

.catalog-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--catalog-line);
}

/* Preco */
.catalog-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35rem;
  line-height: 1.15;
}

.catalog-price__hint {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--catalog-muted);
}

.catalog-price__value {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-price__unit {
  font-size: 0.8rem;
  color: var(--catalog-muted);
}

.catalog-price--consult .catalog-price__value {
  font-size: 1rem;
  font-weight: 600;
}

.catalog-price--lg {
  margin: 1.25rem 0;
}

.catalog-price--lg .catalog-price__hint {
  font-size: 0.82rem;
}

.catalog-price--lg .catalog-price__value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

/*--------------------------------------------------------------
# Pagina do produto
--------------------------------------------------------------*/
.catalog-gallery__main {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--catalog-radius);
  border: 1px solid var(--catalog-line);
  background-color: var(--surface-color);
}

.catalog-gallery__main a,
.catalog-gallery__main img {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-gallery__main img {
  object-fit: contain;
}

.catalog-gallery__main .catalog-card__placeholder {
  font-size: 4rem;
}

.catalog-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.catalog-gallery__thumb {
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--catalog-radius-sm);
  background: var(--surface-color);
  opacity: 0.7;
  transition: all 0.2s ease;
}

.catalog-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-gallery__thumb:hover,
.catalog-gallery__thumb.is-active {
  border-color: var(--accent-color);
  opacity: 1;
}

.catalog-buybox {
  position: sticky;
  top: 110px;
}

.catalog-buybox__title {
  margin: 0 0 0.5rem;
  font-family: var(--heading-font);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading-color);
}

.catalog-buybox__sku {
  margin: 0;
  font-size: 0.85rem;
  color: var(--catalog-muted);
}

.catalog-buybox__lead {
  margin-bottom: 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color) 80%, transparent);
}

.catalog-buybox__form {
  padding: 1.5rem;
  border: 1px solid var(--catalog-line);
  border-radius: var(--catalog-radius);
  background-color: var(--surface-color);
}

.catalog-buybox__option {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.catalog-buybox__option legend {
  float: none;
  width: auto;
  margin-bottom: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
}

.catalog-buybox__status {
  min-height: 1.25em;
  margin: -0.25rem 0 1rem;
  font-size: 0.85rem;
  color: var(--catalog-muted);
}

.catalog-buybox__actions {
  display: flex;
  gap: 0.75rem;
}

.catalog-buybox__unit {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--catalog-muted);
}

/* Quantidade - / + */
.catalog-stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--catalog-line-strong);
  border-radius: 999px;
  background-color: var(--catalog-soft);
}

.catalog-stepper button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.9rem;
  border: 0;
  background: transparent;
  color: var(--heading-color);
  font-size: 1.1rem;
}

.catalog-stepper button:hover {
  color: var(--accent-color);
}

.catalog-stepper input {
  width: 3.4rem;
  border: 0;
  background: transparent;
  color: var(--heading-color);
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.catalog-stepper input:focus {
  outline: none;
}

.catalog-stepper input::-webkit-outer-spin-button,
.catalog-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.catalog-stepper--sm button {
  width: 2rem;
  height: 2.2rem;
  font-size: 0.95rem;
}

.catalog-stepper--sm input {
  width: 2.8rem;
  font-size: 0.9rem;
}

/* Vantagens */
.catalog-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--catalog-muted);
}

.catalog-perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.catalog-perks .bi {
  color: var(--accent-color);
}

.catalog-perks--stack {
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.5rem 0 2rem;
  font-size: 0.95rem;
  color: var(--default-color);
}

.catalog-perks--stack .bi {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background-color: var(--catalog-tint);
}

.catalog-product__details {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--catalog-line);
}

.catalog-richtext {
  line-height: 1.75;
  color: color-mix(in srgb, var(--default-color) 85%, transparent);
}

.catalog-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: var(--catalog-radius-sm);
}

/* Ficha tecnica */
.catalog-specs {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--catalog-line);
  border-radius: var(--catalog-radius);
}

.catalog-specs__row {
  display: grid;
  grid-template-columns: minmax(8rem, 40%) 1fr;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
}

.catalog-specs__row:nth-child(odd) {
  background-color: var(--catalog-soft);
}

.catalog-specs dt {
  font-weight: 500;
  color: var(--catalog-muted);
}

.catalog-specs dd {
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

/*--------------------------------------------------------------
# Lista de orcamento / orcamento
--------------------------------------------------------------*/
.catalog-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--catalog-muted);
}

.catalog-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.catalog-steps span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--catalog-line-strong);
  font-size: 0.8rem;
  font-weight: 600;
}

.catalog-steps .is-current {
  color: var(--heading-color);
  font-weight: 500;
}

.catalog-steps .is-current span {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.catalog-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--catalog-line);
}

.catalog-line:first-child {
  border-top: 0;
  padding-top: 0;
}

.catalog-line__media {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--catalog-radius-sm);
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  font-size: 1.5rem;
}

.catalog-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-line__info {
  min-width: 0;
}

.catalog-line__name {
  display: block;
  font-weight: 600;
  color: var(--heading-color);
}

a.catalog-line__name:hover {
  color: var(--accent-color);
}

.catalog-line__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.catalog-line__options span {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background-color: var(--catalog-soft);
  font-size: 0.78rem;
  color: var(--catalog-muted);
}

.catalog-line__options strong {
  color: var(--heading-color);
  font-weight: 600;
}

.catalog-line__unit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--catalog-muted);
}

.catalog-line__total {
  min-width: 6.5rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--heading-color);
}

.catalog-line__total s {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
}

.catalog-line__qty-text {
  white-space: nowrap;
  font-size: 0.9rem;
}

.catalog-lines--readonly .catalog-line {
  grid-template-columns: 1fr auto auto;
}

.catalog-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.catalog-summary-total span {
  color: var(--catalog-muted);
}

.catalog-summary-total strong {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  color: var(--heading-color);
}

.catalog-totals {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--catalog-line);
}

.catalog-totals > div {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  padding: 0.2rem 0;
}

.catalog-totals dt {
  font-weight: 400;
  color: var(--catalog-muted);
}

.catalog-totals dd {
  min-width: 6.5rem;
  margin: 0;
  text-align: right;
}

.catalog-totals__grand dt,
.catalog-totals__grand dd {
  padding-top: 0.4rem;
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-quote__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--catalog-line);
}

.catalog-quote__notes h3 {
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--catalog-muted);
}

.catalog-quote__notes p {
  margin: 0;
  white-space: pre-line;
}

.catalog-meta {
  margin: 0 0 1.5rem;
}

.catalog-meta > div {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--catalog-line);
}

.catalog-meta > div:first-child {
  padding-top: 0;
}

.catalog-meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--catalog-muted);
}

.catalog-meta dd {
  margin: 0.15rem 0 0;
  font-weight: 500;
  color: var(--heading-color);
}

.catalog-meta dd span {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--catalog-muted);
}

.catalog-actions {
  display: grid;
  gap: 0.6rem;
}

.catalog-reject summary {
  list-style: none;
  padding: 0.4rem 0;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.catalog-reject summary::-webkit-details-marker {
  display: none;
}

/* Status */
.catalog-status {
  --tone: var(--accent-color);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--tone) 14%, transparent);
  color: color-mix(in srgb, var(--tone), var(--heading-color) 15%);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.catalog-status::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background-color: var(--tone);
}

.catalog-status--approved,
.catalog-status--converted { --tone: var(--catalog-success); }
.catalog-status--rejected { --tone: var(--catalog-danger); }
.catalog-status--requested { --tone: var(--catalog-warning); }
.catalog-status--expired,
.catalog-status--draft { --tone: color-mix(in srgb, var(--default-color) 55%, transparent); }

/* Linha do tempo */
.catalog-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.catalog-timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  color: var(--catalog-muted);
  font-size: 0.88rem;
}

.catalog-timeline li::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: var(--catalog-line-strong);
  z-index: 0;
}

.catalog-timeline li:first-child::before {
  display: none;
}

.catalog-timeline__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 2px solid var(--catalog-line-strong);
  background-color: var(--background-color);
  font-size: 1rem;
}

.catalog-timeline__label {
  font-weight: 500;
}

.catalog-timeline__date {
  font-size: 0.78rem;
}

.catalog-timeline .is-done,
.catalog-timeline .is-current {
  color: var(--heading-color);
}

.catalog-timeline .is-done::before,
.catalog-timeline .is-current::before {
  background-color: var(--accent-color);
}

.catalog-timeline .is-done .catalog-timeline__icon {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.catalog-timeline .is-current .catalog-timeline__icon {
  border-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.catalog-timeline .is-success .catalog-timeline__icon {
  border-color: var(--catalog-success);
  background-color: var(--catalog-success);
}

.catalog-timeline .is-danger .catalog-timeline__icon {
  border-color: var(--catalog-danger);
  background-color: var(--catalog-danger);
}

.catalog-timeline .is-muted .catalog-timeline__icon {
  border-color: var(--catalog-line-strong);
  background-color: var(--catalog-line-strong);
  color: var(--heading-color);
}

/* Confirmacao de envio */
.catalog-success {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  padding: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--catalog-success) 35%, transparent);
  border-radius: var(--catalog-radius);
  background-color: color-mix(in srgb, var(--catalog-success) 8%, var(--surface-color));
}

.catalog-success__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background-color: var(--catalog-success);
  color: #fff;
  font-size: 1.6rem;
}

.catalog-success__title {
  margin-bottom: 0.4rem;
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-success p {
  margin-bottom: 1rem;
}

.catalog-copy {
  max-width: 34rem;
}

.catalog-page .catalog-copy .form-control {
  font-size: 0.85rem;
  border-radius: 999px;
}

/*--------------------------------------------------------------
# Conta do cliente
--------------------------------------------------------------*/
.catalog-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 64rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--catalog-line);
  border-radius: var(--catalog-radius);
  background-color: var(--surface-color);
}

.catalog-auth--single {
  grid-template-columns: 1fr;
  max-width: 30rem;
}

.catalog-auth__aside {
  padding: 3rem;
  background:
    radial-gradient(30rem 18rem at 0% 0%, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 70%),
    var(--catalog-soft);
  border-right: 1px solid var(--catalog-line);
}

.catalog-auth__aside-title {
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.catalog-auth__form {
  padding: 3rem;
}

.catalog-auth__badge {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  font-size: 1.35rem;
}

.catalog-auth__title {
  margin-bottom: 0.4rem;
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-auth__switch {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--catalog-muted);
}

.catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--catalog-line);
}

.catalog-tabs a,
.catalog-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--catalog-muted);
  font-size: 0.92rem;
  font-weight: 500;
}

.catalog-tabs a:hover,
.catalog-tabs button:hover {
  color: var(--heading-color);
  background-color: var(--catalog-soft);
}

.catalog-tabs a.is-active {
  background-color: var(--catalog-tint);
  color: var(--accent-color);
}

.catalog-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--catalog-line);
  border-radius: var(--catalog-radius);
  background-color: var(--surface-color);
}

.catalog-stat__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background-color: var(--catalog-tint);
  color: var(--accent-color);
  font-size: 1.25rem;
}

.catalog-stat__value {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading-color);
}

.catalog-stat__label {
  font-size: 0.85rem;
  color: var(--catalog-muted);
}

.catalog-quote-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-quote-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto 8rem 1rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: var(--catalog-radius-sm);
  color: var(--default-color);
  transition: background-color 0.2s ease;
}

.catalog-quote-list li + li .catalog-quote-row {
  border-top: 1px solid var(--catalog-line);
  border-radius: 0;
}

.catalog-quote-row:hover {
  background-color: var(--catalog-soft);
  color: var(--default-color);
}

.catalog-quote-row__code {
  font-weight: 700;
  color: var(--heading-color);
}

.catalog-quote-row__meta {
  font-size: 0.88rem;
  color: var(--catalog-muted);
}

.catalog-quote-row__total {
  font-weight: 600;
  text-align: right;
  color: var(--heading-color);
}

.catalog-quote-row .bi-chevron-right {
  color: var(--catalog-muted);
}

/*--------------------------------------------------------------
# Responsivo
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
  .catalog-hero {
    padding-top: 110px;
  }

  .catalog-hero__heading {
    margin-top: 1.5rem;
  }

  .catalog-section {
    padding: 2rem 0 3.5rem;
  }

  .catalog-sticky,
  .catalog-buybox {
    position: static;
  }

  .catalog-filters {
    margin-top: 0.75rem;
  }

  .catalog-auth {
    grid-template-columns: 1fr;
  }

  .catalog-auth__aside {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .catalog-hero__actions .catalog-pill span:not(.catalog-pill__count) {
    display: none;
  }

  .catalog-panel,
  .catalog-buybox__form,
  .catalog-auth__form {
    padding: 1.25rem;
  }

  .catalog-buybox__actions {
    flex-direction: column;
  }

  .catalog-stepper {
    align-self: flex-start;
  }

  .catalog-line {
    grid-template-columns: 3.5rem 1fr auto;
    gap: 0.75rem;
  }

  .catalog-line__media {
    width: 3.5rem;
    height: 3.5rem;
  }

  .catalog-line__qty {
    grid-column: 2;
  }

  .catalog-line__total {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
  }

  .catalog-line__remove {
    grid-column: 3;
    grid-row: 1;
  }

  .catalog-lines--readonly .catalog-line {
    grid-template-columns: 1fr auto;
  }

  .catalog-lines--readonly .catalog-line__qty-text {
    grid-column: 1;
    grid-row: 2;
  }

  .catalog-lines--readonly .catalog-line__total {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .catalog-timeline__label {
    font-size: 0.78rem;
  }

  .catalog-success {
    flex-direction: column;
  }

  .catalog-quote-row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
  }

  .catalog-quote-row__meta {
    grid-column: 1;
  }

  .catalog-quote-row__total {
    grid-column: 2;
    grid-row: 2;
  }

  .catalog-quote-row .bi-chevron-right {
    display: none;
  }
}