/**
 * Mercado Mayor / Bazarial — "Listado de tiendas" (Dokan store list)
 * ---------------------------------------------------------------------------
 * Styles dokan-lite/templates/store-lists-loop.php, rendered at /store-listing/.
 *
 * The "Destacado" badge ships as an ordinary in-flow block sitting directly
 * above the store name (`position: relative; top: 10px`), so on a featured
 * store it pushed the name down and the two collided over the banner — the
 * name was half-hidden behind the badge, and featured cards no longer lined up
 * with the rest of the grid, whose names start at the top.
 *
 * Taking the badge out of the flow and pinning it to the top-right fixes both
 * at once: the name reclaims its usual position at the top-left on every card,
 * featured or not, and the badge reads as a corner marker on the card rather
 * than as something stacked on top of the title.
 */

/* Every selector below is prefixed with `body`. Dokan's own style.css uses
   exactly these selectors and is enqueued *after* this file (dokan-style-css
   follows mercado-mayor-store-list-css in the head), so at equal specificity
   Dokan won every tie and the badge stayed where it was. The extra element in
   the selector settles it on specificity instead of load order, which no
   future re-ordering of the queue can undo. */

/* -- Grid view ---------------------------------------------------------- */

body #dokan-seller-listing-wrap.grid-view .store-content .store-data-container {
  position: relative;
}

body #dokan-seller-listing-wrap.grid-view .store-content .store-data-container .featured-favourite {
  position: absolute;
  top: 10px;
  right: 20px;
  left: auto;
  width: auto;
  z-index: 2;
  margin: 0;
  padding: 0;
}

/* The badge now sits over the banner image rather than in a padded row, so it
   needs enough contrast of its own to stay readable on a light photo. */
body #dokan-seller-listing-wrap.grid-view .store-content .store-data-container .featured-favourite .featured-label {
  padding: 3px 11px;
  font-family: var(--mm-font-ui, inherit);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--mm-radius-pill, 999px);
  box-shadow: 0 2px 8px rgba(20, 18, 17, .35);
}

/* Moving the badge out of the flow stops it pushing the name down, but the
   name's <h2> still spans the full card width and would run underneath it —
   invisible for "Slim", a collision for a long store name. Reserving the
   badge's width keeps a long name wrapping before it gets there. Scoped with
   :has() so only featured cards pay for it; where :has() is unsupported the
   name simply keeps the full width, and the badge's own pill and shadow keep
   it legible over the text.

   Dokan zeroes this h2's padding with `padding: 0 !important` on a
   five-class selector, so this one has to be both !important and longer than
   that to win — hence the full chain rather than a short selector. */
body #dokan-seller-listing-wrap.grid-view .seller-listing-content .dokan-seller-wrap .dokan-single-seller:has(.featured-label) .store-wrapper .store-data h2 {
  padding-right: 108px !important;
}

/* -- List view ---------------------------------------------------------- */

/* Same idea in the other view, where the badge floats left above the name.
   Floating it right keeps the two layouts consistent for anyone switching
   between them with the grid/list toggle. */
body #dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-content .store-info .featured-favourite .featured-label {
  float: right;
}