/* proto-pages-parts.css: dinancars.ca's part pages (templates/search/_parts.html) over the shared frame
   (proto-pages.css): the groups. Dinan's look from cl-site.css's
   tokens: white, near black, their red, square boxes. */
@layer base, kit, site;

@layer site {

.dn-group { margin-top: 8px; }

/* a long backorder group as lines under its cards: name and fit, part number, price, stock, Add */
.dn-rows { margin-top: 20px; border-top: 2px solid var(--site-fg); }
.dn-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 140px 120px 170px; grid-template-areas: "name part price stock add" "fits part price stock add"; align-items: center; column-gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--site-line); }
.dn-row__name { grid-area: name; display: flex; align-items: center; min-height: 40px; overflow-wrap: anywhere; font: 700 16px/1.3 var(--site-font-body); color: var(--site-fg); text-decoration: none; }
.dn-row__name:hover { color: var(--site-accent); }
.dn-row__fits { grid-area: fits; font: 400 15px/1.3 var(--site-font-body); }
.dn-row__part { grid-area: part; font: 400 14px/1.2 var(--site-font-body); }
.dn-row__price { grid-area: price; font: 700 17px/1.2 var(--site-font-body); }
.dn-row > .pp-stock { grid-area: stock; }
.dn-row__add { grid-area: add; }
.dn-row__add .pp-btn { width: 100%; }

/* a card's second button: its pair (name and price on two lines when the card is narrow) or a coil's set of 4 or 6 */
.dn-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; height: auto; min-height: 40px; padding: 6px 10px; line-height: 1.2; text-align: center; }

@media (max-width: 760px) {
  .dn-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "fits fits" "part part" "price stock" "add add"; row-gap: 6px; }
  .dn-row__name { font-size: 15px; }
  .dn-row__fits { font-size: 14px; }
  .dn-row__part { font-size: 13px; }
  .dn-row__price { font-size: 16px; }
}

}