/* ==========================================================================
   Outlaw Bullets: Our Products (css/pages/shop.css). Owner: the shop/product builder.
   The 18 store products in the live store order, grouped by line (cowboy, BPXL, rifle), each line a ruled
   "price sheet" head with the client's own line description. A filter bar (js/shop.js) narrows by line and
   caliber. Then the shipping callout.
   Cards come from site.css (.products, generated); the shop-<line> markers add the client's note.
   Page-prefixed pieces that might belong in site.css: .shop-filter (a two-row chip filter with a status line).
   ========================================================================== */

/* hidden cards and lines really hide (site.css gives .product display:flex) */
.shop-line[hidden],
.products > .product[hidden] { display: none; }

.shop-head { padding-bottom: var(--sp-6); }
.shop-head .page-head__title { margin-bottom: 0; }

/* --- filter bar --- */
.shop-filter {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--paper-hi);
  border: 3px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -8px;
}
.shop-filter[hidden] { display: none; }
@media (min-width: 37.5em) { .shop-filter { padding: var(--sp-5) var(--sp-6); } }
.shop-filter__row { display: grid; gap: var(--sp-2); min-width: 0; }
.shop-filter__label {
  margin: 0;
  font: 700 var(--fs-label)/1.3 var(--f-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}
.shop-filter .chip--text { white-space: normal; text-align: left; line-height: 1.2; }
.shop-filter__status {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px dotted var(--rule-strong);
  font-size: var(--fs-note);
  font-weight: 700;
}
@media (min-width: 48em) {
  .shop-filter__row { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--sp-4); }
}

/* --- one line of bullets --- */
.shop-line { padding-top: var(--sp-8); }
.shop-line:last-of-type { padding-bottom: var(--sp-4); }
.shop-line__head {
  position: relative;
  display: grid;
  gap: var(--sp-3) var(--sp-7);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
}
.shop-line__head::after {          /* the sheet's double rule under each line's head */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--rule-double);
}
.shop-line__title {
  margin: 0;
  font: 400 var(--fs-h2)/1.02 var(--f-display);
  font-size: min(var(--fs-h2), 12vw);
  text-shadow: .03em .025em 0 var(--red-hot);
  text-wrap: balance;
}
.shop-line__intro {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-deep);
  border-left: 6px solid var(--red);
}
.shop-line__intro p { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
/* client: the title runs full width, and the line's quote sits under it, full width (no side-by-side). */

/* --- the cards: three across from 56.25em (the lines hold 9, 3 and 6 bullets, so no row is left short). --- */
@media (min-width: 56.25em) {
  .shop-line__products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .shop-line .product__title { font-size: 2.375rem; }
}
.shop-line .product__note { color: var(--ink); }
@media (min-width: 37.5em) {
  /* the price sits under the meta line; the note (when there is one) closes the card */
  .shop-line .product .price { margin-top: 0; }
  .shop-line .product__note { padding-top: var(--sp-3); }
  .shop-line .product__meta { margin-bottom: var(--sp-3); }
  .shop-line .product .price { margin-bottom: var(--sp-1); }
}

/* --- nothing matches --- */
.shop-empty {
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r);
}
.shop-empty[hidden] { display: none; }
.shop-empty__text { margin: 0; font-size: var(--fs-lede); font-weight: 600; }
@media (max-width: 37.49em) { .shop-empty .btn { width: 100%; } }

/* --- shipping callout --- */
.shop-more__ship { max-width: 60rem; }

@media print {
  .shop-filter, .shop-empty { display: none; }
}

/* tablets (37.5em-56.24em): two columns would leave the 9-bullet and 3-bullet lines a card short, so each
   card is a wide row: photo left, the facts and the client's note beside it */
@media (min-width: 37.5em) and (max-width: 56.24em) {
  .shop-line__products { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .shop-line .product__link {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    grid-template-areas: "photo title" "photo spec" "photo meta" "photo price" "photo note";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    column-gap: var(--sp-5);
    padding: var(--sp-4);
  }
  .shop-line .product__photo { grid-area: photo; margin: 0; }
  .shop-line .product__title { grid-area: title; font-size: 2.25rem; }
  .shop-line .product__spec { grid-area: spec; }
  .shop-line .product__meta { grid-area: meta; }
  .shop-line .price { grid-area: price; }
  .shop-line .product__note { grid-area: note; }
}
@media (min-width: 48em) {
  .shop-filter__row { align-items: start; }
  .shop-filter__label { padding-top: 12px; }
}