/* =========================================================
   Formifri — tema para as páginas do template ShopWise
   Carregado depois de main.css e 4kitchen.css.
   Mapeia as variáveis do template para a paleta 4Kitchen e
   moderniza os componentes do conteúdo (.main).
   ========================================================= */

/* ---------- Variáveis do template → 4Kitchen ---------- */
:root {
  --default-font: "Work Sans", system-ui, sans-serif;
  --heading-font: "Spectral", Georgia, serif;
  --nav-font: "Work Sans", system-ui, sans-serif;

  --background-color: #ffffff;
  --default-color: #3a4550;
  --heading-color: #16202a;
  --accent-color: #143d5c;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  --nav-color: #3a4550;
  --nav-hover-color: #143d5c;
  --nav-dropdown-color: #3a4550;
  --nav-dropdown-hover-color: #143d5c;

  /* Bootstrap */
  --bs-primary: #143d5c;
  --bs-primary-rgb: 0, 141, 205;
  --bs-link-color: #0f3150;
  --bs-link-hover-color: #0b2640;
  --bs-border-color: #e3e8ec;
  --bs-border-radius: 14px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 20px;
  --bs-body-font-family: "Work Sans", system-ui, sans-serif;
}
.light-background { --background-color: #f4f7f9; --surface-color: #ffffff; }
.dark-background {
  --background-color: #16202a;
  --default-color: rgba(255, 255, 255, 0.78);
  --heading-color: #ffffff;
  --surface-color: #1e2831;
  --contrast-color: #ffffff;
}

/* ---------- Tipografia e ritmo do conteúdo ---------- */
/* :where() mantém especificidade zero para não vencer as regras próprias das secções */
:where(.main) h1, :where(.main) h2, :where(.main) h3,
:where(.main) h4, :where(.main) h5, :where(.main) h6 {
  margin: 0 0 0.5rem;
  color: var(--heading-color);
  font-family: var(--heading-font);
 
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
:where(.main) h5, :where(.main) h6 { font-family: var(--default-font); font-weight: 600; letter-spacing: 0; }
:where(.main) p { margin: 0 0 1rem; }
:where(.main) ul:not([class]), :where(.main) ol:not([class]) { margin: 0 0 1rem; padding-left: 1.25rem; list-style: revert; }
:where(.main) ul:not([class]) li + li, :where(.main) ol:not([class]) li + li { margin-top: 0.35rem; }
:where(.main) img { display: inline-block; }
:where(.main) a { color: var(--accent-color); }
:where(.main) a:hover { color: var(--brand-700); }
:where(.main) strong, :where(.main) b { color: var(--heading-color); font-weight: 600; }
:where(.main) hr { border-color: var(--line); opacity: 1; }

/* Secções do template com o ritmo da 4Kitchen */
.main .section { padding: 48px 0; }
.main .container { max-width: var(--container); padding-left: 24px; padding-right: 24px; }
@media (max-width: 575.98px) { .main .container { padding-left: 16px; padding-right: 16px; } .main .section { padding: 32px 0; } }

/* ---------- Cabeçalho de página (substitui o .page-title) ---------- */
.page-head { padding-top: 8px; padding-bottom: 28px; }
.page-head__title { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; }
.page-head__sub { max-width: 640px; margin-top: 10px; color: var(--muted); font-size: 15px; }
.page-head .breadcrumb-4k { padding-bottom: 12px; }
.page-head--center { text-align: center; }
.page-head--center .page-head__sub { margin-left: auto; margin-right: auto; }
.page-head--center .breadcrumb-4k { justify-content: center; }

/* ---------- Botões ---------- */
.main .btn {
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: 0.7rem;
  border-radius: 999px;
  font-family: var(--default-font);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.main .btn:active { transform: scale(0.98); }
.main .btn-sm { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: 0.45rem; }
.main .btn-primary,
.main [class*="btn-primary-"] {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
  --bs-btn-disabled-bg: var(--ink);
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.main .btn-primary:hover, .main [class*="btn-primary-"]:hover { background-color: #000; border-color: #000; color: #fff; }
.main .btn-secondary,
.main .btn-outline-primary,
.main .btn-outline-secondary,
.main .btn-ghost {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  background-color: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.main .btn-secondary:hover, .main .btn-outline-primary:hover, .main .btn-outline-secondary:hover, .main .btn-ghost:hover { border-color: var(--ink); color: var(--ink); background-color: #fff; }
.main .btn-danger { --bs-btn-bg: #fff; --bs-btn-color: var(--red); --bs-btn-border-color: #f1c9cd; --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); }
.main .btn-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }

/* ---------- Formulários ---------- */
.main .form-control,
.main .form-select,
.main input[type="text"]:not(.quantity-input),
.main input[type="email"],
.main input[type="password"],
.main input[type="tel"],
.main input[type="number"]:not(.quantity-input),
.main input[type="search"],
.main input[type="date"],
.main select,
.main textarea {
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background-color: #fff;
  color: var(--ink);
  font-family: var(--default-font);
  font-size: 14px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.main textarea { min-height: 120px; }
.main .form-control:focus,
.main .form-select:focus,
.main input:focus,
.main select:focus,
.main textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px var(--brand-50); }
.main .form-control::placeholder, .main input::placeholder, .main textarea::placeholder { color: var(--muted); }
.main .form-label, .main label { color: var(--ink); font-weight: 500; }
.main .form-check-input { width: 1.15em; height: 1.15em; border-color: var(--line-strong); }
.main .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.main .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.main .form-switch .form-check-input { width: 2.4em; border-radius: 999px; }
.main .form-switch .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.main .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.main .input-group > .btn:last-child, .main .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- Separadores, pills, acordeões ---------- */
.main .nav-pills { gap: 4px; padding: 6px; border-radius: 999px; background: var(--surface); }
.main .nav-pills .nav-link { border-radius: 999px; color: var(--muted); font-weight: 500; }
.main .nav-pills .nav-link.active, .main .nav-pills .show > .nav-link { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.main .nav-tabs { border-color: var(--line); }
.main .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; }
.main .nav-tabs .nav-link.active { border-bottom-color: var(--ink); background: none; color: var(--ink); }
.main .accordion { --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px var(--brand-50); --bs-accordion-active-bg: var(--brand-50); --bs-accordion-active-color: var(--ink); --bs-accordion-border-radius: 18px; --bs-accordion-inner-border-radius: 18px; }
.main .accordion-button { font-weight: 600; color: var(--ink); }

/* ---------- Tabelas, badges, alertas, modais ---------- */
.main .table { --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface); color: var(--text); }
.main .table thead th { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.main .badge { border-radius: 999px; font-weight: 500; padding: 0.45em 0.8em; }
.main .alert { border-radius: 16px; }
.modal-content { border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { color: var(--ink); font-family: var(--font-display); font-weight: 400; }

/* ---------- Superfícies ---------- */
/* Caixas brancas do template ganham o cantos e a linha da 4Kitchen */
.main .card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.main .card-header, .main .card-footer { border-color: var(--line); background: var(--surface); }
.main .light-background { background-color: var(--surface); }
.main .dark-background { background-color: var(--ink); }

/* Ícones e pormenores com a cor de marca */
.main .bi { vertical-align: -0.125em; }
.main ::selection { background: var(--brand-100); color: var(--ink); }

/* Cartões de produto 4Kitchen dentro das páginas do template: mantêm o estilo da categoria */
.main .product-card__title { margin: 0; font-family: var(--font); font-variation-settings: normal; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 21px; }
.main .product-card__title a { color: var(--ink); }
.main .product-card__title a:hover { color: var(--brand-700); }
.main .product-card img { display: block; }