/* ==========================================================
   Arquivo: loja.css
   Página : Loja Completa (loja.html)
   Objetivo:
     - Complementar o style.css (global)
     - Itens específicos da Loja: barra de filtros/tags, adminBar, load-more
     - FIX PREMIUM: limitar altura do "Produto do Dia" (sem crop) + badge ⭐ do dia no grid
     - PATCH PREMIUM/MOBILE (2026-03-02):
         * Ferramentas (listas/export) via <details> (compacto no mobile)
         * Modal de categorias (fallback CSS)
         * Anti-clique-acidental do fundo (.bg)
   ========================================================== */

:root{
  /* mantém compatível com seu tema imperial */
  --loja-chip-bg: rgba(0,0,0,.28);
  --loja-chip-bd: rgba(255,255,255,.12);
  --loja-chip-bd-active: rgba(224,195,107,.36);
  --loja-chip-tx: rgba(255,255,255,.86);
  --loja-chip-tx-active: rgba(255,236,180,.95);

  /* featured sizing (profissional) */
  --cn-featured-h: 420px;
  --cn-featured-h-md: 360px;
  --cn-featured-h-sm: 300px;

  /* tools sizing (premium) */
  --cn-tools-btn-pad: 10px 12px;
  --cn-tools-btn-radius: 14px;
  --cn-tools-btn-font: 12px;
}

/* =========================================
   Backup: fundo nunca deve capturar toque
   (JS já faz, mas CSS garante também)
   ========================================= */
.bg, .bg *{
  pointer-events:none !important;
}

/* ======= Loja: barra de filtros ======= */
.lojaTools{
  padding: 14px 16px 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.lojaTools .toolRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  align-items:center;
  justify-content:space-between;
}

/* ======= Categorias (chips) ======= */
.tagChips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.tagChip{
  border:1px solid var(--loja-chip-bd);
  background: var(--loja-chip-bg);
  color: var(--loja-chip-tx);
  padding:7px 9px;
  border-radius:999px;
  font-weight:900;
  font-size:11px;
  letter-spacing:.01em;
  cursor:pointer;
  user-select:none;
  backdrop-filter: blur(10px);
  transition: transform .10s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
.tagChip:hover{ filter:brightness(1.06); }
.tagChip:active{ transform: translateY(1px); }

.tagChip--active{
  border-color: var(--loja-chip-bd-active);
  color: var(--loja-chip-tx-active);
  background: rgba(199,162,75,.12);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* compacta chips no mobile */
@media (max-width: 520px){
  .tagChip{
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ======= Ordenação ======= */
.sortRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.select{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  font-size:12px;
  outline:none;
  backdrop-filter: blur(10px);
}

/* ======= adminBar (somente admin=1) ======= */
.adminBar{
  margin-top:12px;
  border:1px dashed rgba(224,195,107,.45);
  background: rgba(224,195,107,.06);
  border-radius: 16px;
  padding:12px 12px;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.adminBar b{ color:rgba(224,195,107,.95); }
.adminBar .mini{
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.35;
}

/* ======= Load more ======= */
.loadMoreWrap{
  padding: 0 16px 16px;
  display:flex;
  justify-content:center;
}
.loadMoreWrap.hidden{ display:none; }

/* ==========================================================
   ✅ PREMIUM/MOBILE — Ferramentas (listas/export)
   (loja.js injeta o bloco <details class="cnTools">)
   Aqui é o “fallback premium” que evita botão gigante.
   ========================================================== */
.cnToolsRow{ width:100%; }

.cnTools{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(224,195,107,.16);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
}

.cnTools > summary{
  list-style:none;
  user-select:none;
}
.cnTools > summary::-webkit-details-marker{ display:none; }

/* summary fica com cara de botão premium */
.cnTools summary.btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 0;
  border: 0;
  background: transparent;
}

/* grid de botões compactos */
.cnToolsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  padding: 12px 12px 12px;
  border-top: 1px solid rgba(224,195,107,.10);
}

.cnToolsGrid .btn{
  width:100%;
  justify-content:center;
  padding: var(--cn-tools-btn-pad);
  border-radius: var(--cn-tools-btn-radius);
  font-size: var(--cn-tools-btn-font);
  font-weight: 900;
  line-height: 1.1;
}

/* responsivo: nunca vira “pílula gigante” no mobile */
@media (max-width: 980px){
  .cnToolsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .cnToolsGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .cnToolsGrid .btn{
    padding: 10px 10px;
    font-size: 12px;
    border-radius: 14px;
  }
}

/* ==========================================================
   ✅ PREMIUM — Modal de Categorias (fallback CSS)
   (loja.js injeta #cnTagModal)
   ========================================================== */
.cnModal{
  position: fixed;
  inset: 0;
  display:none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 999999;
  backdrop-filter: blur(10px);
}
.cnModal.show{ display:flex; }

.cnModal__panel{
  width: min(760px, 96vw);
  max-height: 82vh;
  margin: 0 0 14px 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(215,176,88,.22);
  background: rgba(8,8,10,.92);
  box-shadow: 0 20px 80px rgba(0,0,0,.65);
}

.cnModal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(215,176,88,.18);
}

.cnModal__title{
  font-family: Cinzel, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(224,195,107,.95);
  font-size: 12px;
}

.cnModal__close{
  border: 1px solid rgba(215,176,88,.22);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
}

.cnModal__search{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(215,176,88,.12);
}
.cnModal__search input{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(215,176,88,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  outline:none;
  font-weight: 800;
}

.cnModal__list{
  padding: 12px 14px;
  overflow:auto;
  max-height: calc(82vh - 120px);
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.cnModal__list button{
  border:1px solid rgba(215,176,88,.22);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.90);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
}

.cnModal__list button.active{
  border-color: rgba(215,176,88,.60);
  background: rgba(215,176,88,.12);
  color: rgba(215,176,88, 1);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* ==========================================================
   FIX PREMIUM — "Produto do Dia" (featured)
   - Impede banner gigante
   - Mantém imagem inteira (contain) com fundo blur do seu JS
   ========================================================== */
.featured .card:first-child .card__img{
  height: var(--cn-featured-h);
  min-height: var(--cn-featured-h);
  padding: 12px;
}

.featured .card:first-child .card__img img{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain !important;
  border-radius: 14px;
}

@media (max-width: 860px){
  .featured .card:first-child .card__img{
    height: var(--cn-featured-h-md);
    min-height: var(--cn-featured-h-md);
  }
}

@media (max-width: 560px){
  .featured .card:first-child .card__img{
    height: var(--cn-featured-h-sm);
    min-height: var(--cn-featured-h-sm);
  }
  .select{ width:100%; }
  .sortRow{ width:100%; justify-content:stretch; }
}

/* Badge ⭐ do dia no grid (loja.js já usa .pFeatured) */
.pImg{ position:relative; }
.pFeatured{
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  padding:7px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.02em;
  border:1px solid rgba(224,195,107,.28);
  background: rgba(0,0,0,.55);
  color: rgba(255,236,180,.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}


/* =========================
   PATCH 2026-03-29
   Estrutura comercial das categorias + refino visual
   ========================= */

.toolRow--stack{
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.chipSection{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.chipSection__label{
  font-family: Cinzel, serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(224,195,107,.88);
  opacity: .96;
  padding-left: 2px;
}

.chipSection--soft .chipSection__label{
  color: rgba(255,255,255,.68);
}

#tagPrimaryChips .tagChip{
  border-color: rgba(224,195,107,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

#tagPrimaryChips .tagChip.tagChip--active{
  border-color: rgba(224,195,107,.52);
  background: linear-gradient(180deg, rgba(224,195,107,.14), rgba(0,0,0,.18));
  color: rgba(255,236,180,.98);
}

#tagSecondaryChips .tagChip{
  border-color: rgba(215,176,88,.18);
}

#tagUtilityChips .tagChip{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.78);
}

#tagUtilityChips .tagChip.tagChip--active{
  border-color: rgba(215,176,88,.34);
  color: rgba(255,236,180,.95);
  background: rgba(215,176,88,.10);
}

.cnModal__group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}

.cnModal__group + .cnModal__group{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(215,176,88,.10);
}

.cnModal__groupTitle{
  width:100%;
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(224,195,107,.88);
  opacity: .95;
}

.pCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    rgba(7,7,9,.52);
}

.pBody{
  gap: 8px;
}

.pName{
  text-wrap: balance;
}

.pActions{
  gap: 8px;
}

.smallBtn.btn--secondary-soft{
  border-color: rgba(215,176,88,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.14));
}

@media (max-width: 720px){
  .chipSection{
    gap: 7px;
  }

  .chipSection__label{
    font-size: 10px;
    letter-spacing: .16em;
  }
}


/* =========================
   PATCH 2026-03-29 — lapidação final
   ========================= */

.panel__head{
  gap: 14px;
  align-items: flex-start;
}

.panel__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 220px;
}

.panel__right .select{
  min-width: 220px;
}

.productsGrid .pCard{
  display:flex;
  flex-direction:column;
  min-height:100%;
  border-color: rgba(215,176,88,.16);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

.productsGrid .pCard:hover{
  border-color: rgba(215,176,88,.28);
}

.productsGrid .pBody{
  display:block !important;
  gap:8px;
  min-height:0 !important;
  height:auto !important;
}

.productsGrid .pName{
  line-height:1.12;
  text-wrap: balance;
}

.productsGrid .pActions{
  margin-top:12px !important;
  padding-top:0 !important;
}

#tagPrimaryChips .tagChip{
  font-size: 12.5px;
}

#tagSecondaryChips .tagChip{
  font-size: 12px;
}

#tagUtilityChips .tagChip{
  font-size: 11.5px;
}

@media (max-width: 860px){
  .panel__head{
    flex-direction: column;
    align-items: stretch;
  }

  .panel__right{
    width:100%;
    min-width: 0;
    justify-content: stretch;
  }

  .panel__right .select{
    width:100%;
    min-width: 0;
  }

  .lojaTools .toolRow:first-child{
    flex-direction: column;
    align-items: stretch;
  }

  .lojaTools .toolRow:first-child > *{
    width:100%;
  }
}

/* HOTFIX 2026-03-29 — vitrine comercial estável */
.productsGrid .pBody > * + *{
  margin-top:8px;
}

.productsGrid .pActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.productsGrid .pActions .smallBtn{
  flex:0 1 auto;
}

@media (max-width: 520px){
  .panel{
    border-radius: 22px;
  }

  .panel__head h2{
    font-size: 1.02rem;
  }

  .productsGrid{
    gap: 14px;
  }

  .productsGrid .pCard{
    border-radius: 20px;
  }

  .productsGrid .pName{
    font-size: 1rem;
  }

  .productsGrid .smallBtn{
    min-height: 38px;
  }
}


/* =========================
   HOTFIX 2026-03-30 — RESTAURAR ARQUITETURA DOS CARDS
   - devolve o corpo do card para coluna flex
   - prende os botões no rodapé
   - estabiliza títulos e meta para não quebrar a linha visual
   ========================= */
.productsGrid{
  align-items:stretch !important;
}

.productsGrid .pCard{
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

.productsGrid .pImg{
  flex:0 0 auto !important;
}

.productsGrid .pBody{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
}

.productsGrid .pBody > *{
  flex:0 0 auto;
}

.productsGrid .pName{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-height:3.45em;
  margin-bottom:0 !important;
}

.productsGrid .pSmall{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 !important;
}

.productsGrid .pBody .pSmall:nth-of-type(1){
  -webkit-line-clamp:3;
  min-height:4.1em;
}

.productsGrid .pBody .pSmall:nth-of-type(2){
  -webkit-line-clamp:2;
  min-height:2.8em;
}

.productsGrid .pActions{
  margin-top:auto !important;
  padding-top:10px !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:stretch !important;
}

.productsGrid .pActions .smallBtn{
  width:100% !important;
  min-width:0 !important;
  flex:none !important;
  justify-content:center !important;
}

.productsGrid .pActions .smallBtn:nth-child(3):last-child{
  grid-column:1 / -1;
}

@media (max-width: 520px){
  .productsGrid .pActions{
    grid-template-columns:1fr !important;
  }

  .productsGrid .pActions .smallBtn:nth-child(3):last-child{
    grid-column:auto;
  }

  .productsGrid .pName{
    min-height:auto;
  }

  .productsGrid .pBody .pSmall:nth-of-type(1),
  .productsGrid .pBody .pSmall:nth-of-type(2){
    min-height:auto;
  }
}





/* =========================
   Compactação da navegação comercial
   ========================= */
.chipSection{
  width:100%;
}

.chipSection__label{
  display:block;
  margin:0 0 8px;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(236,213,152,.92);
  font-weight:900;
}

.chipSection--compact{
  padding-top:6px;
}

.chipFold{
  width:100%;
  margin-top:6px;
  border:1px solid rgba(224,195,107,.10);
  border-radius:16px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
}

.chipFold--soft{
  background:rgba(255,255,255,.03);
}

.chipFold__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
}

.chipFold__summary::-webkit-details-marker{
  display:none;
}

.chipFold__summary .chipSection__label{
  margin:0;
  font-size:10px;
}

.chipFold__hint{
  font-size:11px;
  font-weight:900;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.chipFold[open] .chipFold__hint{
  color:rgba(236,213,152,.92);
}

.chipFold[open] .chipFold__hint::before{
  content:'− ';
}

.chipFold:not([open]) .chipFold__hint::before{
  content:'+ ';
}

.chipFold .chipSection{
  padding:0 12px 12px;
}

@media (max-width: 720px){
  .chipSection__label{
    font-size:10px;
    letter-spacing:.18em;
  }

  .chipFold__summary{
    padding:9px 11px;
  }

  .chipFold .chipSection{
    padding:0 10px 10px;
  }
}

/* =========================
   HOTFIX 2026-03-30 — DOCK FLUTUANTE DA LOJA
   ========================= */
.cnStoreDock{
  position:fixed;
  right:10px;
  bottom:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cnStoreDock__btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(215,176,88,.20);
  background:rgba(7,7,9,.76);
  color:rgba(255,245,220,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  font-size:15px;
  box-shadow:0 10px 24px rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cnStoreDock__btn:hover,
.cnStoreDock__btn:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(224,195,107,.42);
  background:rgba(12,12,14,.90);
  box-shadow:0 18px 38px rgba(0,0,0,.48);
}

.cnStoreDock__btn--home{
  background:linear-gradient(180deg, rgba(215,176,88,.18), rgba(0,0,0,.22)), rgba(7,7,9,.82);
  border-color:rgba(224,195,107,.34);
}

@media (max-width: 720px){
  .cnStoreDock{
    right:8px;
    bottom:10px;
    gap:6px;
  }

  .cnStoreDock__btn{
    width:34px;
    height:34px;
    border-radius:11px;
    font-size:14px;
  }
}