/* ===== Shop page ===== */
.shop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.shop-head h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
[dir="rtl"] .shop-head h1 { font-family: var(--font-arabic); }
.shop-head .meta { display: flex; align-items: center; gap: 1rem; }
.shop-count { font-size: 0.8125rem; color: var(--gray-500); }
.shop-sort {
  padding: 0.5rem 0.875rem; border: 1px solid var(--gray-200); border-radius: 0.5rem;
  font: inherit; font-size: 0.8125rem; background: #fff; cursor: pointer;
}
.shop-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 15rem 1fr; } }

/* Results region: sort above the products, pagination below. */
.shop-results { display: flex; flex-direction: column; min-width: 0; }
.shop-toolbar-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.shop-toolbar-top .shop-sort-wrap {
  display: inline-flex; align-items: center; gap: 0.625rem;
}
.shop-sort-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--gray-500); text-transform: uppercase; white-space: nowrap;
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; top: 50%; pointer-events: none;
  translate: 0 -50%;
  width: 0.5rem; height: 0.5rem; border-right: 1.5px solid var(--gray-500);
  border-bottom: 1.5px solid var(--gray-500); rotate: 45deg;
}
[dir="ltr"] .select-wrap::after { right: 0.875rem; }
[dir="rtl"] .select-wrap::after { left: 0.875rem; }
.select-wrap select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  border: 1px solid var(--gray-200); border-radius: 0.5rem;
  font: inherit; font-size: 0.8125rem; background: #fff; cursor: pointer;
}
[dir="rtl"] .select-wrap select { padding: 0.5rem 0.875rem 0.5rem 2.25rem; }

/* Loading state — subtle overlay over the results area. */
.shop-results { position: relative; }
.shop-results.is-loading::before {
  content: ''; position: absolute; inset: 0; z-index: 5;
  background: rgba(255,255,255,0.55); backdrop-filter: blur(1.5px);
  border-radius: 0.75rem;
}
.shop-results.is-loading::after {
  content: ''; position: absolute; top: 3.5rem; left: 50%; z-index: 6;
  width: 1.75rem; height: 1.75rem; margin-left: -0.875rem;
  border: 2px solid var(--gray-200); border-top-color: var(--cube-black);
  border-radius: 50%; animation: cube-spin 0.7s linear infinite;
}
.form.is-busy input, .form.is-busy select,
.form.is-busy .f-option { pointer-events: none; opacity: 0.6; }
@keyframes cube-spin { to { transform: rotate(360deg); } }

.filters-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border: 1px solid var(--gray-200); border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; margin-bottom: 1rem;
}
.filters-toggle svg { width: 1rem; height: 1rem; }
@media (min-width: 900px) { .filters-toggle { display: none; } }
.shop-filters { display: none; }
.shop-filters.open { display: block; }
@media (min-width: 900px) { .shop-filters { display: block; position: sticky; top: 6rem; } }
.f-group { border-bottom: 1px solid var(--gray-200); padding: 1.25rem 0; }
.f-group:first-child { padding-top: 0; }
.f-group h4 {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--gray-500); margin-bottom: 0.875rem;
}
.f-option {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.3125rem 0; font-size: 0.875rem; cursor: pointer;
  color: var(--gray-600);
}
.f-option:hover { color: var(--cube-black); }
.f-option input { accent-color: var(--cube-gold); width: 1rem; height: 1rem; cursor: pointer; }
.f-price-label {
  display: flex; justify-content: space-between; font-size: 0.8125rem;
  margin-bottom: 0.625rem; color: var(--gray-600);
}
.f-price-label strong { color: var(--cube-black); }
input[type=range].f-range { width: 100%; accent-color: var(--cube-gold); cursor: pointer; }
.f-clear {
  margin-top: 1.25rem; width: 100%; text-align: center;
  padding: 0.625rem; border: 1px solid var(--gray-200); border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; transition: all 0.15s;
}
.f-clear:hover { border-color: var(--cube-black); background: var(--gray-50); }
.f-apply {
  width: 100%; margin-top: 1.25rem; justify-content: center;
  font-size: 0.8125rem; padding: 0.625rem;
}
.f-group input[type=text] {
  width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-200);
  border-radius: 0.5rem; font: inherit; font-size: 0.8125rem;
}

/* Server-side pagination bar */
.shop-toolbar-bottom {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 2rem;
}
.cube-pagination .pagination {
  display: flex; align-items: center; gap: 0.375rem; list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap;
}
.cube-pagination .page-item { display: inline-flex; }
.cube-pagination .page-item.disabled .page-link,
.cube-pagination .page-item .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
  border: 1px solid var(--gray-200); border-radius: 0.5rem; color: var(--gray-600);
  background: #fff; text-decoration: none; transition: all 0.15s;
  font-size: 0.8125rem; font-weight: 500;
}
.cube-pagination .page-item .page-link:hover { border-color: var(--cube-black); color: var(--cube-black); }
.cube-pagination .page-item.active .page-link {
  background: var(--cube-black); border-color: var(--cube-black); color: #fff;
  cursor: default;
}
.cube-pagination .page-item.disabled .page-link {
  opacity: 0.45; pointer-events: none;
}
.cube-pagination .page-item .page-link[rel="prev"],
.cube-pagination .page-item .page-link[rel="next"] {
  min-width: 2.25rem;
}

@media (max-width: 480px) {
  .cube-pagination .page-item .page-link { min-width: 2rem; height: 2rem; padding: 0 0.375rem; }
  .shop-toolbar-top { justify-content: space-between; width: 100%; }
  .form.is-busy, .shop-results { min-height: 12rem; }
}

.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.shop-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--gray-400);
  padding: 4rem 1rem; font-size: 0.9375rem;
}
.shop-empty svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 0.75rem; display: block; }

.breadcrumb {
  display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--gray-500); margin-bottom: 1.5rem;
}
.breadcrumb a:hover { color: var(--cube-black); }
.breadcrumb svg { width: 0.75rem; height: 0.75rem; }