/* =====================================================================
   W.I. Freight — Packaging materials store (uses wif-shop.css as its base)
   ===================================================================== */

.wpm-toolbar { padding: .6rem .8rem; }
.wpm-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.wpm-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 42px;
  padding: 0 1rem;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sh-ink);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.wpm-tab span { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--sh-tint); color: var(--sh-primary); font-size: .75rem; }
.wpm-tab:hover { border-color: rgba(46, 49, 146, .3); }
.wpm-tab.is-active { background: var(--sh-primary); border-color: var(--sh-primary); color: #fff; }
.wpm-tab.is-active span { background: rgba(255, 255, 255, .2); color: #fff; }

.wpm-count { margin: -.5rem 0 1rem .25rem; font-size: .92rem; color: var(--sh-muted); }

.wpm-card[hidden] { display: none; }
.wpm-card h3 { color: var(--sh-ink); }
.wpm-size {
  display: flex; align-items: flex-start; gap: .4rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--sh-muted);
}
.wpm-size .bi { color: var(--sh-accent); margin-top: .1rem; }
.wpm-desc { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--sh-muted); }
.wpm-ask { text-decoration: none; }
.wpm-ask:hover { color: #fff; background: #25d366; }

.wpm-more {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; max-width: 320px;
  height: 50px;
  margin: 1.5rem auto 0;
  border: 1.5px dashed rgba(46, 49, 146, .3);
  border-radius: 16px;
  background: transparent;
  color: var(--sh-primary);
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
}
.wpm-more:hover { background: var(--sh-tint); }
.wpm-more[hidden] { display: none; }
#wpm-empty { margin-top: .5rem; }

.wpm-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  margin-top: 3rem;
  padding: 2.25rem 2.5rem;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(500px 220px at 100% 0, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(420px 220px at 0 100%, rgba(190, 1, 25, .45), transparent 65%),
    linear-gradient(135deg, var(--sh-primary), #1d1f6b);
  box-shadow: 0 30px 60px -30px rgba(20, 22, 58, .6);
}
.wpm-cta h2 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; color: #fff; }
.wpm-cta p { margin: 0; max-width: 34rem; color: rgba(255, 255, 255, .82); line-height: 1.6; }
.wpm-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.wpm-btn-glass { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.wpm-btn-glass:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.wpm-btn-glass .bi { color: #4be083; }

@media (max-width: 575px) {
  .wpm-toolbar { flex-direction: column; align-items: stretch; }
  .wpm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wpm-tab { flex: 0 0 auto; height: 38px; padding: 0 .8rem; font-size: .9rem; }
  .wsh-sort select { width: 100%; }
  .wsh-sort { width: 100%; }
  .wpm-size { font-size: .75rem; }
  .wpm-cta { padding: 1.6rem 1.25rem; border-radius: 22px; }
  .wpm-cta-actions .wsh-btn { flex: 1 1 100%; }
}

/* Shorter cards (22 Oct 2026): wide 4:3 picture instead of a square, tighter spacing */
.wsh .wpm-card .wsh-card-img { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; padding: .85rem; }
.wsh .wpm-card .wsh-card-img img { min-height: 0; max-height: 100%; }
.wpm-card .wsh-card-body { gap: .35rem; padding: .8rem 1rem 1rem; }
.wpm-card .wsh-card-foot { padding-top: .25rem; }

/* the whole product card opens the order (packing-material-store.php sends card clicks to its Order link) */
.wpm-card { cursor: pointer; }
.wpm-card:hover .wpm-order { background: var(--sh-accent, #be0119); color: #fff; }