/*
 * Pétala Morena — experiência desktop.
 *
 * Este arquivo é deliberadamente um owner exclusivo de telas grandes.
 * O baseline mobile/tablet (<=1099px) permanece sob os arquivos existentes;
 * nenhuma regra visual deste redesign existe fora de media queries desktop.
 */

@media (min-width: 1100px) {
  :root {
    --desktop-sidebar-width: 0px;
    --desktop-content-max: 1440px;
    --desktop-gutter: clamp(28px, 4vw, 64px);
    --desktop-header-height: 72px;
  }

  /* ==========================================================
     SHELL GLOBAL — tradução natural da bottom nav, não dashboard
     ========================================================== */
  .nav {
    position: sticky;
    inset: auto;
    top: 0;
    z-index: 50;
    width: 100%;
    min-height: var(--desktop-header-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: #1b1b1b;
  }

  .nav .container.nav-inner {
    width: 100%;
    max-width: var(--desktop-content-max);
    min-width: 0;
    height: var(--desktop-header-height);
    margin-inline: auto;
    padding-inline: var(--desktop-gutter);
    justify-content: flex-start;
    gap: clamp(16px, 2.2vw, 34px);
  }

  .nav-logo {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .nav-logo-wordmark {
    width: auto;
    height: 37px;
    max-width: 185px;
  }

  .nav-logo-icon {
    width: 21px;
    height: 21px;
  }

  .nav-links {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .nav-links a {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    max-width: max-content;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 clamp(9px, 1vw, 14px);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 650;
    white-space: nowrap;
    opacity: 1;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .nav-links a:hover {
    background: rgba(255, 255, 255, 0.065);
    color: #fff;
  }

  .nav-links a.is-active {
    width: auto;
    flex: 0 0 auto;
    background: rgba(177, 91, 31, 0.24);
    color: #ffd9be;
    font-weight: 800;
  }

  .nav-link-icon {
    display: inline-flex;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    align-items: center;
    justify-content: center;
  }

  .nav-link-icon svg {
    width: 19px;
    height: 19px;
  }

  .nav-actions {
    position: static;
    display: flex;
    min-width: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  /* Busca global continua sempre acessível, mas deixa de competir com o
     conteúdo da página. Produtos mantém sua busca grande no próprio contexto. */
  .nav-search-btn {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.82);
  }

  .nav-search-btn > span {
    display: none;
  }

  .nav-search-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .nav-search-btn:hover {
    border-color: rgba(209, 139, 88, 0.34);
    background: #33302e;
    color: #fff;
  }

  .nav-whatsapp-btn,
  .nav-actions .nav-whatsapp-btn {
    position: static;
    right: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  /* site-fixes.css força burger/drawer com !important desde 881px. Este é o
     ponto em que o owner desktop precisa empatar a importância para encerrar
     deliberadamente esse patch histórico a partir de 1100px. */
  .nav-burger,
  .nav-drawer,
  .mobile-bottom-nav {
    display: none !important;
  }

  main {
    min-height: calc(100vh - var(--desktop-header-height));
    margin-left: 0;
    padding-top: 0;
  }

  main .container {
    width: 100%;
    max-width: var(--desktop-content-max);
    margin-inline: auto;
    padding-inline: var(--desktop-gutter);
  }

  main [id] {
    scroll-margin-top: var(--desktop-header-height);
  }

  /* ==========================================================
     HOME — preserva a boa composição texto + fachada
     ========================================================== */
  .site-view--home .hero {
    padding-block: 0;
  }

  .site-view--home .hero > .container {
    max-width: none;
    padding-inline: 0;
  }

  .site-view--home .hero-grid {
    display: grid;
    grid-template-columns: minmax(520px, 0.98fr) minmax(460px, 1.02fr);
    min-height: min(760px, calc(100vh - var(--desktop-header-height)));
    gap: 0;
    align-items: stretch;
  }

  .site-view--home .hero-text {
    display: flex;
    width: 100%;
    max-width: 780px;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding: clamp(42px, 5.2vh, 66px) clamp(42px, 5vw, 84px);
    margin-left: auto;
  }

  .site-view--home .hero-logo {
    max-width: min(560px, 100%);
  }

  .site-view--home .hero-sub {
    max-width: 55ch;
    margin-bottom: 28px;
    font-size: clamp(17px, 1.25vw, 19px);
    line-height: 1.52;
  }

  .site-view--home .hero-choice {
    max-width: 660px;
  }

  .site-view--home .hero-ctas {
    display: grid;
    grid-template-columns: minmax(170px, 1.08fr) minmax(170px, 0.92fr) auto;
    gap: 10px;
    margin-bottom: 14px;
  }

  .site-view--home .hero-ctas .btn {
    min-height: 52px;
    padding-inline: 20px;
  }

  .site-view--home .hero-action-products {
    background: var(--copper);
    color: #fff;
  }

  .site-view--home .hero-action-services {
    background: #242424;
    color: #fff;
  }

  .site-view--home .hero-action-whatsapp {
    min-width: 182px;
  }

  .site-view--home .hero-action-whatsapp svg {
    display: block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .site-view--home .hero-storefront {
    min-height: min(760px, calc(100vh - var(--desktop-header-height)));
    margin: 0;
  }

  .site-view--home .hero-storefront img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .site-view--home .hero-directions {
    left: 32px;
    bottom: 28px;
  }

  /* ==========================================================
     PRODUTOS — remove a dupla sidebar sem perder taxonomia
     ========================================================== */
  .site-view--products {
    overflow-x: clip;
  }

  .site-view--products .vitrine {
    padding-top: 0;
  }

  .site-view--products .vitrine > .container {
    display: block;
    max-width: var(--desktop-content-max);
    padding-inline: var(--desktop-gutter);
  }

  .vit-desktop-index {
    position: sticky;
    top: var(--desktop-header-height);
    z-index: 22;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    max-height: none;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(28, 27, 26, 0.10);
    background: rgba(255, 255, 255, 0.96);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .vit-desktop-index-head,
  .vit-desktop-index-search {
    display: none;
  }

  .vit-desktop-index-all {
    order: 2;
    width: auto;
    min-width: max-content;
    height: 42px;
    min-height: 42px;
    align-self: center;
    padding: 0 16px;
    border-radius: 999px;
    background: #232323;
    color: #fff;
    white-space: nowrap;
  }

  .vit-desktop-index nav {
    order: 1;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .vit-desktop-index nav::-webkit-scrollbar {
    display: none;
  }

  .vit-desktop-index nav button {
    width: auto;
    min-width: max-content;
    height: 42px;
    min-height: 42px;
    flex: 0 0 auto;
    gap: 9px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f1eeeb;
    color: #4f4843;
    font-size: 12.5px;
    font-weight: 700;
    scroll-snap-align: start;
  }

  .vit-desktop-index nav button:hover {
    background: #e8e1db;
    color: var(--ink);
  }

  .vit-desktop-index nav button.is-active {
    background: #8d4613;
    color: #fff;
  }

  .vit-desktop-index nav small {
    min-width: 22px;
    padding: 2px 5px;
    border-radius: 999px;
  }

  /* A toolbar já ocupa uma dobra própria abaixo da navegação. Reduzimos o
     respiro duplicado antes do título da loja. */
  .vit-desktop-main {
    min-width: 0;
    padding: clamp(20px, 2.2vw, 32px) 0 96px;
  }

  .vit-desktop-main .vit-app-intro {
    max-width: 1180px;
    margin-inline: auto;
    margin-bottom: 46px;
  }

  .vit-app-heading {
    align-items: end;
    gap: 24px;
  }

  .vit-app-heading h2 {
    max-width: 13ch;
    font-size: clamp(46px, 4.7vw, 68px);
    line-height: 0.98;
  }

  .vit-app-search {
    width: min(760px, 100%);
    min-height: 58px;
    margin-top: 24px;
  }

  .vit-app-categories {
    margin-top: 34px;
  }

  .vit-app-category-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(92px, 1fr));
    gap: clamp(12px, 1.5vw, 22px);
    overflow: visible;
    padding: 2px 0 8px;
  }

  .vit-app-category {
    min-width: 0;
    width: 100%;
    flex: none;
  }

  .vit-app-category img,
  .vit-app-category-media {
    transition: transform var(--duration-normal) var(--ease-emphasized);
  }

  /* O hover anterior somava transformações no círculo e na imagem. Em desktop
     o feedback agora é quase imperceptível, sem sensação de zoom agressivo. */
  .vit-app-category:hover img {
    transform: none;
  }

  .vit-app-category:hover .vit-app-category-media {
    transform: translateY(-1px) scale(1.01);
  }

  .vit-desktop-main .catalog-band,
  .vit-desktop-main .calculator-band {
    margin-inline: 0;
    padding-inline: 0;
  }

  .vit-desktop-main .catalog-band > *,
  .vit-desktop-main .calculator-band > * {
    max-width: 1180px;
    margin-inline: auto;
  }

  /* Cards de produto continuam visuais: não densificamos o catálogo em
     quatro/cinco colunas só porque há espaço disponível. */
  .rail-track {
    gap: 18px;
  }

  .rail-card {
    flex-basis: clamp(260px, 27vw, 360px);
  }

  .rail-card-open:hover .rail-card-photo,
  .serv-catalog-card:hover .serv-catalog-photo {
    transform: scale(1.012);
  }

  /* ==========================================================
     BUSCA — preserva a linguagem escura já acertada
     ========================================================== */
  .search-overlay-head,
  .search-overlay-body {
    width: min(1280px, calc(100vw - 64px));
    margin-inline: auto;
  }

  .search-overlay-head {
    padding-top: 22px;
  }

  .search-discovery-section,
  .search-shortcuts {
    border-radius: 22px;
  }

  .search-discovery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .search-discovery-card > img {
    aspect-ratio: 16 / 8.5;
  }

  .search-discovery-card-copy {
    padding: 13px 15px 15px;
  }

  /* ==========================================================
     FICHA — mesma ficha do mobile, aproveitando largura sem bifurcar UX
     ========================================================== */
  .product-detail-panel {
    width: min(1320px, calc(100vw - 72px));
    max-width: 1320px;
    max-height: calc(100dvh - 48px);
    border-radius: 28px;
    overflow: hidden;
  }

  .product-detail-media {
    min-width: 0;
  }

  .product-detail-info {
    min-width: 0;
    padding: clamp(28px, 3vw, 44px);
  }

  /* ==========================================================
     SERVIÇOS — desmonta o grid lateral antigo no owner correto
     ========================================================== */
  .site-view--services {
    min-height: calc(100vh - var(--desktop-header-height));
    background: #141414;
  }

  .site-view--services #servicos {
    scroll-margin-top: calc(var(--desktop-header-height) + 16px);
  }

  .site-view--services .servicos {
    display: block;
    min-height: calc(100vh - var(--desktop-header-height));
  }

  /* styles.css cria o master/detail em .servicos > .container, não no section.
     Este é o owner real que precisa deixar de ser grid no desktop novo. */
  .site-view--services .servicos > .container {
    display: block !important;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .site-view--services .servicos .serv-head {
    display: grid;
    grid-column: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.75fr);
    gap: 36px 72px;
    align-items: end;
    width: min(1180px, calc(100% - 2 * var(--desktop-gutter)));
    margin: 0 auto;
    padding: clamp(42px, 5vw, 68px) 0 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  }

  .site-view--services .servicos .serv-head .section-kicker {
    grid-column: 1 / -1;
    margin-bottom: -12px;
  }

  .site-view--services .servicos .serv-head .section-title {
    max-width: 11ch;
    font-size: clamp(48px, 4.4vw, 66px);
    line-height: 0.94;
  }

  .site-view--services .servicos .serv-head > p {
    max-width: 46ch;
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 1.55;
  }

  .site-view--services .servicos .serv-tabs {
    position: static;
    grid-column: auto;
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 auto;
    padding: 22px max(var(--desktop-gutter), calc((100% - 1180px) / 2)) 10px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
  }

  .site-view--services .servicos .serv-tab {
    width: auto;
    min-width: 0;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0 16px;
    border-radius: 999px;
    text-align: center;
  }

  .site-view--services .servicos .serv-content {
    grid-column: auto;
    width: min(1040px, calc(100% - 2 * var(--desktop-gutter)));
    margin-inline: auto;
    padding: 16px 0 72px;
  }

  .site-view--services .servicos .serv-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
  }

  .site-view--services .servicos .serv-row td {
    padding-block: 16px;
  }

  .site-view--services .servicos .serv-table .price {
    width: 120px;
  }

  /* O link de privacidade vive fora do #root. Quando Serviços está ativo ele
     precisa continuar no mesmo papel escuro, sem criar uma faixa branca. */
  body:has(.site-view--services:not([hidden])) {
    background: #141414;
  }

  body:has(.site-view--services:not([hidden])) .privacy-footer-link {
    padding: 14px 16px 34px;
    background: #141414;
    color: rgba(255, 255, 255, 0.68);
  }

  /* ==========================================================
     CABELO HUMANO — informação comercial sem aparência de KPI
     ========================================================== */
  .human-page {
    min-height: calc(100vh - var(--desktop-header-height));
  }

  .human-page-inner {
    max-width: 1320px;
    padding-top: clamp(46px, 5vw, 70px);
    padding-bottom: 70px;
  }

  .human-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 42px 70px;
    align-items: end;
    margin-bottom: 34px;
  }

  .human-page-copy h2 {
    max-width: 13ch;
    font-size: clamp(54px, 5vw, 76px);
    line-height: 0.96;
  }

  .human-page-copy p {
    max-width: 58ch;
  }

  .human-page-facts {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding-bottom: 4px;
    background: transparent;
  }

  .human-page-facts > span {
    min-width: 124px;
    padding: 4px 22px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .human-page-facts > span:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .human-page-facts strong {
    font-size: 14px;
  }

  .human-page-facts small {
    margin-top: 2px;
  }

  .human-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.55fr);
    gap: 24px;
    align-items: start;
  }

  .human-sell-card {
    position: sticky;
    top: calc(var(--desktop-header-height) + 24px);
  }

  /* ==========================================================
     CONTATO — conteúdo entra na primeira dobra; sem mapa artificial
     ========================================================== */
  .site-view--home .contato {
    min-height: calc(100vh - var(--desktop-header-height));
    padding: clamp(50px, 6vw, 82px) 0 64px;
  }

  .site-view--home .contato > .container {
    max-width: 1260px;
  }

  .site-view--home .contato .section-kicker {
    margin-bottom: 14px;
  }

  .site-view--home .contato .section-title {
    font-size: clamp(48px, 4.6vw, 66px);
  }

  .site-view--home .cont-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: clamp(38px, 5vw, 76px);
    align-items: start;
    margin-top: 34px;
  }

  .site-view--home .cont-info-card {
    padding: 30px 36px;
    border-radius: 22px;
  }

  .site-view--home .cont-row {
    padding-block: 18px;
  }

  .site-view--home .cont-social {
    display: grid;
    gap: 12px;
    padding-top: 0;
  }

  .site-view--home .social-card {
    min-height: 78px;
  }

  /* ==========================================================
     CARRINHO — continua reconhecível como o mesmo FAB do mobile
     ========================================================== */
  .pm-cart-button {
    right: max(28px, calc((100vw - var(--desktop-content-max)) / 2 + 28px));
    bottom: 24px;
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    box-shadow: none;
  }

  .pm-cart-button svg {
    width: 28px;
    height: 28px;
  }

  /* Interação desktop discreta e consistente. */
  .vit-app-category,
  .rail-card-open,
  .serv-tab,
  .serv-row,
  .social-card {
    transition:
      transform var(--duration-fast) var(--ease-emphasized),
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .rail-card-open:hover,
  .social-card:hover {
    transform: translateY(-2px);
  }
}

@media (min-width: 1380px) {
  /* Em telas largas a busca mostra mais descoberta na primeira dobra, sem
     alterar a densidade dos cards comuns de produto. */
  .search-discovery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  .nav-links a,
  .nav-search-btn,
  .vit-app-category img,
  .vit-app-category-media,
  .rail-card-open,
  .serv-tab,
  .serv-row,
  .social-card {
    transition: none;
  }

  .vit-app-category:hover img,
  .vit-app-category:hover .vit-app-category-media,
  .rail-card-open:hover,
  .social-card:hover {
    transform: none;
  }
}