/*
 * Shop (shop.html) and Saved items (wishlist.html).
 * Everything here is scoped to .shop-* and .wish-* classes.
 */

/* ------------------------------------------------------------ page head */

.shop-head .breadcrumbs {
  margin-bottom: var(--s-4);
}
.shop-head .breadcrumbs [aria-current='page'] {
  color: var(--ink);
}
.shop-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}
.shop-head__title .page-title {
  overflow-wrap: anywhere;
}
/* "4 pieces" — spec text next to the title */
.shop-head__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
}
.shop-head__count:empty {
  display: none;
}

/* ------------------------------------------------------- filter + sort bar */

.shop-bar {
  border-bottom: 1px solid var(--line);
}
.shop-toolbar {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-3) var(--s-4);
}

/* Category pills: a sideways-scrolling rail on phones, a wrapping row above. */
.shop-filters {
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shop-filters::-webkit-scrollbar {
  display: none;
}
.shop-filters__list,
.shop-filters__list[role='list'] {
  display: flex;
  gap: var(--s-2);
  width: max-content;
  min-height: 52px; /* holds the row open before the pills render */
  margin: 0;
  padding: 4px var(--gutter);
  list-style: none;
}
.shop-filters__list li {
  flex: none;
}
.shop-filters .pill {
  position: relative; /* keeps the visually-hidden count inside the scrolling rail */
  white-space: nowrap;
}

.shop-sort {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.shop-sort__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.shop-sort__select {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding-block: 10px;
}

@media (min-width: 720px) {
  .shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-4);
  }
  .shop-filters {
    margin-inline: 0;
    overflow: visible;
  }
  .shop-filters__list,
  .shop-filters__list[role='list'] {
    width: auto;
    min-height: 44px;
    flex-wrap: wrap;
    padding: 0;
  }
  .shop-sort__select {
    flex: none;
    width: 232px;
  }
}

/* ------------------------------------------------------------- results */

.shop-results,
.wish-results {
  padding-top: var(--s-6);
}
@media (min-width: 900px) {
  .shop-results,
  .wish-results {
    padding-top: var(--s-7);
  }
}

/* Empty states */
.shop-empty__icon,
.wish-empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--stone);
  color: var(--ink);
}
.shop-empty__icon .icon,
.wish-empty__icon .icon {
  width: 26px;
  height: 26px;
}
.shop-empty p,
.wish-empty p {
  font-size: var(--fs-md);
  color: var(--ink-soft);
}

/* Shipping / returns / sizing — one quiet line of spec text under the grid. */
/* [role='list'] matches the reset in styles.css so our padding wins. */
.shop-facts,
.shop-facts[role='list'] {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-8) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.shop-facts:empty,
.shop-facts[role='list']:empty {
  display: none;
}
@media (min-width: 720px) {
  .shop-facts,
  .shop-facts[role='list'] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
  }
  .shop-facts li + li::before {
    content: '/';
    margin-right: var(--s-4);
    color: var(--stone-deep);
  }
}

/* ---------------------------------------------------------- saved items */

.wish-head__note {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--graphite);
}
.wish-head .page-title:focus {
  outline: none;
}
.wish-empty {
  padding-block: var(--s-7) var(--s-6);
}
.wish-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.wish-foot__hint {
  font-size: var(--fs-sm);
  color: var(--graphite);
}
@media (max-width: 479px) {
  .wish-foot .btn {
    width: 100%;
  }
}

/* -------------------------------------------- re-sort / remove animation */
/* Cards glide to their new places (shop.js / wishlist.js use view transitions). */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-group(*) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}