/* ---------------- Page banner ---------------- */
.page-banner{
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--c-dark-3) 0%, var(--c-dark) 55%, var(--c-dark-2) 100%);
  padding: 70px 0 50px;
}
.page-banner-grid{
  position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(249, 115, 22, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 115, 22, .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(--f-display); font-weight:500;
  font-size: var(--fs-sm); color: var(--c-text-on-dark-muted); margin-bottom: 22px;
}
.breadcrumb-mi a{ color: var(--c-text-on-dark); transition: color var(--t-base); }
.breadcrumb-mi a:hover{ color: var(--c-accent); }
.breadcrumb-mi i{ font-size:.7rem; }
.breadcrumb-mi span{ color: var(--c-accent); }
.page-banner h1{
  color: var(--c-white); font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 18px; max-width: 700px;
}
.page-banner p{ color: var(--c-text-on-dark-muted); max-width: 620px; font-size: 1.02rem; margin-bottom:0; }

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

.section-padding{
  padding: var(--space-section-sm) 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: var(--r-pill) !important; border:1.5px solid var(--c-border); background: var(--c-white); color: var(--c-text-muted);
  font-family: var(--f-display); font-weight:600; font-size:.9rem;
  transition: all var(--t-base); text-decoration:none; box-shadow:none;
}
.pagination .page-link:hover{
  border-color: transparent; background: var(--c-accent); color: var(--c-white);
  transform: translateY(-3px); box-shadow: var(--shadow-accent); z-index:1;
}
.pagination .page-link:focus{ box-shadow: 0 0 0 4px var(--c-accent-glow); outline:none; }

/* Current page */
.pagination .page-item.active .page-link{
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white);
  box-shadow: var(--shadow-accent); transform: translateY(-2px);
}
.pagination .page-item.active .page-link:hover{
  background: var(--c-accent); color: var(--c-white); transform: translateY(-2px); box-shadow: var(--shadow-accent);
}

/* Ellipsis + edge-case disabled numbers */
.pagination .page-item.disabled .page-link{
  background: var(--c-surface); border-color: transparent; color: var(--c-border);
  cursor: not-allowed; box-shadow:none;
}
.pagination .page-item.disabled .page-link:hover{
  background: var(--c-surface); color: var(--c-border); 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(--c-surface); border-color: var(--c-surface); color: var(--c-text);
}
.pagination .page-item:first-child .page-link:hover,
.pagination .page-item:last-child .page-link:hover{
  background: var(--c-accent); border-color: transparent; color: var(--c-white);
}
.pagination .page-item.disabled:first-child .page-link,
.pagination .page-item.disabled:last-child .page-link{
  background: var(--c-surface); color: var(--c-border); 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(--c-border); border-radius: var(--r-pill); background: var(--c-white); overflow:hidden;
  transition: border-color var(--t-fast);
}
.qtyField:focus-within{ border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-glow); }

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

.qty{
  width:56px; height:100%; border:none; background:transparent; text-align:center;
  font-family: var(--f-display); font-weight:600; font-size:1rem; color: var(--c-text);
  -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(--c-accent-dark); border:none; border-radius: var(--r-pill);
  padding: 14px 26px; font-family: var(--f-display); font-weight:600; font-size:.92rem;
  color: var(--c-white); transition: all var(--t-base); position:relative; overflow:hidden;
}
.btn-dark:hover, .btn-dark:focus{
  background: var(--c-accent); color: var(--c-white); transform: translateY(-3px); box-shadow: var(--shadow-accent);
}
.btn-dark:active{ transform: translateY(-1px); }
.btn-dark:disabled{ background: var(--c-border); color: var(--c-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(--f-display); font-weight:600; font-size:.86rem; padding: 10px 22px;
  border-radius: var(--r-pill); border: 1.5px solid var(--c-border); color: var(--c-text-muted); background: var(--c-white);
  cursor:pointer; transition: all var(--t-base);
}
.filter-pill:hover{ border-color: var(--c-accent); color: var(--c-accent-dark); }
.filter-pill.active{ background: var(--c-text); border-color: var(--c-text); color: var(--c-white); }

.product-card{
  border-radius: var(--r-md); overflow:hidden; background: var(--c-white); border:1px solid var(--c-border);
  transition: all var(--t-base);
}
.product-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); }
.product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background: var(--c-surface); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.1); }
.product-quickview{
  position:absolute; inset:0; background: rgba(17, 17, 17, .55); opacity:0; display:flex; align-items:center; justify-content:center;
  transition: opacity var(--t-base);
}
.product-card:hover .product-quickview{ opacity:1; }
.qv-btn{
  background: var(--c-white); color: var(--c-text); font-family: var(--f-display); font-weight:600; font-size:.82rem;
  padding: 10px 20px; border-radius: var(--r-pill); transform: translateY(14px); opacity:0; transition: all var(--t-base) .05s;
}
.product-card:hover .qv-btn{ transform: translateY(0); opacity:1; }
.product-info{ padding:20px; }
.product-info .cat{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--c-accent-dark); font-weight:600; }
.product-info h6{ font-family: var(--f-display); font-size:.98rem; margin: 6px 0 0; color: var(--c-text); }