/* Listing additions to rk.css (docs/04 §E). Loaded on listing pages only (inc/assets.php).
   rk.css already has .plp-head, .filters, .toolbar, .grid3, .promo, .more, .empty, .seo and .erow. */

/* The filter form wraps the drawer's head, scroll area and footer without adding a box. */
.filters form { display: contents; }

/* Filter tags are links (they work without JS); same look as the prototype's tag buttons. */
.tag a { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); }
.tag a:hover { background: var(--color-surface-2); }

/* "Apply filters" exists only until @rk/plp starts. */
.filters__apply { padding-block: var(--space-5); }

/* Plain fallback grid (search, plugin off). */
.plp-plain { padding-bottom: var(--space-section); }
.plp-plain .pager { margin-top: var(--space-12); font-size: var(--fs-sm); }
.plp-plain .pager .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plp-plain .pager .page-numbers { display: inline-grid; place-items: center; min-width: var(--control-sm); min-height: var(--control-sm); padding-inline: var(--space-3); border-radius: var(--radius-pill); border: var(--border) solid var(--color-line); }
.plp-plain .pager .current { background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink); }

/* Essentials rows with the 1:1 thumbnail on the start side (docs/04 §E). */
.erow--thumb { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.erow--thumb .erow__img { overflow: hidden; }
.erow--thumb .erow__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.erow__name a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* Loading skeletons (@rk/plp). */
.pcard--skel .pcard__media { aspect-ratio: 4 / 5; background: var(--color-plate); border-radius: var(--radius-media); }
.pcard--skel .pcard__body { display: grid; gap: var(--space-2); padding-top: var(--space-4); }
.skel { display: block; height: var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); }
.skel--short { width: 60%; }
.erow--skel > div { display: grid; gap: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .pcard--skel .pcard__media, .erow--skel .erow__img, .skel { animation: rk-skel var(--dur-slow) var(--ease) infinite alternate; }
}
@keyframes rk-skel { to { opacity: 0.5; } }

@media (max-width: 1099px) {
  /* Without JS the filters stay in the page above the results instead of an off-screen drawer. */
  .plp:not([data-ready]) .filters { position: static; z-index: auto; width: auto; transform: none; box-shadow: none; }
  .plp:not([data-ready]) .btn-filter,
  .plp:not([data-ready]) .filters__close,
  .plp:not([data-ready]) .filters__foot { display: none !important; }
}

@media (max-width: 767px) {
  .erow--thumb { grid-template-columns: auto minmax(0, 1fr) auto; }
  .erow--thumb .erow__img { grid-row: span 2; }
  .erow--thumb > div:nth-child(2) { grid-row: span 2; }
  .erow--thumb .erow__act { grid-column: 3; }
}

/* Landings (docs/05 §2): brand logo in the head, department sub-category tiles above the grid. */
.plp-head--landing .feature { margin-top: var(--space-2); }
.landing-logo img { display: block; inline-size: auto; max-inline-size: 12rem; block-size: auto; max-block-size: 4rem; object-fit: contain; }
.plp-subcats { padding-bottom: var(--space-10); }

/* 1 product (docs/05 §4): "More in {department}" links under the card. */
.one-more { display: grid; gap: var(--space-4); padding-top: var(--space-10); }

/* Former inline styles (docs/10 §1). */
.filters__actions { display: flex; gap: var(--space-3); align-items: center; }
.fgroup--plain { padding-block: var(--space-4) var(--space-5); }
.fgroup--plain .field__label { margin-bottom: var(--space-3); }
.stack { display: grid; gap: var(--space-4); }
.section--bleed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }