/* Ajustes pontuais da home: entregas, menu rápido, títulos e catálogo. */

:root {
  /* Moto simples e legível em tamanhos pequenos. Reutilizada em Entregas e Delivery. */
  --petala-icon-moto: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='17' r='3'/><circle cx='18' cy='17' r='3'/><path d='M8.7 17h4.1l2.2-5h-5.2L7.5 17M12.8 17l3.1-7h2.7M15 12h3.2l1.4 2.2M9.5 9.5h4.2'/></svg>");
}

/* Títulos principais: serifada editorial próxima da identidade anterior. */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.section-title em {
  font-family: inherit;
  font-weight: 800;
}

/* As redes sociais voltam ao bloco original definido em styles.css:
   Instagram e TikTok coloridos, abaixo das ações principais do hero. */

/* Menu Rápido: botão leve; o hambúrguer funciona como trailing icon,
   sem cápsula ou fundo próprio, no mesmo padrão visual da seta do Catálogo. */
.hero-quick-menu-btn {
  min-height: 52px;
  padding: 11px 20px;
  gap: 10px;
  background: #fff;
  color: var(--copper-deep);
  border: 1px solid rgba(106, 50, 12, 0.26);
  box-shadow: none;
  font-weight: 650;
  letter-spacing: 0.005em;
}
.hero-quick-menu-btn:hover {
  background: #fbf8f5;
  border-color: rgba(106, 50, 12, 0.42);
  transform: translateY(-1.5px);
}
.hero-quick-menu-btn:focus-visible {
  outline-color: var(--copper);
}
.hero-quick-menu-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
}

/* Informações do salão — um único surface. A separação interna é apenas
   o Divider de 1px do Material 3, sem mini-cards, sombra ou cantos internos. */
.hero-meta {
  gap: 0;
}
.hero-meta > div,
.hero-meta > div + div,
.hero-meta > div:nth-child(3) {
  box-shadow: none !important;
  border: 0;
  border-radius: 0;
}

@media (min-width: 881px) {
  .hero-meta {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
    max-width: 760px;
  }
  .hero-meta > div:nth-child(3) {
    grid-column: auto;
  }

  /* São exatamente dois divisores: Endereço | Atendimento | Entregas. */
  .hero-meta > div:nth-child(2),
  .hero-meta > div:nth-child(3) {
    border-left: 1px solid var(--md-sys-color-outline-variant) !important;
  }

  /* O hambúrguer fica ao lado da busca também no desktop. */
  .nav-burger {
    display: inline-flex !important;
    margin-left: 0 !important;
  }

  /* No desktop o Menu rápido é um drawer lateral de exatamente meia tela. */
  .nav-drawer {
    display: flex !important;
    left: auto;
    right: 0;
    width: 50vw;
    max-width: 50vw;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -18px 0 42px rgba(0, 0, 0, 0.28);
  }
}

/* Entregas: uma única moto simples, sem detalhes que pareçam outro símbolo. */
.hero-meta > div:nth-child(3) {
  --mt-icon: var(--petala-icon-moto);
}

/* No resumo do catálogo, Delivery usa a mesma moto no lugar do caminhão. */
.vit-commerce-note > span:first-child > svg {
  display: none;
}
.vit-commerce-note > span:first-child::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: var(--petala-icon-moto) center / 18px 18px no-repeat;
  mask: var(--petala-icon-moto) center / 18px 18px no-repeat;
}

/* Catálogo em grade: os produtos passam a ser uma grade de verdade, com
   divisores de 1px contínuos entre colunas e linhas. */
.search-overlay .catalog-grid {
  gap: 1px !important;
  padding-bottom: 0;
  background: var(--md-sys-color-outline-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.search-overlay .catalog-card {
  border-radius: 0;
  border: 0;
  margin: 0;
}

/* Em celular o catálogo precisa continuar sendo grade, não uma sequência de
   cards de largura inteira. A busca pela lupa e "ver todos em grade" usam o
   mesmo CatalogGrid dentro do SearchOverlay, então esta regra corrige ambos. */
@media (max-width: 640px) {
  .search-overlay .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .search-overlay .catalog-card {
    min-width: 0;
  }

  .search-overlay .catalog-card-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .search-overlay .catalog-card-body {
    min-width: 0;
    gap: 5px;
    padding: 10px 10px 12px;
  }

  .search-overlay .catalog-card-eyebrow {
    font-size: 8.5px;
    line-height: 1.25;
    letter-spacing: 0.1em;
  }

  .search-overlay .catalog-card-name {
    font-size: 14.5px;
    line-height: 1.18;
  }

  .search-overlay .catalog-card-open {
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
  }

  .search-overlay .catalog-card-price {
    margin-top: 1px;
    font-size: 15px;
    line-height: 1.2;
  }
}

@media (max-width: 360px) {
  .search-overlay .catalog-card-body {
    padding: 9px 8px 10px;
  }
  .search-overlay .catalog-card-name {
    font-size: 13.5px;
  }
  .search-overlay .catalog-card-price {
    font-size: 14px;
  }
}

/* A área segura inferior fica dentro do conteúdo rolável, não como uma faixa
   preta fixa cobrindo a parte de baixo da tela. */
.search-overlay {
  padding-bottom: 0;
}
.search-overlay-body {
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 880px) {
  .hero-ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .hero-ctas > .btn {
    width: 100%;
    justify-content: center;
  }
  /* WhatsApp ocupa a primeira linha; Menu rápido e Catálogo ficam lado a lado,
     mantendo a ordem WhatsApp → Menu rápido → Ver catálogo. */
  .hero-ctas > .btn-primary {
    grid-column: 1 / -1;
  }
  .hero-quick-menu-btn {
    grid-column: auto;
    width: 100% !important;
    justify-self: stretch;
  }

  .hero-meta > div:nth-child(2),
  .hero-meta > div:nth-child(3) {
    border-left: 0 !important;
    border-top: 1px solid var(--md-sys-color-outline-variant) !important;
  }
}

@media (max-width: 520px) {
  .hero-ctas {
    grid-template-columns: 1fr;
  }
  .hero-ctas > .btn-primary,
  .hero-quick-menu-btn {
    grid-column: 1;
    width: 100% !important;
  }
}

/* Vitrine mobile: equilíbrio entre densidade e leitura — cerca de 2,5 produtos
   visíveis por vez, mantendo o gesto horizontal e a proporção 4:5. */
@media (max-width: 640px) {
  .catalog-band,
  .calculator-band {
    padding-inline: 14px;
  }

  .aisle-head {
    gap: 10px;
    margin-bottom: 22px;
  }

  .aisle-title {
    font-size: clamp(25px, 7.2vw, 30px);
    line-height: 1.05;
  }

  .aisle-sub {
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.45;
  }

  .rail-track {
    gap: 10px;
    margin-inline: -14px;
    padding-left: 14px;
    padding-right: 0;
    scroll-padding-left: 14px;
  }

  .rail-card {
    flex: 0 0 clamp(148px, 39vw, 168px);
  }

  .rail-card-body {
    gap: 7px;
    padding: 10px 11px 12px;
  }

  .rail-card-name {
    font-size: 13.5px;
    line-height: 1.22;
  }

  .rail-card-price {
    font-size: 13.5px;
  }

  .rail-badge,
  .rail-tag-servico {
    top: 7px;
    left: 7px;
    padding: 4px 7px;
    font-size: 8.5px;
    letter-spacing: 0.07em;
  }

  .rail-tag-servico {
    top: auto;
    bottom: 7px;
  }
}

/* Serviços mobile: o marcador de seleção fica à esquerda do texto, nunca acima. */
@media (max-width: 880px) {
  .site-view--services .serv-table .name {
    position: relative;
    padding-left: 52px !important;
  }

  .site-view--services .serv-row-mark {
    position: absolute;
    left: 14px;
    top: 18px;
    margin: 0;
  }

  .site-view--services .serv-row-text {
    display: block;
    max-width: none;
  }
}

/* Localização: remove o mapa incorporado e deixa somente uma ação clara para
   abrir a rota do Salão Pétala Morena no Google Maps. */
.cont-map {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.cont-map iframe,
.cont-map-caption > span {
  display: none !important;
}

.cont-map-caption {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cont-map-route {
  min-height: 64px;
  padding: 0 30px;
  justify-content: center;
  border-radius: 32px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: var(--md-sys-elevation-level1);
  transition:
    transform var(--duration-fast) var(--ease-emphasized),
    background var(--duration-fast) linear,
    box-shadow var(--duration-fast) linear;
}

.cont-map-route:hover {
  background: var(--copper-deep);
  transform: translateY(-2px);
  box-shadow: var(--md-sys-elevation-level2);
}

.cont-map-route:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--md-sys-elevation-level0);
}

.cont-map-route svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .cont-map-route {
    width: 100%;
    min-height: 62px;
  }
}