/**
 * Componente: Shop — Layout de loja com sidebar de filtros
 * Usado em: /shop, /product-category/*
 *
 * Agência Upgrade — https://agenciaupgrade.com.br
 * Token-first · @layer · BEM · Logical properties · container queries
 */

@layer components {

  /* ── Wrapper ── */

  .cnp-shop {
    padding-block: var(--cnp-space-2xl);
  }

  /* ── Layout: [sidebar | main]
     Mobile-first: coluna única (sidebar em cima).
     A partir de 62rem do .cnp-container (container-type: inline-size):
     sidebar fixa à esquerda + main fluido à direita.
     align-items: start evita que o sidebar se estique até a altura do grid. ── */

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

  @container (min-width: 62rem) {
    .cnp-shop__layout {
      grid-template-columns: 22rem 1fr;
    }
  }

  /* ── Sidebar ── */

  @container (min-width: 62rem) {
    .cnp-shop__sidebar {
      position: sticky;
      inset-block-start: var(--cnp-space-l);
    }
  }

  /* ── Filter Panel (<details>) ── */

  .cnp-shop-filter {
    background-color: var(--cnp-color-background-alt);
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-m);
    overflow: hidden;
  }

  /* Summary — age como toggle accordion no mobile.
     No desktop é ocultado e o conteúdo fica sempre visível
     graças ao atributo [open] no HTML. */
  .cnp-shop-filter__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cnp-space-xs);
    padding-block: var(--cnp-space-m);
    padding-inline: var(--cnp-space-m);
    font-size: var(--cnp-font-size-base);
    font-weight: var(--cnp-font-weight-bold);
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Remove marcador padrão do <summary> no Safari/Chrome */
  .cnp-shop-filter__summary::-webkit-details-marker {
    display: none;
  }

  .cnp-shop-filter__chevron {
    flex-shrink: 0;
    transition: transform var(--cnp-transition-fast);
  }

  .cnp-shop-filter[open] .cnp-shop-filter__chevron {
    transform: rotate(180deg);
  }

  /* Desktop: summary invisível, painel sempre aberto via [open] */
  @container (min-width: 62rem) {
    .cnp-shop-filter__summary {
      display: none;
    }
  }

  /* ── Nav dentro do details ── */

  .cnp-shop-filter__nav {
    padding-block: var(--cnp-space-s) var(--cnp-space-m);
    padding-inline: var(--cnp-space-s);
  }

  @container (min-width: 62rem) {
    .cnp-shop-filter__nav {
      padding-block-start: var(--cnp-space-m);
    }
  }

  /* Heading "Categorias" — visível apenas no desktop (mobile usa o summary) */
  .cnp-shop-filter__heading {
    display: none;
    font-size: var(--cnp-font-size-xs);
    font-weight: var(--cnp-font-weight-bold);
    color: var(--cnp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-inline: var(--cnp-space-s);
    margin-block-end: var(--cnp-space-s);
  }

  @container (min-width: 62rem) {
    .cnp-shop-filter__heading {
      display: block;
    }
  }

  .cnp-shop-filter__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--cnp-space-3xs);
  }

  .cnp-shop-filter__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cnp-space-xs);
    padding-block: var(--cnp-space-xs);
    padding-inline: var(--cnp-space-s);
    border-radius: var(--cnp-radius-s);
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text);
    transition:
      background-color var(--cnp-transition-fast),
      color var(--cnp-transition-fast);
  }

  .cnp-shop-filter__link:hover {
    background-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
  }

  .cnp-shop-filter__link.is-active {
    background-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
    font-weight: var(--cnp-font-weight-medium);
  }

  .cnp-shop-filter__count {
    font-size: var(--cnp-font-size-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
    flex-shrink: 0;
  }

  .cnp-shop-filter__link.is-active .cnp-shop-filter__count {
    opacity: 0.8;
  }

  /* ── Main Content ──
     container-type: inline-size cria um novo contexto para o .cnp-product-grid
     filho — as @container queries do grid respondem à largura do main (sem sidebar),
     não à largura total do .cnp-container. min-inline-size: 0 evita overflow. ── */

  .cnp-shop__main {
    container-type: inline-size;
    min-inline-size: 0;
  }

  /* ── Header da Shop ── */

  .cnp-shop__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cnp-space-m);
    padding-block-end: var(--cnp-space-m);
    margin-block-end: var(--cnp-space-l);
    border-block-end: 1px solid var(--cnp-color-border);
  }

  .cnp-shop__title {
    font-size: var(--cnp-font-size-xl);
    margin-block-end: 0;
  }

  /* ── Toolbar (contagem + sort) ── */

  .cnp-shop__toolbar {
    display: flex;
    align-items: center;
    gap: var(--cnp-space-m);
    flex-wrap: wrap;
  }

  .cnp-shop__count {
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text-muted);
    margin-block-end: 0;
    white-space: nowrap;
  }

  .cnp-shop__sort-form {
    display: flex;
    align-items: center;
    gap: var(--cnp-space-xs);
  }

  .cnp-shop__sort-label {
    font-size: var(--cnp-font-size-sm);
    color: var(--cnp-color-text-muted);
    white-space: nowrap;
  }

  .cnp-shop__select {
    padding-block: var(--cnp-space-xs);
    padding-inline: var(--cnp-space-s);
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-s);
    background-color: var(--cnp-color-background);
    color: var(--cnp-color-text);
    font-size: var(--cnp-font-size-sm);
    cursor: pointer;
    transition: border-color var(--cnp-transition-fast);
    appearance: auto;
  }

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

  /* ── Empty State ── */

  .cnp-shop__empty {
    text-align: center;
    padding-block: var(--cnp-space-2xl);
    color: var(--cnp-color-text-muted);
    font-size: var(--cnp-font-size-base);
    margin-block-end: 0;
  }

  /* ── Paginação ──────────────────────────────────────────────────────────────
     Layout via flexbox com dois modos controlados por @container no .cnp-shop__main:

     Modo compacto (main < 50rem — mobile e desktop inicial com sidebar):
       [← Anterior]   Pág. X / Y   [Próxima →]
       · Botões nas extremidades (flex-shrink: 0)
       · Indicador centralizado (flex: 1)
       · Lista de números: display none

     Modo expandido (main ≥ 50rem — desktop largo):
       [← Anterior]   1  2  ···  8   [Próxima →]
       · Botões nas extremidades (flex-shrink: 0)
       · Lista de números centralizada (flex: 1) com overflow-x: auto
         como rede de segurança contra muitos itens
       · Indicador: display none

     Por que 50rem?
       · Mobile sem sidebar: main ≈ viewport − gutters. Em 430px ≈ 39rem < 50 → compacto.
       · Desktop com sidebar (22rem + gap 2.4rem): main = container − 24.4rem.
         Em 900px viewport: container ≈ 83rem → main ≈ 58rem > 50 → expandido.
     ── */

  .cnp-shop__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cnp-space-s);
    margin-block-start: var(--cnp-space-xl);
    padding-block-start: var(--cnp-space-l);
    border-block-start: 1px solid var(--cnp-color-border);
  }

  /* ── Botões Anterior / Próxima ── */

  .cnp-shop__page-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--cnp-space-xs);
    padding-block: var(--cnp-space-s);
    padding-inline: var(--cnp-space-m);
    min-block-size: 4.4rem; /* touch target mínimo WCAG */
    border: 1px solid var(--cnp-color-border);
    border-radius: var(--cnp-radius-s);
    font-size: var(--cnp-font-size-sm);
    font-weight: var(--cnp-font-weight-medium);
    color: var(--cnp-color-text);
    background-color: var(--cnp-color-background);
    white-space: nowrap;
    flex-shrink: 0; /* nunca encolhe — empurra o meio */
    transition:
      background-color var(--cnp-transition-fast),
      border-color var(--cnp-transition-fast),
      color var(--cnp-transition-fast);
  }

  a.cnp-shop__page-nav:hover {
    background-color: var(--cnp-color-primary);
    border-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
  }

  .cnp-shop__page-nav.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ── Indicador compacto "Pág. X / Y" (visível no modo compacto) ── */

  .cnp-shop__page-counter {
    flex: 1;
    min-inline-size: 0; /* permite encolher sem estourar */
    text-align: center;
    font-size: var(--cnp-font-size-sm);
    font-weight: var(--cnp-font-weight-medium);
    color: var(--cnp-color-text-muted);
    white-space: nowrap;
  }

  /* ── Lista de números (oculta no modo compacto) ── */

  .cnp-shop__page-list {
    display: none;
    list-style: none;
    align-items: center;
    gap: var(--cnp-space-2xs);
    /* Scrollbar invisível — rede de segurança para N pages muito grande */
    scrollbar-width: none; /* Firefox */
  }

  .cnp-shop__page-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  /* Modo expandido: main ≥ 50rem */
  @container (min-width: 50rem) {
    .cnp-shop__page-counter {
      display: none;
    }

    .cnp-shop__page-list {
      display: flex;
      flex: 1;
      min-inline-size: 0;     /* contido no flex pai, sem estourar */
      justify-content: center;
      overflow-x: auto;       /* scroll suave se muitos números */
    }
  }

  /* ── Números de página ── */

  .cnp-shop__page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 4rem;
    block-size: 4rem;
    padding-inline: var(--cnp-space-xs);
    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);
    background-color: var(--cnp-color-background);
    flex-shrink: 0; /* cada número mantém tamanho fixo dentro do scroll */
    transition:
      background-color var(--cnp-transition-fast),
      border-color var(--cnp-transition-fast),
      color var(--cnp-transition-fast);
  }

  a.cnp-shop__page-num:hover {
    background-color: var(--cnp-color-primary);
    border-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
  }

  .cnp-shop__page-num.is-active {
    background-color: var(--cnp-color-primary);
    border-color: var(--cnp-color-primary);
    color: var(--cnp-color-background);
    font-weight: var(--cnp-font-weight-medium);
    pointer-events: none;
  }

  /* Reticências (...) — não clicável */
  .cnp-shop__page-num--ellipsis {
    border-color: transparent;
    background-color: transparent;
    pointer-events: none;
    color: var(--cnp-color-text-muted);
    min-inline-size: 2.4rem;
  }

}

@layer utilities {

  @media (prefers-reduced-motion: reduce) {
    .cnp-shop-filter__chevron {
      transition: none;
    }
  }

}