/* ---------------- Page banner ---------------- */
.page-banner{
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 55%, var(--bg-elevated) 100%);
  padding: 70px 0 50px;
}
.page-banner-grid{
  position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(31, 179, 160, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 179, 160, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 20% 30%, black 0%, transparent 70%);
}
.page-banner-content{ position:relative; z-index:1; }
.breadcrumb-mi{
  display:flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:500;
  font-size: 0.875rem; color: var(--text-muted); margin-bottom: 22px;
}
.breadcrumb-mi a{ color: var(--text-primary); transition: color 0.2s ease; }
.breadcrumb-mi a:hover{ color: var(--accent); }
.breadcrumb-mi i{ font-size:.7rem; }
.breadcrumb-mi span{ color: var(--accent); }
.page-banner h1{
  color: var(--text-primary); font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 18px; max-width: 700px;
}
.page-banner p{ color: var(--text-muted); max-width: 620px; font-size: 1.02rem; margin-bottom:0; }

@media (max-width: 767px){ .page-banner{ padding: 140px 0 60px; } }

.section-padding{
  padding: 60px 0;
}

/* ---------------- Pagination ---------------- */
.pagination{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  list-style:none; padding:0; margin: 56px 0 0;
}
.pagination .page-item{ margin:0; }
.pagination .page-link{
  min-width:44px; height:44px; padding:0 15px; margin-left:0 !important;
  display:flex; align-items:center; justify-content:center;
  border-radius: 9999px !important; border:1.5px solid var(--line); background: var(--bg-secondary); color: var(--text-muted);
  font-family: var(--font-display); font-weight:600; font-size:.9rem;
  transition: all 0.2s ease; text-decoration:none; box-shadow:none;
}
.pagination .page-link:hover{
  border-color: transparent; background: var(--accent); color: var(--text-primary);
  transform: translateY(-3px); box-shadow: 0 4px 14px rgba(31, 179, 160, 0.35); z-index:1;
}
.pagination .page-link:focus{ box-shadow: 0 0 0 4px rgba(31, 179, 160, 0.25); outline:none; }

/* Current page */
.pagination .page-item.active .page-link{
  background: var(--accent); border-color: var(--accent); color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(31, 179, 160, 0.35); transform: translateY(-2px);
}
.pagination .page-item.active .page-link:hover{
  background: var(--accent); color: var(--text-primary); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(31, 179, 160, 0.35);
}

/* Ellipsis + edge-case disabled numbers */
.pagination .page-item.disabled .page-link{
  background: var(--bg-elevated); border-color: transparent; color: var(--steel);
  cursor: not-allowed; box-shadow:none;
}
.pagination .page-item.disabled .page-link:hover{
  background: var(--bg-elevated); color: var(--steel); transform:none; box-shadow:none;
}

/* Prev / Next controls — visually distinct from page numbers */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link{
  background: var(--bg-elevated); border-color: var(--line); color: var(--text-primary);
}
.pagination .page-item:first-child .page-link:hover,
.pagination .page-item:last-child .page-link:hover{
  background: var(--accent); border-color: transparent; color: var(--text-primary);
}
.pagination .page-item.disabled:first-child .page-link,
.pagination .page-item.disabled:last-child .page-link{
  background: var(--bg-elevated); color: var(--steel); box-shadow:none; transform:none;
}
.pagination .page-link i{ font-size:.8rem; }

@media (max-width: 575px){
  .pagination{ gap:6px; }
  .pagination .page-link{ min-width:38px; height:38px; padding:0 11px; font-size:.82rem; }
}

/* ---------------- Quantity field + Add to Cart ---------------- */
.qtyField{
  display:inline-flex; align-items:center; height:48px;
  border: 1.5px solid var(--line-strong); border-radius: 9999px; background: var(--bg-secondary); overflow:hidden;
  transition: border-color 0.15s ease;
}
.qtyField:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31, 179, 160, 0.25); }

.qtyBtn{
  width:44px; height:100%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: var(--bg-elevated); color: var(--text-muted); text-decoration:none;
  transition: all 0.15s ease; font-size:.9rem;
}
.qtyBtn.minus{ border-right: 1px solid var(--line); }
.qtyBtn.plus{ border-left: 1px solid var(--line); }
.qtyBtn:hover{ background: var(--accent); color: var(--text-primary); }
.qtyBtn:active{ background: var(--accent-dark); }

.qty{
  width:56px; height:100%; border:none; background:transparent; text-align:center;
  font-family: var(--font-display); font-weight:600; font-size:1rem; color: var(--text-primary);
  -moz-appearance: textfield; padding:0;
}
.qty:focus{ outline:none; box-shadow:none; }
.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Add to Cart */
.btn-dark{
  background: var(--accent-dark); border:none; border-radius: 9999px;
  padding: 14px 26px; font-family: var(--font-display); font-weight:600; font-size:.92rem;
  color: var(--text-primary); transition: all 0.2s ease; position:relative; overflow:hidden;
}
.btn-dark:hover, .btn-dark:focus{
  background: var(--accent); color: var(--text-primary); transform: translateY(-3px); box-shadow: 0 4px 14px rgba(31, 179, 160, 0.35);
}
.btn-dark:active{ transform: translateY(-1px); }
.btn-dark:disabled{ background: var(--line); color: var(--text-muted); transform:none; box-shadow:none; cursor:not-allowed; }


/* =============================================================
   PRODUCTS
   ============================================================= */
.filter-pills{ display:flex; gap:12px; flex-wrap:wrap; }
.filter-pill{
  font-family: var(--font-display); font-weight:600; font-size:.86rem; padding: 10px 22px;
  border-radius: 9999px; border: 1.5px solid var(--line); color: var(--text-muted); background: var(--bg-secondary);
  cursor:pointer; transition: all 0.2s ease;
}
.filter-pill:hover{ border-color: var(--accent); color: var(--accent); }
.filter-pill.active{ background: var(--accent); border-color: var(--accent); color: var(--text-primary); }

.product-card{
  border-radius: 12px; overflow:hidden; background: var(--bg-secondary); border:1px solid var(--line);
  transition: all 0.2s ease;
}
.product-card:hover{ box-shadow: 0 10px 25px rgba(0,0,0,0.5); transform: translateY(-6px); }
.product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background: var(--bg-elevated); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s ease; }
.product-card:hover .product-media img{ transform: scale(1.1); }
.product-quickview{
  position:absolute; inset:0; background: rgba(14, 18, 20, .75); opacity:0; display:flex; align-items:center; justify-content:center;
  transition: opacity 0.2s ease;
}
.product-card:hover .product-quickview{ opacity:1; }
.qv-btn{
  background: var(--bg-elevated); color: var(--text-primary); font-family: var(--font-display); font-weight:600; font-size:.82rem;
  padding: 10px 20px; border-radius: 9999px; transform: translateY(14px); opacity:0; transition: all 0.2s ease .05s; border: 1px solid var(--line-strong);
}
.qv-btn:hover{ background: var(--accent); border-color: var(--accent); }
.product-card:hover .qv-btn{ transform: translateY(0); opacity:1; }
.product-info{ padding:20px; }
.product-info .cat{ font-size: 0.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--accent); font-weight:600; }
.product-info h6{ font-family: var(--font-display); font-size:.98rem; margin: 6px 0 0; color: var(--text-primary); }