/**
 * Componente: Single Product — Página de detalhe de produto
 * Usado em: /produto/{slug}
 *
 * Agência Upgrade — https://agenciaupgrade.com.br
 * Token-first · @layer · BEM · Logical properties · container queries
 *
 * Estrutura de blocos (todos irmãos diretos, sem wrapper):
 *   <article.cnp-single-product.cnp-container>  — artigo do produto
 *   <section.cnp-whatsapp-cta>                  — faixa WhatsApp full-width
 *   <section.cnp-related-products>              — grid de relacionados full-width
 *
 * Sem padding-block no <main> nem margin entre irmãos — cada section
 * define seu próprio padding-block para evitar gaps brancos.
 */

@layer components {

  /* ── Artigo principal ──
     article.cnp-single-product é também .cnp-container, portanto herda
     max-width + gutters. O padding-block define o espaço interno da página.
     Sem margin-block para não criar gap entre o article e as sections abaixo. ── */

  .cnp-single-product {
    padding-block-start: var(--cnp-space-l);
    padding-block-end: var(--cnp-space-2xl);
  }

  /* ── Breadcrumb ──────────────────────────────────────────────────────── */

  .cnp-breadcrumb {
    margin-block-end: var(--cnp-space-l);
  }

  .cnp-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cnp-space-2xs);
    list-style: none;
  }

  .cnp-breadcrumb__item {
    display: flex;
    align-items: center;
  }

  .cnp-breadcrumb__link {
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text-muted);
    transition: color var(--cnp-transition-fast);
  }

  .cnp-breadcrumb__link:hover {
    color: var(--cnp-color-primary);
  }

  .cnp-breadcrumb__sep {
    color: var(--cnp-color-text-muted);
    opacity: 0.5;
    flex-shrink: 0;
  }

  .cnp-breadcrumb__current {
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text);
    font-weight: var(--cnp-font-weight-medium);
  }

  /* ── Layout: [galeria | info] ────────────────────────────────────────────
     Mobile-first: coluna única.
     A partir de 56rem do container (container-type: inline-size herdado
     do .cnp-container): galeria 48% + info 52%.
     align-items: start impede a galeria de se esticar até a altura do texto. ── */

  .cnp-single-product__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cnp-space-xl);
    align-items: start;
  }

  @container (min-width: 56rem) {
    .cnp-single-product__layout {
      grid-template-columns: 48% 1fr;
    }
  }

  /* ── Galeria ─────────────────────────────────────────────────────────── */

  .cnp-product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--cnp-space-m);
  }

  /* Imagem principal: aspect-ratio 1/1 para uniformidade entre produtos */
  .cnp-product-gallery__main {
    background-color: var(--cnp-color-background-alt);
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-m);
    overflow: hidden;
    aspect-ratio: 1 / 1;
  }

  .cnp-product-gallery__main-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: var(--cnp-space-m);
    transition: opacity var(--cnp-transition-base);
  }

  /* Thumbs */
  .cnp-product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cnp-space-xs);
  }

  .cnp-product-gallery__thumb {
    inline-size: 7.2rem;
    block-size: 7.2rem;
    padding: var(--cnp-space-2xs);
    background-color: var(--cnp-color-background-alt);
    border: 2px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-s);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color var(--cnp-transition-fast);
  }

  .cnp-product-gallery__thumb:hover {
    border-color: var(--cnp-color-primary);
  }

  .cnp-product-gallery__thumb.is-active {
    border-color: var(--cnp-color-primary);
  }

  .cnp-product-gallery__thumb:focus-visible {
    outline: 2px solid var(--cnp-color-primary);
    outline-offset: 2px;
  }

  .cnp-product-gallery__thumb-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* ── Info do produto ─────────────────────────────────────────────────── */

  .cnp-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--cnp-space-m);
  }

  /* Título: hierarquia clara, peso forte — o produto é o herói (UX princípio #3) */
  .cnp-product-info__title {
    font-size: var(--cnp-font-size-2xl);
    font-weight: var(--cnp-font-weight-bold);
    line-height: 1.2;
    color: var(--cnp-color-text);
  }

  /* "Código do produto" — UX-DESIGN: sem jargão "SKU" na interface */
  .cnp-product-info__sku {
    display: flex;
    align-items: center;
    gap: var(--cnp-space-xs);
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text-muted);
    margin-block-end: 0;
  }

  .cnp-product-info__sku-label {
    font-weight: var(--cnp-font-weight-medium);
  }

  .cnp-product-info__sku-value {
    font-variant-numeric: tabular-nums;
  }

  /* Short description */
  .cnp-product-info__short-desc {
    font-size: var(--cnp-font-size-base);
    color: var(--cnp-color-text);
    line-height: 1.6;
  }

  :where(.cnp-product-info__short-desc) :where(p) { margin-block-end: var(--cnp-space-s); }
  :where(.cnp-product-info__short-desc) :where(p:last-child) { margin-block-end: 0; }

  /* Bloco de preço ─ UX princípio #3: preço é o herói, visível sem scroll.
     Separadores via border-block: start e end com padding simétrico —
     mesmo espaço acima e abaixo da borda, sem ilusão de desalinhamento. ── */
  .cnp-product-info__price-wrap {
    display: flex;
    align-items: center;
    min-block-size: 7.2rem;
    padding-block: var(--cnp-space-m);
    border-block-start: 1px solid var(--cnp-color-border);
    border-block-end: 1px solid var(--cnp-color-border);
  }

  /* Preço simples — clamp: nunca menor que 3.2rem, cresce até 4.8rem */
  .cnp-product-info__price {
    font-size: clamp(3.2rem, 2.4rem + 2vi, 4.8rem);
    font-weight: var(--cnp-font-weight-bold);
    color: var(--cnp-color-primary);
    line-height: 1;
    margin-block-end: 0;
  }

  /* Preço com desconto */
  .cnp-product-info__price--sale {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cnp-space-s);
  }

  .cnp-product-info__price-from {
    font-size: var(--cnp-font-size-lg);
    font-weight: var(--cnp-font-weight-regular);
    color: var(--cnp-color-text-muted);
    text-decoration: line-through;
  }

  .cnp-product-info__price-now {
    font-size: clamp(3.2rem, 2.4rem + 2vi, 4.8rem);
    font-weight: var(--cnp-font-weight-bold);
    color: var(--cnp-color-primary);
    line-height: 1;
  }

  /* Gate de login */
  .cnp-product-info__gate {
    display: flex;
    align-items: center;
    gap: var(--cnp-space-s);
    padding-block: var(--cnp-space-m);
    padding-inline: var(--cnp-space-m);
    background-color: var(--cnp-color-background-alt);
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-m);
    color: var(--cnp-color-text-muted);
  }

  .cnp-product-info__gate svg {
    flex-shrink: 0;
  }

  .cnp-product-info__gate-msg {
    font-size: var(--cnp-font-size-sm);
    margin-block-end: 0;
  }

  .cnp-product-info__gate-link {
    color: var(--cnp-color-primary);
    font-weight: var(--cnp-font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--cnp-transition-fast);
  }

  .cnp-product-info__gate-link:hover {
    opacity: 0.75;
  }

  /* ── Adicionar ao carrinho / cotação ──────────────────────────────────── */

  .cnp-product-info__add-to-cart {
    padding-block-start: var(--cnp-space-s);
  }

  /* Form: qty + botão lado a lado, botão cresce */
  .cnp-atc-form {
    display: flex;
    align-items: stretch;
    gap: var(--cnp-space-s);
    flex-wrap: wrap;
  }

  /* Grupo de quantidade: [−] [input] [+] */
  .cnp-atc-form__qty {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-s);
    overflow: hidden;
    flex-shrink: 0;
  }

  .cnp-atc-form__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.8rem;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--cnp-color-text);
    background-color: var(--cnp-color-background-alt);
    border: none;
    cursor: pointer;
    transition: background-color var(--cnp-transition-fast), color var(--cnp-transition-fast);
    -webkit-user-select: none;
    user-select: none;
  }

  .cnp-atc-form__qty-btn:hover {
    background-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
  }

  .cnp-atc-form__qty-btn:focus-visible {
    outline: 2px solid var(--cnp-color-primary);
    outline-offset: -2px;
  }

  .cnp-atc-form__qty-input {
    inline-size: 5rem;
    text-align: center;
    border: none;
    border-inline: 1px solid var(--cnp-color-border);
    font-size: var(--cnp-font-size-base);
    font-family: inherit;
    color: var(--cnp-color-text);
    font-variant-numeric: tabular-nums;
    /* Remove setas nativas do input[type=number] */
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .cnp-atc-form__qty-input::-webkit-inner-spin-button,
  .cnp-atc-form__qty-input::-webkit-outer-spin-button {
    appearance: none;
  }

  .cnp-atc-form__qty-input:focus-visible {
    outline: 2px solid var(--cnp-color-primary);
    outline-offset: -2px;
  }

  /* Botão submit: cresce para preencher, min-height touch-target WCAG */
  .cnp-atc-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cnp-space-xs);
    flex: 1 1 auto;
    min-block-size: 4.8rem;
    padding-block: var(--cnp-space-m);
    padding-inline: var(--cnp-space-l);
    background-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
    border-radius: var(--cnp-radius-s);
    font-size: var(--cnp-font-size-base);
    font-weight: var(--cnp-font-weight-bold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--cnp-transition-fast);
  }

  .cnp-atc-form__submit:hover {
    background-color: var(--cnp-color-primary-dark);
  }

  .cnp-atc-form__submit:focus-visible {
    outline: 2px solid var(--cnp-color-primary);
    outline-offset: 3px;
  }

  /* Mobile: forma full-width quando container estreito */
  @container (max-width: 39.999rem) {
    .cnp-atc-form {
      flex-direction: column;
    }

    .cnp-atc-form__qty {
      inline-size: max-content;
    }

    .cnp-atc-form__submit {
      inline-size: 100%;
    }
  }

  /* Fora de estoque */
  .cnp-product-info__out-of-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--cnp-space-xs);
    padding-block: var(--cnp-space-s);
    padding-inline: var(--cnp-space-m);
    background-color: var(--cnp-color-background-alt);
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-s);
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text-muted);
    margin-block-end: 0;
  }

  /* Descrição completa */
  .cnp-product-info__desc {
    font-size: var(--cnp-font-size-base);
    color: var(--cnp-color-text);
    line-height: 1.7;
    padding-block-start: var(--cnp-space-xs);
  }

  /* Prose: resets inline para conteúdo do editor WordPress (:where = zero specificity) */
  :where(.cnp-prose p)         { margin-block-end: var(--cnp-space-s); }
  :where(.cnp-prose p:last-child) { margin-block-end: 0; }
  :where(.cnp-prose ul, .cnp-prose ol) { padding-inline-start: var(--cnp-space-l); margin-block-end: var(--cnp-space-s); }
  :where(.cnp-prose li)        { margin-block-end: var(--cnp-space-2xs); }
  :where(.cnp-prose h2, .cnp-prose h3, .cnp-prose h4) { margin-block: var(--cnp-space-m) var(--cnp-space-s); font-weight: var(--cnp-font-weight-bold); }
  :where(.cnp-prose strong)    { font-weight: var(--cnp-font-weight-bold); }
  :where(.cnp-prose a)         { color: var(--cnp-color-primary); text-decoration: underline; text-underline-offset: 2px; }

  /* ── CTA WhatsApp ────────────────────────────────────────────────────────
     Faixa full-width. Irmã direta do article — sem margin entre eles.
     .cnp-container interno alinha o conteúdo com o restante da página.
     Layout: texto à esquerda + botão à direita.
     Mobile (< 40rem no container): empilha em coluna, botão full-width. ── */

  .cnp-whatsapp-cta {
    background-color: #25d366;
    padding-block: var(--cnp-space-l);
    container-type: inline-size;
  }

  .cnp-whatsapp-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cnp-space-m);
  }

  /* Mobile: coluna única, botão full-width */
  @container (max-width: 39.999rem) {
    .cnp-whatsapp-cta__inner {
      flex-direction: column;
      align-items: flex-start;
    }

    .cnp-whatsapp-cta__btn {
      inline-size: 100%;
      justify-content: center;
    }
  }

  .cnp-whatsapp-cta__text {
    display: flex;
    flex-direction: column;
    gap: var(--cnp-space-2xs);
  }

  .cnp-whatsapp-cta__headline {
    font-size: var(--cnp-font-size-lg);
    font-weight: var(--cnp-font-weight-bold);
    color: #ffffff;
    margin-block-end: 0;
  }

  .cnp-whatsapp-cta__sub {
    font-size: var(--cnp-font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    margin-block-end: 0;
  }

  .cnp-whatsapp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cnp-space-xs);
    padding-block: var(--cnp-space-m);
    padding-inline: var(--cnp-space-l);
    min-block-size: 4.8rem; /* touch target WCAG */
    background-color: #ffffff;
    color: #128c7e;
    border-radius: var(--cnp-radius-m);
    font-size: var(--cnp-font-size-base);
    font-weight: var(--cnp-font-weight-bold);
    white-space: nowrap;
    flex-shrink: 0;
    transition:
      background-color var(--cnp-transition-fast),
      color var(--cnp-transition-fast);
  }

  .cnp-whatsapp-cta__btn:hover {
    background-color: #128c7e;
    color: #ffffff;
  }

  .cnp-whatsapp-cta__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
  }

  .cnp-whatsapp-cta__icon {
    flex-shrink: 0;
  }

  /* ── Relacionados ────────────────────────────────────────────────────────
     Faixa full-width com fundo cinza.
     Sem margin-block-start: a section encoста direto no CTA (ou no article
     se não houver produtos relacionados) — zero gap branco. ── */

  .cnp-related-products {
    background-color: var(--cnp-color-background-alt);
    padding-block: var(--cnp-space-2xl);
    border-block-start: 1px solid var(--cnp-color-border);
  }

  .cnp-related-products__heading {
    font-size: var(--cnp-font-size-xl);
    font-weight: var(--cnp-font-weight-bold);
    margin-block-end: var(--cnp-space-l);
    color: var(--cnp-color-text);
  }

  /* Grid de relacionados: 2 → 5 colunas (mesmo breakpoint do --5 da home).
     Com 10 itens e 5 colunas: sempre 2 linhas completas, sem orphans. */
  .cnp-related-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @container (min-width: 60rem) {
    .cnp-related-products__grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

}

@layer utilities {

  @media (prefers-reduced-motion: reduce) {
    .cnp-product-gallery__main-img,
    .cnp-product-gallery__thumb,
    .cnp-whatsapp-cta__btn {
      transition: none;
    }
  }

}