/* Per-product pages and their category page (2026-11-02, Jack t1071u, includes/gg_gen_products.php).
   Shared skeleton, own feel per product: a dark hero panel in the product's tone (steel, navy, slate, graphite: grays
   and navy only, no warm accents), white text on it, the product's render, a one-line promise and a
   "Good for" list. Category page: a grid of product cards. Mobile first; no horizontal overflow at 390 px. */
.gpp--steel { --gpp-a: #1f2a37; --gpp-b: #475569; --gpp-line: #94a3b8; }
.gpp--navy { --gpp-a: #0b1a3a; --gpp-b: #1e3a8a; --gpp-line: #93c5fd; }
.gpp--slate { --gpp-a: #111827; --gpp-b: #334155; --gpp-line: #cbd5e1; }
.gpp--graphite { --gpp-a: #0f1115; --gpp-b: #3f4652; --gpp-line: #d1d5db; }

/* product page hero */
.gpp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 380px); gap: 1.2rem; align-items: center;
  margin: .8rem 0 1.4rem; padding: 1.4rem 1.5rem; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, var(--gpp-a, #1f2a37) 0%, var(--gpp-b, #475569) 100%); }
.gpp-hero h1 { color: #fff; margin: .1rem 0 .3rem; }
.gpp-hero__kicker { margin: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .85; }
.gpp-hero__promise { margin: 0 0 .6rem; font-size: 1.12rem; font-weight: 600; color: #fff; }
.gp .gpp-hero__lede, .gpp-hero__lede { color: #fff; opacity: .92; margin: 0 0 .8rem; }
.gpp-good { border-top: 1px solid var(--gpp-line, #94a3b8); padding-top: .6rem; }
.gpp-good__h { margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.gpp-good ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.gpp-good li { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .3rem .75rem; font-size: .88rem; }
.gpp-hero__pic { border-radius: 14px; overflow: hidden; background: #f3f4f6; }
.gpp-hero__img, .gpp-hero__img img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .gpp-hero { grid-template-columns: 1fr; padding: 1.1rem 1rem; }
  .gpp-hero__pic { max-width: 340px; }
}

/* category page */
.gpp-cat__head { max-width: 820px; margin: .6rem 0 1.4rem; }
.gpp-cat__head h1 { margin: .2rem 0 .4rem; }
.gpp-cat__lede { font-size: 1.08rem; line-height: 1.55; margin: 0 0 .5rem; color: #1f2937; }
.gpp-cat__intro { margin: 0; color: #374151; line-height: 1.55; }
.gpp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gpp-card { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #dfe3e8; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.gpp-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; min-height: 44px; }
.gpp-card__link:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.gpp-card__img, .gpp-card__img img { display: block; width: 100%; height: auto; background: #f3f4f6; }
.gpp-card__img--none { aspect-ratio: 4 / 3; }
.gpp-card__body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1;
  background: linear-gradient(135deg, var(--gpp-a, #1f2a37) 0%, var(--gpp-b, #475569) 100%); color: #fff; }
.gpp-card__name { font-weight: 700; font-size: 1.08rem; color: #fff; }
.gpp-card__line { font-size: .92rem; line-height: 1.45; color: #fff; opacity: .9; flex: 1; }
.gpp-card__go { align-self: flex-start; margin-top: .3rem; padding: .5rem .95rem; border-radius: 999px; background: #fff; color: #0b1a3a; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.gpp-card__link:hover .gpp-card__go { background: #e0e7ff; }
@media (max-width: 480px) { .gpp-cards { grid-template-columns: 1fr; } }
/* pictures of the real item (event displays, gg_product_picture): one 4:3 frame for every card. Our renders are
   centred on white space, so they fill the frame; STLflix photos have mixed shapes, so they fit inside it. */
.gpp-card__img.gpp-pic--render img, .gpp-card__img.gpp-pic--photo img,
.gpp-hero__img.gpp-pic--render img, .gpp-hero__img.gpp-pic--photo img { aspect-ratio: 4 / 3; width: 100%; height: auto; }
.gpp-pic--render img { object-fit: cover; background: #fff; }
.gpp-pic--photo img { object-fit: contain; background: #f3f4f6; }
/* grouped category (event displays): a titled section per group */
.gpp-group { margin: 0 0 2rem; }
.gpp-group__h { font-size: 1.3rem; margin: 0 0 .25rem; color: #111827; }
.gpp-group__line { margin: 0 0 .8rem; color: #374151; }
.gpp-starter { margin: 0 0 1.6rem; padding: .9rem 1rem; border-radius: 14px; background: #0b1a3a; color: #fff; max-width: 820px; }
.gpp-starter__h { margin: 0 0 .15rem; font-weight: 700; font-size: 1.05rem; color: #fff; }
.gpp-starter__line { margin: 0 0 .6rem; color: #fff; opacity: .9; }
.gpp-starter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gpp-starter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: #fff; color: #0b1a3a; font-weight: 700; text-decoration: none; }
.gpp-starter a:hover { background: #e0e7ff; }
.gpp-starter a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.gpp-cat__credit { margin: 1.4rem 0 0; font-size: .85rem; color: #4b5563; max-width: 820px; }
.gpp-cat__credit a { color: #1d4ed8; }

/* product page: builder plus the "You might also like" rail (Jack, Nov 2 2026). Beside the builder from 1200 px,
   below it on tablets and phones. Every card is a link to that product's own page. */
.gp.gpp { max-width: 1500px; }
.gpp-wrap { display: block; }
.gpp-main { min-width: 0; }
.gpp-rail { margin-top: 1.6rem; }
.gpp-rail__h { font-size: 1.05rem; margin: 0 0 .6rem; color: #1f2937; }
.gpp-rail__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; }
.gpp-mini { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .65rem; align-items: center; min-height: 44px; padding: .5rem;
  border-radius: 12px; background: #fff; border: 1px solid #dfe3e8; color: #1f2937; text-decoration: none; }
.gpp-mini:hover { border-color: #64748b; }
.gpp-mini:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.gpp-mini__img, .gpp-mini__img img { display: block; width: 72px; height: 54px; object-fit: contain; border-radius: 8px; background: #f3f4f6; }
.gpp-mini__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gpp-mini__name { font-weight: 700; font-size: .95rem; color: #0b1a3a; }
.gpp-mini__line { font-size: .84rem; line-height: 1.35; color: #374151; }
/* "Goes with" add-ons (event displays), above "You might also like" in the same rail */
.gpp-goes { margin: 0 0 1.2rem; }
.gpp-goes .gpp-mini { border-color: #1e3a8a; border-width: 2px; }
@media (min-width: 1200px) {
  .gpp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.4rem; align-items: start; }
  .gpp-rail { margin-top: 0; }
  .gpp-rail__list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .gpp-rail__list { grid-template-columns: 1fr; } }