/* Port polish (PX-14, PX-17). NOT generated: hand-written overrides loaded after every bundle (devir_ported_listing_nav).
   Tokens only (--c-*, --s-*, --p-*). If a rule here belongs in the mock CSS, it is listed in the PORTPOLISH README as a mock change. */

/* PX-17: ledger meta "N products . Powered by BGG" on one right-aligned line. The pagehead copy of the attribution only shows when the list
   below carries one (no BGG data on the page, no attribution); the list's own copy is then redundant. */
.dv-pagehead .dv-ledger-head__meta { align-items: baseline; flex-wrap: nowrap; white-space: nowrap; margin-inline-start: auto; justify-content: flex-end; }
.dv-pagehead .dv-pagehead__bgg { display: none; }
.dv-listing:has(.dv-results [data-comp="bgg-attribution"]) .dv-pagehead .dv-pagehead__bgg,
.page-main:has(.dv-results [data-comp="bgg-attribution"]) .dv-pagehead .dv-pagehead__bgg { display: inline; }
.dv-pagehead .dv-bgg { font: var(--t-label); text-transform: uppercase; letter-spacing: var(--p-track-label); color: var(--s-text-muted); }
.dv-results > p:has(> .dv-bgg[data-comp="bgg-attribution"]) { display: none; }

/* PX-14: "Log in to see prices" on one line in the wide row, where the price column is otherwise 80 px. Phones keep the wrapping fallback (no overflow at 390). */
@container dvrow (min-width: 760px) {
  .dv-row { grid-template-columns: var(--c-cover-row) minmax(0, 1fr) var(--p-96) var(--p-160) calc(var(--p-280) + var(--p-8)); }
  .dv-row__price .devir-login-cta a { white-space: nowrap; }
}

/* HOMECOVER: dv-nocover tile on the home shelves that the listing CSS does not size (lead product of New arrivals, Best sellers mini cover). */
.dv-leadp__cover > .dv-nocover { grid-area: 1 / 1; margin: calc(-1 * var(--s-sp-4)); width: calc(100% + 2 * var(--s-sp-4)); height: calc(100% + 2 * var(--s-sp-4)); }
.dv-rankrow__cover > .dv-nocover { align-items: center; justify-content: center; padding: var(--s-sp-1); }
.dv-rankrow__cover .dv-nocover img { width: auto; height: var(--p-32); }

/* G-01 / G-03: a listing with no filter rail (non-anchor category, or no facet with items) uses the full width; the 240 px rail track is for the rail only. */
.dv-listing:not(:has(.dv-filters)) { grid-template-columns: minmax(0, 1fr); }

/* G-08: a no-cover tile on the home shelves is not a link-looking headline: no underline, name at the plate-driven size, two lines. */
.dv-bggc__cover, .dv-bggc__cover:hover, .dv-card__plate, .dv-card__plate:hover { text-decoration: none; }
.dv-bggc__cover .dv-nocover__name { -webkit-line-clamp: 2; font-size: var(--f-cq-poster); overflow-wrap: break-word; text-decoration: none; }

/* G-14: "Log in to see prices" on one line in the best-seller rows: the price column sizes to its content from 768 up. Phones keep the wrapping fallback. */
@media (min-width: 768px) {
  .dv-rankrow { grid-template-columns: var(--p-72) var(--c-cover-row) minmax(0, 1fr) max-content; }
  .dv-rankrow .devir-login-cta a { white-space: nowrap; }
}

/* I-05: a Maldito row outside the Maldito category (mixed listing, search). The Maldito token set arrives through [data-surface="maldito"] (dv-list-row.phtml), but the row
   text takes its colour from inheritance (a { color: inherit }), and the token scope only sets variables: give the row the Maldito ink itself, as body[data-brand] does on the Maldito page. */
.dv-row[data-surface="maldito"] { color: var(--s-text); }
/* I-04: search with no results. Same wrapper width as the listing, square chips, no Magento notice box. Tokens only. */
.dv-searchempty { display: grid; gap: var(--s-sp-3); align-content: start; justify-items: start; padding-block: var(--s-sp-6); max-width: var(--p-560); }
.dv-searchempty__tips { margin: 0; padding-inline-start: var(--s-sp-4); }
.dv-searchempty__chips { display: flex; flex-wrap: wrap; gap: var(--s-sp-2); }
.dv-searchempty__more a { color: var(--s-text); text-decoration: underline; text-underline-offset: var(--p-2); }
.dv-searchempty__more .dv-chip, .dv-searchempty__more a.dv-chip { text-decoration: none; }
/* Red-team 15: the "Did you mean" line (Magento note message) is styled in the empty state and above results. */
.dv-searchempty p a, .dv-msg.is-info a { color: var(--s-text); font-weight: 600; text-decoration: underline; text-underline-offset: var(--p-2); }
.dv-searchempty p a:hover, .dv-msg.is-info a:hover { text-decoration-thickness: var(--s-rule-w-2); }
.dv-searchempty p a:focus-visible, .dv-msg.is-info a:focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--p-2); }