/* =========================================================================
 * PF Visual 2.1.0 — Arquivo de Produtos + Filtro de Produtos
 * Estrutura estatica. As cores/tamanhos configuraveis sao injetados via
 * CSS variables dinamicas (ver Archive::render_dynamic_css).
 * ========================================================================= */

.pvae-archive { --pvae-f-width: 250px; --pvae-f-gap: 24px; --pvae-f-pad: 24px; --pvae-f-bg: #fff; --pvae-f-border: #eadfe4; --pvae-f-border-w: 1px; --pvae-f-radius: 16px; --pvae-f-shadow: 0 0 0 rgba(0,0,0,0); position: relative; }

.pvae-archive * { box-sizing: border-box; }

/* Layout desktop: filtros a esquerda, produtos a direita */
.pvae-archive-layout { display: grid; grid-template-columns: var(--pvae-f-width) 1fr; gap: var(--pvae-f-gap); align-items: start; }
.pvae-archive-layout.no-filters { grid-template-columns: 1fr; }
.pvae-archive-filters { position: sticky; top: 20px; background: var(--pvae-f-bg); border: var(--pvae-f-border-w) solid var(--pvae-f-border); border-radius: var(--pvae-f-radius); padding: var(--pvae-f-pad); box-shadow: var(--pvae-f-shadow); }

.pvae-archive-main { min-width: 0; }

/* Grade reutiliza o card da vitrine PF Produtos */
.pvae-archive .pfvae-products-widget { --pfvae-gap: var(--pfvae-gap-y, 22px) var(--pfvae-gap-x, 22px);
  --pfvae-card-bg:#fff; --pfvae-card-border:#f4e8ee; --pfvae-card-border-width:1px; --pfvae-card-radius:22px;
  --pfvae-card-shadow:0 6px 20px rgba(40,45,65,.045); --pfvae-img-width:100%; --pfvae-img-ratio:1/1; --pfvae-img-fit:cover;
  --pfvae-img-border-width:0px; --pfvae-img-border-color:#f0e6eb; --pfvae-img-zoom:1; --pfvae-img-spacing:14px;
  --pfvae-card-text:#8193b2; --pfvae-card-text-hover:#e65f91; --pfvae-card-title-lh:1.4; --pfvae-card-title-align:center;
  --pfvae-card-price:#ff739d; --pfvae-card-price-old:#b9aeb6; --pfvae-card-price-align:center; --pfvae-card-price-spacing:8px;
  --pfvae-card-button:#ff7fb1; --pfvae-card-button-bg:#fff; --pfvae-card-button-text-hover:#fff; --pfvae-card-button-hover-bg:#ff7fb1;
  --pfvae-card-button-border:#ff7fb1; --pfvae-card-button-border-width:1px; --pfvae-card-button-min-height:40px; --pfvae-card-button-padding:8px 18px; --pfvae-card-button-radius:999px; --pfvae-card-button-align:center;
  --pfvae-rating-full:#f2a900; --pfvae-rating-empty:#fff; --pfvae-rating-outline:#e7d9c0; --pfvae-rating-size:16px; --pfvae-rating-spacing:8px; --pfvae-rating-align:center;
}
.pvae-archive .pfvae-products-widget.is-grid ul.products { gap: var(--pfvae-gap-y, 22px) var(--pfvae-gap-x, 22px); grid-template-columns: repeat(var(--pvae-cols-d, 4), minmax(0, 1fr)); }
.pvae-archive .pfvae-products-widget .pfvae-product-card-title { margin: var(--pvae-card-title-mt, 0) 0 var(--pvae-card-title-mb, 10px); color: var(--pvae-card-title-color, #8193b2); font-family: var(--pvae-card-title-font, inherit); font-size: var(--pvae-card-title-size, 16px); font-weight: var(--pvae-card-title-weight, 600); line-height: var(--pvae-card-title-lh, 1.4); text-align: var(--pvae-card-title-align, center); }
.pvae-archive .pfvae-products-widget .pfvae-product-card-price { margin-bottom: var(--pvae-card-price-spacing, 12px); color: var(--pvae-card-price-color, #ff739d); font-family: var(--pvae-card-price-font, inherit); font-size: var(--pvae-card-price-size, 16px); font-weight: var(--pvae-card-price-weight, 700); text-align: var(--pvae-card-price-align, center); }
.pvae-archive .pfvae-products-widget .pfvae-product-card-price ins { color: var(--pvae-card-price-sale, #ff739d); }
.pvae-archive .pfvae-products-widget .pfvae-product-card-price del { color: var(--pvae-card-price-old, #b9aeb6); }
.pvae-archive .pfvae-products-widget ul.products li.product .button { align-self: var(--pvae-card-button-align, center); width: var(--pvae-card-button-width, auto); margin: var(--pvae-card-button-spacing, 0) 0 0; padding: var(--pvae-card-button-padding-y, 10px) var(--pvae-card-button-padding-x, 18px); border-width: var(--pvae-card-button-border-w, 1px); border-style: var(--pvae-card-button-border-style, solid); border-color: var(--pvae-card-button-border, #ff7fb1); border-radius: var(--pvae-card-button-radius, 999px); background: var(--pvae-card-button-bg, #fff); color: var(--pvae-card-button-color, #ff7fb1); box-shadow: var(--pvae-card-button-shadow, none); font-family: var(--pvae-card-button-font, inherit); font-size: var(--pvae-card-button-size, 14px); font-weight: var(--pvae-card-button-weight, 700); }
.pvae-archive .pfvae-products-widget ul.products li.product .button:hover { border-color: var(--pvae-card-button-border-hover, #ff7fb1); background: var(--pvae-card-button-bg-hover, #ff7fb1); color: var(--pvae-card-button-color-hover, #fff); box-shadow: var(--pvae-card-button-shadow-hover, none); }
.pvae-archive-count { font-size: 13px; color: #7c7480; }

/* Toolbar */
.pvae-archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.pvae-archive-toolbar .pvae-archive-count { margin-right: auto; }
.pvae-archive-toolbar .pvae-archive-active { margin-right: auto; }

/* Blocos de filtro */
.pvae-filter-block { padding: 6px 0 18px; border-bottom: 1px solid #f1e7ec; }
.pvae-filter-block:last-child { border-bottom: 0; }
.pvae-filter-title { font-family: var(--pvae-f-title-font, inherit); font-size: var(--pvae-f-title-size, 15px); font-weight: var(--pvae-f-title-weight, 700); color: var(--pvae-f-title-color, #3b3942); margin: 0 0 var(--pvae-f-title-spacing, 14px); }

/* Preco / slider de duas alcas */
.pvae-price-values { display: flex; justify-content: space-between; font-family: var(--pvae-price-val-font, inherit); font-size: var(--pvae-price-val-size, 13px); font-weight: var(--pvae-price-val-weight, 600); color: var(--pvae-price-val-color, #625c65); margin-bottom: var(--pvae-price-val-spacing, 10px); }
.pvae-price-slider { position: relative; height: calc(var(--pvae-price-handle-size, 18px) + 6px); display: flex; align-items: center; }
.pvae-price-track { position: absolute; left: 0; right: 0; height: var(--pvae-price-track-h, 6px); overflow: hidden; background: var(--pvae-price-track, #efd9e3); border-radius: var(--pvae-price-track-r, 999px); }
.pvae-price-range { position: absolute; max-width: 100%; height: 100%; background: var(--pvae-price-range, #e65f91); border-radius: var(--pvae-price-track-r, 999px); }
.pvae-price-input { position: absolute; left: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.pvae-price-input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: var(--pvae-price-handle-size, 18px); height: var(--pvae-price-handle-size, 18px); border-radius: var(--pvae-price-handle-r, 50%); background: var(--pvae-price-handle, #fff); border: 2px solid var(--pvae-price-handle-border, #e65f91); box-shadow: var(--pvae-price-handle-shadow, 0 2px 6px rgba(40,45,65,.18)); cursor: pointer; }
.pvae-price-input::-moz-range-thumb { pointer-events: auto; width: var(--pvae-price-handle-size, 18px); height: var(--pvae-price-handle-size, 18px); border-radius: var(--pvae-price-handle-r, 50%); background: var(--pvae-price-handle, #fff); border: 2px solid var(--pvae-price-handle-border, #e65f91); box-shadow: var(--pvae-price-handle-shadow, 0 2px 6px rgba(40,45,65,.18)); cursor: pointer; }
.pvae-price-input:focus-visible::-webkit-slider-thumb { outline: 3px solid color-mix(in srgb, #ff7fb1 40%, transparent); outline-offset: 2px; }

/* Cores / swatches */
.pvae-swatches { display: flex; flex-wrap: wrap; gap: var(--pvae-sw-gap-y, 8px) var(--pvae-sw-gap-x, 8px); }
.pvae-swatch { width: var(--pvae-sw-size, 26px); height: var(--pvae-sw-size, 26px); padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--pvae-sw-radius, 50%); }
.pvae-swatch-dot { display: block; width: 100%; height: 100%; border-radius: var(--pvae-sw-radius, 50%); background: var(--pvae-swatch-color, #ccc); border: var(--pvae-sw-border-w, 2px) solid var(--pvae-sw-border, #eadfe4); box-shadow: var(--pvae-sw-shadow, none); transition: transform .15s ease, box-shadow .15s ease; }
/* Fallback neutro e previsivel quando o termo nao possui cor mapeada. */
.pvae-swatch-neutral .pvae-swatch-dot { background: repeating-linear-gradient(45deg, #e9ecf2, #e9ecf2 5px, #dfe3ea 5px, #dfe3ea 10px); border-style: dashed; border-color: var(--pvae-sw-border, #ccd0da); }
.pvae-swatches.format-square .pvae-swatch, .pvae-swatches.format-square .pvae-swatch-dot { border-radius: var(--pvae-sw-square-r, 6px); }
.pvae-swatch:hover .pvae-swatch-dot { background-color: var(--pvae-sw-hover, #fff0f6); }
.pvae-swatch.is-selected .pvae-swatch-dot { border-color: var(--pvae-sw-border-sel, #e65f91); box-shadow: var(--pvae-sw-shadow-sel, 0 0 0 3px rgba(230,95,145,.25)); }
.pvae-swatch.is-selected .pvae-swatch-dot::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 2px #fff; }

/* Categorias */
.pvae-cat-tree, .pvae-cat-tree-list, .pvae-cat-children { list-style: none; margin: 0; padding: 0; }
.pvae-cat-children { padding-left: var(--pvae-cat-indent, 16px); display: none; }
.pvae-cat-item { position: relative; margin-bottom: var(--pvae-cat-spacing, 8px); }
.pvae-cat-label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-family: var(--pvae-cat-font, inherit); font-size: var(--pvae-cat-size, 14px); font-weight: var(--pvae-cat-weight, 500); color: var(--pvae-cat-color, #625c65); cursor: pointer; }
.pvae-cat-label input { accent-color: var(--pvae-cat-color-active, #e65f91); }
.pvae-cat-label:hover { color: var(--pvae-cat-hover, #e65f91); }
.pvae-cat-item.has-children > .pvae-cat-label { font-weight: 600; }
.pvae-cat-count { color: var(--pvae-cat-count-color, #9a8f97); font-size: var(--pvae-cat-count-size, 12px); }
.pvae-cat-toggle { position: absolute; right: 0; top: 4px; width: 22px; height: 22px; border: 0; background: none; color: var(--pvae-cat-icon-color, #e65f91); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.pvae-cat-toggle svg { width: 14px; height: 14px; transform: rotate(0deg); }
.pvae-cat-children.is-open { display: block; }
.pvae-cat-toggle.is-open svg { transform: rotate(90deg); }
.pvae-cat-toggle.icon-plus .pvae-cat-toggle-symbol::before { content: "+"; font-size: var(--pvae-cat-icon-size, 14px); line-height: 1; }
.pvae-cat-toggle.icon-plus.is-open .pvae-cat-toggle-symbol::before { content: "−"; }
.pvae-filter-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--pvae-f-title-spacing, 14px); }
.pvae-filter-title-row .pvae-filter-title { margin-bottom: 0; }
.pvae-category-section-toggle { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--pvae-cat-icon-color, #e65f91); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pvae-category-section-toggle svg { width: var(--pvae-cat-icon-size, 14px); height: var(--pvae-cat-icon-size, 14px); transition: transform .2s ease; }
.pvae-category-block.is-open .pvae-category-section-toggle svg { transform: rotate(90deg); }
.pvae-cat-item.is-category-overflow { display: none; }
.pvae-cat-item.is-category-overflow.has-active-branch, .pvae-cat-tree.show-all-categories .pvae-cat-item.is-category-overflow { display: list-item; }
.pvae-category-more { margin-top: 8px; padding: 4px 0; border: 0; background: transparent; color: var(--pvae-cat-color-active, #e65f91); font-family: var(--pvae-cat-font, inherit); font-size: var(--pvae-cat-size, 14px); font-weight: 600; cursor: pointer; }
.pvae-category-more:hover { color: var(--pvae-cat-hover, #e65f91); text-decoration: underline; }

/* Ordenacao */
.pvae-archive-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pvae-sort-label { font-size: 12px; color: #9a8f97; }
.pvae-sort-field { position: relative; }
.pvae-sort-field select { font-family: var(--pvae-sort-font, inherit); font-size: var(--pvae-sort-size, 13px); font-weight: var(--pvae-sort-weight, 500); color: var(--pvae-sort-color, #625c65); background: var(--pvae-sort-bg, #fff); border: var(--pvae-sort-border-w, 1px) solid var(--pvae-sort-border, #eadfe4); border-radius: var(--pvae-sort-radius, 10px); padding: var(--pvae-sort-padding-y, 10px) 34px var(--pvae-sort-padding-y, 10px) var(--pvae-sort-padding-x, 14px); width: var(--pvae-sort-width, 220px); max-width: 100%; appearance: none; cursor: pointer; }
.pvae-sort-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); pointer-events: none; color: var(--pvae-sort-color, #625c65); }
.pvae-sort-arrow svg { width: 14px; height: 14px; }

/* Filtros ativos (chips) */
.pvae-archive-active { display: flex; flex-wrap: wrap; gap: var(--pvae-active-spacing, 8px); margin: 0 0 6px; width: 100%; }
.pvae-active-chip { font-family: var(--pvae-active-font, inherit); font-size: var(--pvae-active-size, 12px); font-weight: var(--pvae-active-weight, 600); color: var(--pvae-active-color, #e65f91); background: var(--pvae-active-bg, #fff2f7); border: 1px solid var(--pvae-active-border, #ffd3e4); border-radius: var(--pvae-active-radius, 999px); padding: var(--pvae-active-padding-y, 6px) var(--pvae-active-padding-x, 12px); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pvae-active-chip:hover { background: var(--pvae-active-color, #e65f91); color: #fff; }

/* Limpar filtros */
.pvae-filter-clear-wrap { margin-top: 14px; }
.pvae-filter-clear, .pvae-drawer-apply { font-family: var(--pvae-clear-font, inherit); font-size: var(--pvae-clear-size, 13px); font-weight: var(--pvae-clear-weight, 600); color: var(--pvae-clear-color, #e65f91); background: var(--pvae-clear-bg, #fff); border: 1px solid var(--pvae-clear-border, #e65f91); border-radius: var(--pvae-clear-radius, 999px); padding: var(--pvae-clear-padding-y, 9px) var(--pvae-clear-padding-x, 16px); cursor: pointer; transition: background .15s ease, color .15s ease; }
.pvae-filter-clear:hover { background: var(--pvae-clear-bg-hover, #e65f91); color: var(--pvae-clear-color-hover, #fff); }

/* Paginacao numerada */
.pvae-archive-pagination { display: flex; flex-wrap: wrap; justify-content: var(--pvae-pg-align, center); gap: var(--pvae-pg-gap, 6px); margin-top: 26px; }
.pvae-page { font-family: var(--pvae-pg-font, inherit); font-size: var(--pvae-pg-size, 14px); font-weight: var(--pvae-pg-weight, 600); color: var(--pvae-pg-color, #625c65); background: var(--pvae-pg-bg, #fff); border: var(--pvae-pg-border-w, 1px) solid var(--pvae-pg-border, #eadfe4); border-radius: var(--pvae-pg-radius, 10px); min-width: 38px; padding: var(--pvae-pg-padding-y, 9px) var(--pvae-pg-padding-x, 14px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pvae-page.is-active { color: var(--pvae-pg-color-active, #fff); background: var(--pvae-pg-bg-active, #e65f91); border-color: var(--pvae-pg-bg-active, #e65f91); }
.pvae-page:hover:not(.is-active) { color: var(--pvae-pg-hover, #e65f91); }
.pvae-page svg { width: 16px; height: 16px; }

/* Ver mais */
.pvae-archive-loadmore { display: flex; justify-content: var(--pvae-lm-align, center); margin-top: var(--pvae-lm-spacing, 30px); }
.pvae-loadmore-btn { font-family: var(--pvae-lm-font, inherit); font-size: var(--pvae-lm-size, 15px); font-weight: var(--pvae-lm-weight, 700); color: var(--pvae-lm-color, #ff7fb1); background: var(--pvae-lm-bg, #fff); border: 1px solid var(--pvae-lm-border, #ff7fb1); border-radius: var(--pvae-lm-radius, 999px); padding: var(--pvae-lm-padding-y, 13px) var(--pvae-lm-padding-x, 30px); cursor: pointer; transition: background .15s ease, color .15s ease; }
.pvae-loadmore-btn:hover { color: var(--pvae-lm-color-hover, #fff); background: var(--pvae-lm-bg-hover, #ff7fb1); }
.pvae-loadmore-btn[disabled] { opacity: .6; cursor: default; }

.pvae-archive-status { margin-top: 14px; text-align: center; color: #7c7480; font-size: 13px; min-height: 1em; }
.pvae-archive-results.is-loading { opacity: .55; transition: opacity .2s ease; pointer-events: none; }

/* Mobile */
.pvae-archive-mobile-toggle { display: none; }
.pvae-archive-drawer { display: none; }

@media (max-width: 992px) {
  .pvae-archive .pfvae-products-widget.is-grid ul.products { grid-template-columns: repeat(var(--pvae-cols-t, 3), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pvae-archive-layout { grid-template-columns: 1fr; }
  .pvae-archive-filters { display: none; }
  .pvae-archive-mobile-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pvae-mb-font, inherit); font-size: var(--pvae-mb-size, 14px); font-weight: var(--pvae-mb-weight, 700); color: var(--pvae-mb-color, #fff); background: var(--pvae-mb-bg, #e65f91); border: 1px solid var(--pvae-mb-border, #e65f91); border-radius: var(--pvae-mb-radius, 999px); padding: var(--pvae-mb-padding-y, 13px) var(--pvae-mb-padding-x, 22px); margin-bottom: var(--pvae-mb-spacing, 16px); cursor: pointer; }
  .pvae-archive .pfvae-products-widget.is-grid ul.products { grid-template-columns: repeat(var(--pvae-cols-m, 2), minmax(0, 1fr)); }

  body.pvae-drawer-open { overflow: hidden; }
  .pvae-archive-drawer { position: fixed; inset: 0; z-index: 99999; display: none; }
  body.pvae-drawer-open .pvae-archive-drawer { display: block; }
  .pvae-drawer-overlay { position: absolute; inset: 0; background: var(--pvae-drawer-overlay, #2a262e); opacity: calc(var(--pvae-drawer-overlay-opacity, 55) / 100); }
  .pvae-drawer-inner { position: absolute; top: 0; right: 0; height: 100%; width: min(var(--pvae-drawer-width, 380px), 90vw); background: var(--pvae-drawer-bg, #fff); box-shadow: var(--pvae-drawer-shadow, 0 0 38px rgba(40,45,65,.3)); border-radius: var(--pvae-drawer-radius, 0); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s ease; }
  body.pvae-drawer-open .pvae-drawer-inner { transform: translateX(0); }
  .pvae-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #f1e7ec; }
  .pvae-drawer-title { margin: 0; font-size: var(--pvae-drawer-title-size, 18px); font-weight: var(--pvae-drawer-title-weight, 700); color: var(--pvae-drawer-title-color, #3b3942); }
  .pvae-drawer-close { border: 0; background: none; font-size: var(--pvae-drawer-close-size, 20px); color: var(--pvae-drawer-close-color, #e65f91); cursor: pointer; line-height: 1; }
  .pvae-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
  .pvae-drawer-foot { padding: 16px 20px; border-top: 1px solid #f1e7ec; }
  .pvae-drawer-apply { width: 100%; text-align: center; background: var(--pvae-mb-bg-hover, #e65f91); color: #fff; border: 0; border-radius: 999px; padding: 14px; font-weight: 700; cursor: pointer; }
}

/* Container / cabecalho (template completo) */
.pvae-archive-container { width: 100%; padding-left: var(--pvae-arc-padx, 20px); padding-right: var(--pvae-arc-padx, 20px); }
.pvae-archive-layout-boxed .pvae-archive-container { max-width: var(--pvae-arc-maxw, 1200px); margin-left: auto; margin-right: auto; padding-left: var(--pvae-arc-padx, 20px); padding-right: var(--pvae-arc-padx, 20px); }
.pvae-archive { margin-top: var(--pvae-arc-mt, 40px); margin-bottom: var(--pvae-arc-mb, 40px); }
.pvae-archive-header { margin: 0 0 22px; }
.pvae-archive-title { font-size: 28px; line-height: 1.2; margin: 0 0 6px; color: #2a262e; }
.pvae-archive-desc { margin: 0 0 12px; color: #6b6470; font-size: 14px; }

/* Paginacao numerada (links reais para fallback sem JS) */
.pvae-arc-pagination { margin-top: 26px; }
.pvae-arc-page-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: var(--pvae-pg-align, center); gap: var(--pvae-pg-gap, 6px); }
.pvae-arc-page { font-family: var(--pvae-pg-font, inherit); font-size: var(--pvae-pg-size, 14px); font-weight: var(--pvae-pg-weight, 600); color: var(--pvae-pg-color, #625c65); background: var(--pvae-pg-bg, #fff); border: var(--pvae-pg-border-w, 1px) solid var(--pvae-pg-border, #eadfe4); border-radius: var(--pvae-pg-radius, 10px); min-width: 38px; padding: var(--pvae-pg-padding-y, 9px) var(--pvae-pg-padding-x, 14px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pvae-arc-page.active { color: var(--pvae-pg-color-active, #fff); background: var(--pvae-pg-bg-active, #e65f91); border-color: var(--pvae-pg-bg-active, #e65f91); }
.pvae-arc-page:hover:not(.active):not(.disabled) { color: var(--pvae-pg-hover, #e65f91); }
.pvae-arc-page.disabled { opacity: .45; pointer-events: none; }
.pvae-arc-page.dots { background: none; border: 0; min-width: 0; }

@media (prefers-reduced-motion: reduce) { .pvae-drawer-inner, .pvae-swatch-dot, .pvae-cat-toggle svg { transition: none !important; } }