/* =========================================================
   CATEGORIA — Depósito Construfer
========================================================= */

:root {
  --brown-dark:  #3a1f0f;
  --brown:       #6b3e1d;
  --orange:      #f28c28;
  --orange-dk:   #bd6418;
  --gold:        #d4a373;
  --cream:       #fff7ec;
  --cream-2:     #fff2e0;
  --white:       #ffffff;
  --black:       #17100b;
  --gray:        #6f6258;
  --gray-light:  #b5a59a;
  --green:       #1fae59;
  --red:         #d13b2f;
  --border:      rgba(107,62,29,.13);
  --shadow:      0 20px 60px rgba(58,31,15,.15);
  --shadow-sm:   0 8px 24px rgba(58,31,15,.10);
  --radius:      20px;
  --radius-sm:   12px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Poppins",sans-serif; background:var(--cream); color:var(--black); }
a { text-decoration:none; color:inherit; }
button, input, select { font-family:inherit; }
img { display:block; max-width:100%; }

.container { width:min(1280px,94%); margin:0 auto; }

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.header {
  position:sticky; top:0; z-index:900;
  background:rgba(255,247,236,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav {
  height:72px; display:flex;
  align-items:center; justify-content:space-between; gap:12px;
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img { height:40px; object-fit:contain; }
.brand strong { display:block; font-size:14px; font-weight:800; color:var(--brown-dark); }
.brand span   { display:block; font-size:11px; color:var(--gray); }

.menu { display:flex; gap:24px; }
.menu a { font-size:13px; font-weight:600; color:var(--gray); transition:color .2s; white-space:nowrap; }
.menu a:hover { color:var(--orange); }

.nav-actions { display:flex; align-items:center; gap:8px; }

.search-box {
  display:flex; align-items:center; gap:8px;
  background:var(--cream-2); border:1.5px solid var(--border);
  border-radius:50px; padding:8px 14px;
  transition:.2s;
}
.search-box:focus-within { border-color:var(--orange); background:var(--white); }
.search-box i { color:var(--gray); font-size:13px; flex-shrink:0; }
.search-box input {
  border:none; background:none; outline:none;
  font-size:13px; color:var(--brown-dark);
  width:180px;
}
.search-box input::placeholder { color:var(--gray-light); }
.search-clear {
  background:none; border:none; cursor:pointer;
  color:var(--gray-light); font-size:12px; padding:0;
  transition:color .2s;
}
.search-clear:hover { color:var(--brown-dark); }

.user-btn, .cart-btn {
  position:relative; background:none; border:none; cursor:pointer;
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  font-size:16px; color:var(--brown-dark); transition:.2s;
}
.user-btn:hover, .cart-btn:hover { background:rgba(242,140,40,.12); color:var(--orange); }
.cart-btn span {
  position:absolute; top:4px; right:4px;
  background:var(--orange); color:var(--white);
  font-size:9px; font-weight:800;
  width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
}
.menu-btn {
  display:none; background:none; border:none; cursor:pointer;
  font-size:19px; color:var(--brown-dark); padding:6px;
}

/* ══════════════════════════════════════════════════════════
   CARRINHO
══════════════════════════════════════════════════════════ */
.cart-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(58,31,15,.45); backdrop-filter:blur(3px); z-index:1000;
}
.cart-overlay.open { display:block; }
.cart-drawer {
  position:fixed; top:0; right:0; height:100%;
  width:min(420px,100vw); background:var(--white); z-index:1001;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 60px rgba(58,31,15,.15);
}
.cart-drawer.open { transform:translateX(0); }
.cart-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.cart-header h3 { font-size:16px; font-weight:800; color:var(--brown-dark); display:flex; align-items:center; gap:8px; }
.cart-header h3 i { color:var(--orange); }
.close-btn {
  background:none; border:none; cursor:pointer;
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:15px; color:var(--gray); transition:.2s;
}
.close-btn:hover { background:var(--cream); color:var(--brown-dark); }
.cart-items { flex:1; overflow-y:auto; padding:14px 24px; display:flex; flex-direction:column; gap:12px; }
.cart-item { display:flex; gap:10px; align-items:flex-start; }
.cart-item img { width:56px; height:56px; object-fit:cover; border-radius:10px; flex-shrink:0; border:1px solid var(--border); }
.cart-item-info { flex:1; min-width:0; }
.cart-item-info strong { display:block; font-size:12px; color:var(--brown-dark); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-info span { font-size:11px; color:var(--gray); }
.cart-item-price { font-size:13px; font-weight:800; color:var(--orange); white-space:nowrap; }
.cart-item-remove { background:none; border:none; cursor:pointer; color:var(--gray-light); font-size:12px; transition:color .2s; }
.cart-item-remove:hover { color:var(--red); }
.cart-footer { padding:18px 24px; border-top:1px solid var(--border); }
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cart-total span { font-size:13px; color:var(--gray); font-weight:600; }
.cart-total strong { font-size:20px; font-weight:800; color:var(--brown-dark); }
.btn-checkout {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:linear-gradient(135deg,var(--orange),var(--orange-dk));
  color:var(--white); padding:14px; border-radius:14px;
  font-size:14px; font-weight:800;
  box-shadow:0 10px 28px rgba(242,140,40,.28); transition:.2s;
}
.btn-checkout:hover { transform:translateY(-2px); filter:brightness(1.04); }
.cart-empty-msg { text-align:center; font-size:12px; color:var(--gray); margin-top:8px; display:none; }

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════════ */
.breadcrumb-bar {
  background:var(--cream-2); border-bottom:1px solid var(--border); padding:10px 0;
  display:flex; align-items:center;
}
.breadcrumb-bar .container {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.breadcrumb { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--gray); flex-wrap:wrap; }
.breadcrumb a { color:var(--gray); transition:color .2s; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb i.fa-chevron-right { font-size:9px; }
.breadcrumb span { color:var(--brown-dark); font-weight:700; }
.breadcrumb-count { font-size:12px; color:var(--gray); white-space:nowrap; }

/* ══════════════════════════════════════════════════════════
   BANNER DA CATEGORIA
══════════════════════════════════════════════════════════ */
.cat-banner {
  background:linear-gradient(135deg, var(--brown-dark) 0%, var(--brown) 100%);
  padding:28px 0;
}
.cat-banner-inner {
  display:flex; align-items:center; gap:20px;
}
.cat-banner-icon {
  width:64px; height:64px; border-radius:18px;
  background:rgba(255,255,255,.12);
  display:grid; place-items:center;
  font-size:28px; color:var(--orange);
  flex-shrink:0;
}
.cat-banner h1 { font-size:clamp(20px,2.5vw,28px); font-weight:800; color:var(--white); }
.cat-banner p  { font-size:13px; color:rgba(255,255,255,.65); margin-top:2px; }

/* ══════════════════════════════════════════════════════════
   LAYOUT: SIDEBAR + MAIN
══════════════════════════════════════════════════════════ */
.page-layout {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:28px;
  padding:28px 0 60px;
  align-items:start;
}

/* ══════════════════════════════════════════════════════════
   FILTROS SIDEBAR
══════════════════════════════════════════════════════════ */
.filters-sidebar {
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
  position:sticky;
  top:88px;
}

.filters-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:var(--cream-2);
}
.filters-header span { font-size:14px; font-weight:800; color:var(--brown-dark); display:flex; align-items:center; gap:7px; }
.filters-header span i { color:var(--orange); }

.btn-clear-all {
  background:none; border:none; cursor:pointer;
  font-size:11px; font-weight:700; color:var(--orange);
  padding:4px 8px; border-radius:8px; transition:.2s;
}
.btn-clear-all:hover { background:rgba(242,140,40,.1); }

.filter-group { border-bottom:1px solid var(--border); }
.filter-group:last-of-type { border-bottom:none; }

.filter-group-title {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:14px 18px;
  background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--brown-dark);
  transition:.2s;
}
.filter-group-title:hover { background:var(--cream); }
.filter-group-title span { display:flex; align-items:center; gap:8px; }
.filter-group-title span i { color:var(--orange); font-size:13px; }
.toggle-icon { font-size:10px; color:var(--gray-light); transition:transform .25s; }
.filter-group-title.collapsed .toggle-icon { transform:rotate(-90deg); }

.filter-group-body { padding:6px 18px 14px; }
.filter-group-body.hidden { display:none; }

/* Lista de categorias */
.cat-list { display:flex; flex-direction:column; gap:2px; }
.cat-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:10px;
  cursor:pointer; font-size:13px; font-weight:600; color:var(--gray);
  transition:.2s; border:1.5px solid transparent;
}
.cat-item:hover { background:var(--cream); color:var(--brown-dark); }
.cat-item.active { background:rgba(242,140,40,.1); color:var(--orange-dk); border-color:rgba(242,140,40,.25); }
.cat-item-count {
  font-size:10px; font-weight:700; color:var(--gray-light);
  background:var(--cream-2); padding:2px 7px; border-radius:999px;
}
.cat-item.active .cat-item-count { background:rgba(242,140,40,.15); color:var(--orange-dk); }

/* Preço */
.price-inputs { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.price-field { flex:1; display:flex; flex-direction:column; gap:3px; }
.price-field label { font-size:10px; font-weight:700; color:var(--gray-light); text-transform:uppercase; letter-spacing:.5px; }
.price-field input {
  width:100%; padding:9px 10px; border-radius:10px;
  border:1.5px solid var(--border); font-size:13px; color:var(--brown-dark);
  background:var(--cream); outline:none; transition:.2s;
}
.price-field input:focus { border-color:var(--orange); background:var(--white); }
.price-sep { font-size:14px; color:var(--gray-light); margin-top:18px; }

.btn-apply-price {
  width:100%; padding:10px; border-radius:10px;
  border:none; background:var(--orange);
  color:var(--white); font-size:13px; font-weight:700;
  cursor:pointer; transition:.2s;
}
.btn-apply-price:hover { background:var(--orange-dk); }

/* Checkboxes */
.check-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 2px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--gray);
  user-select:none;
}
.check-item input { display:none; }
.checkmark {
  width:18px; height:18px; border-radius:6px;
  border:2px solid var(--border); flex-shrink:0;
  display:grid; place-items:center; transition:.2s;
}
.check-item input:checked ~ .checkmark {
  background:var(--orange); border-color:var(--orange);
}
.check-item input:checked ~ .checkmark::after {
  content:""; width:5px; height:9px;
  border:2px solid white; border-top:none; border-left:none;
  transform:rotate(45deg) translateY(-1px);
  display:block;
}

.btn-close-filters {
  display:none; width:calc(100% - 36px); margin:0 18px 16px;
  padding:12px; border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dk));
  color:var(--white); font-size:14px; font-weight:800;
  cursor:pointer; gap:8px; align-items:center; justify-content:center;
}

/* ══════════════════════════════════════════════════════════
   ÁREA DE PRODUTOS
══════════════════════════════════════════════════════════ */
.products-area { min-width:0; display:flex; flex-direction:column; gap:16px; }

/* Toolbar */
.products-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  background:var(--white); border-radius:var(--radius-sm);
  border:1px solid var(--border); padding:12px 16px;
}
.toolbar-left { display:flex; align-items:center; gap:12px; }
.toolbar-right { display:flex; align-items:center; gap:10px; }

.btn-filter-toggle {
  display:none; align-items:center; gap:7px;
  padding:9px 14px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--white);
  font-size:13px; font-weight:700; color:var(--brown-dark);
  cursor:pointer; transition:.2s; position:relative;
}
.btn-filter-toggle:hover { border-color:var(--orange); color:var(--orange); }

.filter-badge {
  background:var(--orange); color:var(--white);
  font-size:10px; font-weight:800;
  width:18px; height:18px; border-radius:50%;
  display:inline-grid; place-items:center;
}

.results-info { font-size:13px; color:var(--gray); }

.view-toggle { display:flex; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; }
.view-btn {
  width:36px; height:36px; background:none; border:none; cursor:pointer;
  font-size:14px; color:var(--gray-light); display:grid; place-items:center; transition:.2s;
}
.view-btn.active, .view-btn:hover { background:var(--cream); color:var(--orange); }

.sort-select {
  padding:9px 32px 9px 12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--white);
  font-size:13px; font-weight:600; color:var(--brown-dark);
  cursor:pointer; outline:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b5a59a'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:.2s;
}
.sort-select:focus { border-color:var(--orange); }

/* Active filter chips */
.active-filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:rgba(242,140,40,.1); border:1px solid rgba(242,140,40,.25);
  font-size:12px; font-weight:700; color:var(--orange-dk);
}
.filter-chip button {
  background:none; border:none; cursor:pointer;
  color:var(--orange-dk); font-size:11px; padding:0;
  display:grid; place-items:center; transition:color .2s;
}
.filter-chip button:hover { color:var(--red); }

/* ── Skeleton loading ───────────────── */
.skeleton-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.skeleton-card {
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
}
.skeleton-img {
  aspect-ratio:1;
  background:linear-gradient(90deg,var(--cream) 25%,var(--cream-2) 50%,var(--cream) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
.skeleton-body { padding:14px; display:flex; flex-direction:column; gap:8px; }
.skeleton-line {
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,var(--cream) 25%,var(--cream-2) 50%,var(--cream) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
.skeleton-line.short { width:55%; }
.skeleton-line.price { width:40%; height:18px; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* ── Grid de produtos ───────────────── */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.products-grid.list-view { grid-template-columns:1fr; }

/* Card — modo grade */
.prod-card {
  background:var(--white); border-radius:var(--radius);
  border:1px solid var(--border); overflow:hidden;
  transition:.25s; cursor:pointer; position:relative;
  display:flex; flex-direction:column;
}
.prod-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }

.prod-card-img {
  aspect-ratio:1; overflow:hidden; background:var(--cream); position:relative;
}
.prod-card-img img {
  width:100%; height:100%; object-fit:contain; padding:12px;
  transition:transform .35s;
}
.prod-card:hover .prod-card-img img { transform:scale(1.07); }

.prod-badge-discount {
  position:absolute; top:10px; left:10px;
  background:linear-gradient(135deg,var(--green),#15994e);
  color:var(--white); font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px;
}

.prod-card-body { padding:14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.prod-card-cat { font-size:11px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:.5px; }
.prod-card-name {
  font-size:13px; font-weight:700; color:var(--brown-dark); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  flex:1;
}
.prod-card-old { font-size:11px; text-decoration:line-through; color:var(--gray-light); }
.prod-card-price { font-size:19px; font-weight:800; color:var(--brown-dark); }
.prod-card-installments { font-size:11px; color:var(--gray); }

.prod-card-stock {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700;
}
.stock-dot-sm { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.green-dot { background:var(--green); }
.orange-dot { background:var(--orange); }
.red-dot   { background:var(--red); }

.prod-card-actions {
  display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:4px;
}
.btn-card-cart {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius:10px; border:none;
  background:var(--orange); color:var(--white);
  font-size:12px; font-weight:700; cursor:pointer; transition:.2s;
}
.btn-card-cart:hover { background:var(--orange-dk); }
.btn-card-whats {
  width:38px; height:38px; border-radius:10px; border:none;
  background:#25d366; color:var(--white);
  display:grid; place-items:center; font-size:16px;
  cursor:pointer; transition:.2s;
}
.btn-card-whats:hover { background:#1ebe5a; }

/* Card — modo lista */
.products-grid.list-view .prod-card { flex-direction:row; }
.products-grid.list-view .prod-card-img {
  width:160px; min-width:160px; aspect-ratio:auto; height:auto;
}
.products-grid.list-view .prod-card-body { flex-direction:row; align-items:center; flex-wrap:wrap; }
.products-grid.list-view .prod-card-name { flex:1; min-width:200px; -webkit-line-clamp:1; }
.products-grid.list-view .prod-card-price { font-size:20px; white-space:nowrap; }
.products-grid.list-view .prod-card-actions { margin-top:0; }

/* Empty state */
.empty-state {
  text-align:center; padding:60px 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.empty-state i { font-size:52px; color:var(--gold); }
.empty-state h3 { font-size:20px; color:var(--brown-dark); }
.empty-state p  { font-size:14px; color:var(--gray); }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:14px; border:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dk));
  color:var(--white); font-size:14px; font-weight:700;
  cursor:pointer; transition:.2s;
}
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.05); }

/* Paginação */
.pagination {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 0;
}
.pag-btn {
  width:40px; height:40px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--white);
  cursor:pointer; font-size:13px; color:var(--brown-dark);
  display:grid; place-items:center; transition:.2s;
}
.pag-btn:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); }
.pag-btn:disabled { opacity:.4; cursor:not-allowed; }
.pag-pages { display:flex; gap:6px; }
.pag-num {
  width:40px; height:40px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--white);
  cursor:pointer; font-size:13px; font-weight:700; color:var(--brown-dark);
  display:grid; place-items:center; transition:.2s;
}
.pag-num:hover { border-color:var(--orange); color:var(--orange); }
.pag-num.active {
  background:var(--orange); border-color:var(--orange); color:var(--white);
}

/* Overlay filtros mobile */
.filters-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(58,31,15,.45); z-index:980;
}
.filters-overlay.open { display:block; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .page-layout { grid-template-columns:220px 1fr; gap:20px; }
  .search-box input { width:140px; }
}

@media (max-width:820px) {
  .page-layout { grid-template-columns:1fr; }

  .filters-sidebar {
    position:fixed; left:0; top:0; height:100%; width:min(300px,85vw);
    z-index:990; border-radius:0; overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .filters-sidebar.open { transform:translateX(0); }
  .btn-close-filters { display:flex; }
  .btn-filter-toggle { display:flex; }
  .search-box { display:none; }
}

@media (max-width:640px) {
  .menu { display:none; }
  .menu-btn { display:block; }
  .menu.open {
    display:flex; flex-direction:column;
    position:absolute; top:72px; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--border);
    padding:14px 20px; gap:14px; z-index:800;
  }
  .products-toolbar { flex-direction:column; align-items:flex-start; }
  .toolbar-right { width:100%; justify-content:flex-end; }
  .sort-select { flex:1; }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .cat-banner-icon { display:none; }
}

@media (max-width:380px) {
  .products-grid { grid-template-columns:1fr; }
}