/* ======================================================================
   Hustob Clothier · Shop page refinements
   ====================================================================== */

/* ── Sticky toolbar ────────────────────────────────────────────────── */
.shop-toolbar {
  position: sticky;
  top: clamp(64px, 8vh, 88px);
  z-index: 30;
  width: min(100% - 2rem, var(--hc-max-width));
  margin: clamp(-3rem, -4vw, -2rem) auto 0;
  border: 1px solid var(--hc-border-soft);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  background: rgba(251, 248, 241, .82);
  box-shadow: 0 18px 48px rgba(20,16,10,.10);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
}

.shop-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hc-border-soft);
}

.shop-toolbar__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .85rem;
  color: var(--hc-muted);
  font-family: var(--hc-font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.shop-toolbar__summary strong {
  color: var(--hc-ink);
  font-family: var(--hc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 36, "wght" 420;
  text-transform: none;
}

/* Sort */
.shop-sort {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  white-space: nowrap;
}
.shop-sort label {
  color: var(--hc-muted);
  font-family: var(--hc-font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.shop-sort select {
  min-height: 2.55rem;
  padding: 0 2.4rem 0 1rem;
  border: 1px solid var(--hc-border);
  border-radius: 999px;
  color: var(--hc-ink);
  background-color: #fff;
  font-family: var(--hc-font-sans);
  font-size: .88rem;
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230E0E0E' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--hc-dur) var(--hc-ease), box-shadow var(--hc-dur) var(--hc-ease);
}
.shop-sort select:focus {
  outline: none;
  border-color: var(--hc-ink);
  box-shadow: 0 0 0 4px rgba(14,14,14,.06);
}

/* Category tags (horizontal scroll) */
.cat-tags {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: 1rem .05rem .15rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.cat-tags::-webkit-scrollbar { height: 0; display: none; }

.cat-tag {
  flex: 0 0 auto;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  scroll-snap-align: start;
  border: 1px solid var(--hc-border);
  border-radius: 999px;
  padding: .55rem 1rem;
  color: var(--hc-ink);
  background: var(--hc-cream);
  font-family: var(--hc-font-sans);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background var(--hc-dur) var(--hc-ease), color var(--hc-dur) var(--hc-ease), border-color var(--hc-dur) var(--hc-ease), transform var(--hc-dur) var(--hc-ease);
}
.cat-tag small {
  min-width: 1.5rem;
  padding: .12rem .4rem;
  border-radius: 999px;
  color: var(--hc-muted);
  background: var(--hc-bone);
  font-family: var(--hc-font-mono);
  font-size: .68rem;
  font-weight: 500;
  text-align: center;
  transition: background var(--hc-dur) var(--hc-ease), color var(--hc-dur) var(--hc-ease);
}
.cat-tag:hover, .cat-tag:focus-visible {
  border-color: var(--hc-ink);
  transform: translateY(-1px);
}
.cat-tag.active {
  border-color: var(--hc-ink);
  background: var(--hc-ink);
  color: var(--hc-cream);
}
.cat-tag.active small {
  background: var(--hc-accent);
  color: var(--hc-ink);
}

/* ── Product grid alignment in shop ────────────────────────────────── */
.hc-section .prod-grid { margin-top: 0; }

.size-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .35rem 0 .15rem;
}
.size-pills span {
  min-width: 2.05rem;
  padding: .25rem .5rem;
  border: 1px solid var(--hc-border-soft);
  border-radius: 999px;
  color: var(--hc-muted);
  background: transparent;
  font-family: var(--hc-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
}

/* ── Empty state ───────────────────────────────────────────────────── */
.hc-empty {
  width: min(720px, 100%);
  margin: 0 auto;
  border: 1px dashed var(--hc-border);
  border-radius: 18px;
  padding: clamp(2rem, 5vw, 3rem);
  color: var(--hc-muted);
  background: var(--hc-cream);
  text-align: center;
  font-size: 1rem;
}
.hc-empty::before {
  content: "✦";
  display: block;
  margin-bottom: 1rem;
  color: var(--hc-accent);
  font-size: 1.5rem;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .shop-toolbar {
    position: relative;
    top: auto;
    margin-top: 0;
    border-radius: 14px;
  }
  .shop-toolbar__inner {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
  }
  .shop-sort {
    width: 100%;
    justify-content: space-between;
  }
  .shop-sort select { min-width: 60%; }
}

@media (max-width: 520px) {
  .shop-toolbar {
    width: min(100% - 1rem, var(--hc-max-width));
    padding: .85rem;
  }
  .cat-tag { font-size: .82rem; }
}