/* ==========================================================================
   Amora Distribuidora — tema da loja
   Sobrepõe o Bootstrap 5 para aproximar o visual do site institucional
   (somos.amoradistribuidora.com.br).

   Uso no layout.erb, DEPOIS do CSS do Bootstrap:
     <link href="/stylesheets/amora.css?<%= Time.now.to_i %>" rel="stylesheet">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — ajuste só aqui para calibrar a marca
   -------------------------------------------------------------------------- */
:root {
  /* Paleta "amora": vinho profundo + berry + dourado gourmet */
  --amora-plum-900: #35142b;   /* topo do gradiente do header  */
  --amora-plum-700: #52203f;   /* barra principal              */
  --amora-berry-500: #8a2e6e;  /* cor primária / links ativos  */
  --amora-berry-300: #c77fb0;  /* hover, detalhes              */
  --amora-gold: #d9a441;       /* CTA, preços, destaques       */
  --amora-gold-dark: #b8862c;

  /* Neutros */
  --amora-cream: #fbf7f9;      /* fundo da página              */
  --amora-white: #ffffff;
  --amora-line: #ebe0e7;       /* bordas suaves                */
  --amora-ink: #2a1f27;        /* texto principal              */
  --amora-muted: #6f6270;      /* texto secundário             */
  --amora-whatsapp: #25d366;

  /* Formas e sombras */
  --amora-radius: 14px;
  --amora-radius-sm: 10px;
  --amora-radius-pill: 999px;
  --amora-shadow: 0 2px 10px rgba(53, 20, 43, .06);
  --amora-shadow-lg: 0 14px 34px rgba(53, 20, 43, .14);

  /* Tipografia */
  --amora-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --amora-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  background-image: none !important;   /* remove o gradiente cinza do layout */
  background-color: var(--amora-cream);
  color: var(--amora-ink);
  font-family: var(--amora-font-body);
  font-size: .975rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn, .card-title {
  font-family: var(--amora-font-display);
  letter-spacing: -.01em;
}

h1, h2, h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 500; }

a { color: var(--amora-berry-500); text-decoration: none; }
a:hover { color: var(--amora-plum-700); }

main {
  max-width: 1320px !important;
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
}

::selection { background: var(--amora-berry-300); color: #fff; }

/* Rolagem suave e respeito a "reduzir movimento" */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Foco visível e consistente (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--amora-berry-300);
  outline-offset: 2px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Barra principal (navbar bg-dark)
   -------------------------------------------------------------------------- */
.navbar.bg-dark {
  background: linear-gradient(180deg, var(--amora-plum-900), var(--amora-plum-700)) !important;
  padding: .7rem 0;
  box-shadow: var(--amora-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar.bg-dark .navbar-brand { padding: 0; margin-right: 1.5rem; }
.navbar.bg-dark .navbar-brand img {
  height: 46px;
  width: auto;
  display: block;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
  font-size: .95rem;
  padding: .45rem .9rem;
  border-radius: var(--amora-radius-pill);
  transition: background-color .18s ease, color .18s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, .12);
}

/* Telefone no topo */
.navbar.bg-dark .text-white {
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: .9;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, .3);
  border-radius: var(--amora-radius-sm);
  padding: .35rem .6rem;
}
.navbar-toggler:focus { box-shadow: none; }

/* Campo de busca do topo */
.navbar .input-group .form-control {
  border: 0;
  border-radius: var(--amora-radius-pill) 0 0 var(--amora-radius-pill);
  padding-left: 1.1rem;
  min-width: 180px;
  background: rgba(255, 255, 255, .95);
}
.navbar .input-group .form-control::placeholder { color: #9b8f98; }
.navbar .input-group .form-control:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(199, 127, 176, .35);
}
.navbar .input-group .btn {
  border-radius: 0 var(--amora-radius-pill) var(--amora-radius-pill) 0;
  background: var(--amora-gold);
  border-color: var(--amora-gold);
  color: #3a2a0c;
  padding-inline: 1rem;
}
.navbar .input-group .btn:hover {
  background: var(--amora-gold-dark);
  border-color: var(--amora-gold-dark);
  color: #fff;
}

/* Botão do carrinho no mobile */
.navbar .btn-light {
  border-radius: var(--amora-radius-pill);
  border: 0;
  font-weight: 500;
}
.navbar .btn-light .badge.bg-dark {
  background: var(--amora-berry-500) !important;
  border-radius: var(--amora-radius-pill);
}

/* --------------------------------------------------------------------------
   4. Barra de categorias (navbar bg-light)
   -------------------------------------------------------------------------- */
.navbar.bg-light {
  background: var(--amora-white) !important;
  border-bottom: 1px solid var(--amora-line);
  padding: .4rem 1rem;
  gap: .5rem;
}

.navbar.bg-light .navbar-nav {
  font-size: .95rem !important;   /* neutraliza o .fs-5 do markup */
  gap: .25rem;
  flex-wrap: wrap;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--amora-muted);
  font-weight: 500;
  padding: .4rem .85rem;
  border-radius: var(--amora-radius-pill);
  transition: background-color .18s ease, color .18s ease;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--amora-plum-700);
  background: var(--amora-cream);
}
.navbar-light .navbar-nav .nav-link.active {
  color: #fff;
  background: var(--amora-berry-500);
}

/* Select "Ordenar Por" */
.form-select {
  border-color: var(--amora-line);
  border-radius: var(--amora-radius-pill);
  color: var(--amora-muted);
  font-size: .9rem;
  padding: .4rem 2.2rem .4rem 1rem;
}
.form-select:focus {
  border-color: var(--amora-berry-300);
  box-shadow: 0 0 0 3px rgba(199, 127, 176, .25);
}

/* --------------------------------------------------------------------------
   5. Cards de produto
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--amora-line);
  border-radius: var(--amora-radius);
  background: var(--amora-white);
  box-shadow: var(--amora-shadow);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--amora-shadow-lg);
  border-color: var(--amora-berry-300);
}

.card img,
.card-img-top {
  object-fit: contain;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 1rem;
  background: #fff;
  mix-blend-mode: multiply;   /* some o fundo branco das fotos de produto */
}

.card-body { padding: 1rem 1.1rem 1.25rem; }

.card h4, .card h5, .card h6,
.card-title {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--amora-ink);
  margin-bottom: .6rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Preço — o dourado é o sinal de destaque da marca */
.card .preco,
.card .price,
.card .text-success,
.card strong.preco {
  font-family: var(--amora-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--amora-plum-700) !important;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--amora-radius-pill);
  font-weight: 500;
  padding: .5rem 1.25rem;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-success {
  background: var(--amora-berry-500);
  border-color: var(--amora-berry-500);
  color: #fff;
}
.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
  background: var(--amora-plum-700);
  border-color: var(--amora-plum-700);
  color: #fff;
}

.btn-dark {
  background: var(--amora-plum-900);
  border-color: var(--amora-plum-900);
}
.btn-dark:hover {
  background: var(--amora-plum-700);
  border-color: var(--amora-plum-700);
}

.btn-secondary {
  background: transparent;
  border-color: var(--amora-line);
  color: var(--amora-muted);
}
.btn-secondary:hover {
  background: var(--amora-cream);
  border-color: var(--amora-berry-300);
  color: var(--amora-plum-700);
}

/* CTA de conversão (Finalizar Pedido, Comprar) */
.btn-cta,
.btn-warning {
  background: var(--amora-gold);
  border-color: var(--amora-gold);
  color: #3a2a0c;
  font-weight: 600;
}
.btn-cta:hover,
.btn-warning:hover {
  background: var(--amora-gold-dark);
  border-color: var(--amora-gold-dark);
  color: #fff;
}

.badge.bg-dark { background: var(--amora-berry-500) !important; }

/* --------------------------------------------------------------------------
   7. Formulários
   -------------------------------------------------------------------------- */
.form-control {
  border-color: var(--amora-line);
  border-radius: var(--amora-radius-sm);
  padding: .55rem .9rem;
}
.form-control:focus {
  border-color: var(--amora-berry-300);
  box-shadow: 0 0 0 3px rgba(199, 127, 176, .25);
}
.form-label { font-weight: 500; font-size: .88rem; color: var(--amora-muted); }

/* --------------------------------------------------------------------------
   8. Paginação
   -------------------------------------------------------------------------- */
.pagination { gap: .3rem; }
.page-link {
  border: 1px solid var(--amora-line);
  border-radius: var(--amora-radius-sm) !important;
  color: var(--amora-muted);
  font-weight: 500;
  min-width: 40px;
  text-align: center;
}
.page-link:hover {
  background: var(--amora-cream);
  border-color: var(--amora-berry-300);
  color: var(--amora-plum-700);
}
.page-item.active .page-link {
  background: var(--amora-berry-500);
  border-color: var(--amora-berry-500);
  color: #fff;
}

/* --------------------------------------------------------------------------
   9. Painel do carrinho (#carrinho)
   -------------------------------------------------------------------------- */
#carrinho {
  background: var(--amora-white) !important;
  border: 0 !important;
  border-left: 1px solid var(--amora-line) !important;
  box-shadow: -18px 0 44px rgba(53, 20, 43, .16);
  padding: 1.25rem;
}
#carrinho h1, #carrinho h2, #carrinho h3,
#carrinho h4, #carrinho h5 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amora-plum-700);
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--amora-line);
}
#carrinho img { border-radius: var(--amora-radius-sm); }
#carrinho hr { border-color: var(--amora-line); opacity: 1; }

/* --------------------------------------------------------------------------
   10. Rodapé
   -------------------------------------------------------------------------- */
footer {
  background: var(--amora-plum-900);
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
  line-height: 1.9;
  padding: 2.25rem 1rem;
  margin-top: 3rem;
}
footer a { color: rgba(255, 255, 255, .9); }
footer a:hover { color: var(--amora-gold); }

/* --------------------------------------------------------------------------
   11. Toast
   -------------------------------------------------------------------------- */
.toast {
  border: 0;
  border-radius: var(--amora-radius-sm);
  box-shadow: var(--amora-shadow-lg);
  overflow: hidden;
}
.toast .toast-body.bg-dark {
  background: var(--amora-plum-700) !important;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. Botão flutuante do WhatsApp (opcional — ver snippet no layout)
   -------------------------------------------------------------------------- */
.amora-whats {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1090;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amora-whatsapp);
  color: #fff;
  font-size: 1.7rem;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .4);
  transition: transform .2s ease;
}
.amora-whats:hover { color: #fff; transform: scale(1.07); }

/* --------------------------------------------------------------------------
   13. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .navbar.bg-dark { padding: .55rem 0; }
  .navbar.bg-dark .navbar-brand img { height: 38px; }
  .navbar.bg-dark .text-white { display: block; margin: .5rem 0; }
  .navbar .input-group .form-control { min-width: 0; }
  main { padding: 1rem .75rem 2.5rem; }
  #carrinho { width: 100% !important; min-width: 0 !important; }
  footer { margin-top: 2rem; padding: 1.75rem 1rem; }
}