/* =====================================================
   MUBSELL — market.css
   Dense marketplace landing (Jumia / e.mox style) in the
   MUBSell blue theme. Markup: components/mx-*.php
   Design notes:
     · white page, generous whitespace, no card borders
     · product image sits on a soft grey tile, object-fit:contain
     · every section = bold title left + "View All ›" right
     · brand blue #1A73E8, logo blue #0A1AFF for accents
   ===================================================== */

.mx{ max-width:1180px; margin:0 auto; padding:0 18px; }

/* ── section heading ───────────────────────────────── */
.mx-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin:34px 0 14px;
}
.mx-head h2{
  font-family:'Sora',sans-serif; font-weight:800; color:var(--ink);
  font-size:clamp(17px,2.4vw,22px); letter-spacing:-.02em; margin:0;
}
/* The heading itself is the primary target into a category. Styled to
   look like the heading it already was — the affordance is the hover
   and the cursor, not a colour change that would make every rail title
   read as a link-coloured banner. */
.mx-head-link{
  color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.mx-head-link::after{
  content:'›'; font-weight:700; opacity:0; transform:translateX(-4px);
  transition:opacity .15s, transform .15s;
}
.mx-head-link:hover{ color:var(--blue,#1F4E9C); }
.mx-head-link:hover::after{ opacity:1; transform:none; }
.mx-head-link:focus-visible{ outline:2px solid var(--blue,#1F4E9C); outline-offset:3px; border-radius:4px; }

.mx-viewall{
  color:var(--marigold); font-weight:700; font-size:14px;
  white-space:nowrap; text-decoration:none; display:inline-flex; gap:3px;
}
.mx-viewall:hover{ text-decoration:underline; }

/* ── hero: one wide banner + one tall side banner ──── */
.mx-hero{ display:grid; grid-template-columns:2.05fr 1fr; gap:14px; margin-top:16px; }
/* Swipeable: a real horizontal scroller with snap points, so the
   banner can be dragged/flicked back to a slide you missed. Auto-advance
   just scrolls it; it is not a crossfade. */
.mx-slides{
  position:relative; border-radius:14px; min-height:236px;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.mx-slides::-webkit-scrollbar{ display:none; }
.mx-slides.dragging{ cursor:grabbing; scroll-snap-type:none; }
.mx-slide{
  position:relative; flex:0 0 100%; min-width:100%;
  display:flex; align-items:center; scroll-snap-align:center;
  padding:30px 34px; text-decoration:none; color:#fff;
  overflow:hidden; border-radius:14px;
}
.mx-slide-1{ background:linear-gradient(115deg,#0A1AFF,#1A73E8 55%,#3E9BFF); }
.mx-slide-2{ background:linear-gradient(115deg,#0D1B2A,#15305A 60%,#1A73E8); }
.mx-slide-3{ background:linear-gradient(115deg,#0B6E7A,#00A3E0 60%,#37C8B0); }
/* Paid hero banner (admin-designed image + Sponsored label) */
.mx-slide-ad{ background:linear-gradient(115deg,#141C33,#22304F 60%,#2B4470); }

/* Inline SVG category icons (replaced the emoji set — emoji rendered
   differently on every device and never matched the UI line weight). */
.cat-svg{ display:inline-block; vertical-align:-2px; flex:0 0 auto; }
.mx-cat-ic{ display:grid; place-items:center; width:100%; height:100%; color:var(--marigold,#1A73E8); }
.mx-strip-deal .cat-svg, .mx-strip-boost .cat-svg,
.mx-strip-deal svg, .mx-strip-boost svg{ vertical-align:-2px; margin-right:2px; }
.chip .cat-svg{ margin-right:4px; }
.mx-slide-copy{ position:relative; z-index:2; max-width:62%; }
.mx-slide small{
  display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3);
  padding:4px 11px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.04em;
  margin-bottom:11px;
}
.mx-slide h3{
  font-family:'Sora',sans-serif; font-weight:800; color:#fff; margin:0 0 8px;
  font-size:clamp(20px,2.9vw,32px); line-height:1.12; letter-spacing:-.02em;
}
.mx-slide h3 em{ font-style:normal; color:#FFC24C; }
.mx-slide p{ font-size:14px; color:rgba(255,255,255,.9); margin:0 0 15px; line-height:1.5; }
.mx-slide .mx-cta{
  display:inline-block; background:#fff; color:#0A1AFF; font-weight:800;
  font-size:13px; padding:10px 22px; border-radius:99px;
}
.mx-slide-art{
  position:absolute; right:-30px; bottom:-40px; width:44%; max-width:280px;
  opacity:.92; border-radius:16px; transform:rotate(-6deg);
  box-shadow:0 18px 40px rgba(0,0,0,.3); object-fit:cover; aspect-ratio:1;
}
.mx-dots{ display:flex; gap:6px; justify-content:center; padding:11px 0 0; }
.mx-dots i{ width:7px; height:7px; border-radius:99px; background:var(--line); cursor:pointer; transition:.2s; }
.mx-dots i.on{ background:var(--marigold); width:20px; }

.mx-side{
  border-radius:14px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 24px; text-decoration:none; min-height:236px;
  background:linear-gradient(150deg,#1A73E8,#00A3E0 70%,#00C2A8);
}
.mx-side b{
  font-family:'Sora',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(19px,2.4vw,27px); line-height:1.1; position:relative; z-index:2;
}
.mx-side span{ color:#FFC24C; font-size:13px; font-weight:800; letter-spacing:.05em; position:relative; z-index:2; margin-bottom:6px; }
.mx-side small{ color:rgba(255,255,255,.9); font-size:13px; margin-top:7px; position:relative; z-index:2; }
.mx-side-art{
  position:absolute; right:-24px; bottom:-24px; width:62%; opacity:.85;
  border-radius:14px; object-fit:cover; aspect-ratio:1; transform:rotate(-7deg);
}

/* ── circular category rail ────────────────────────── */
.mx-cats{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 2px; }
.mx-cats::-webkit-scrollbar{ display:none; }
.mx-cat{ flex:0 0 118px; text-align:center; text-decoration:none; }
.mx-cat-img{
  width:104px; height:104px; margin:0 auto 9px; border-radius:50%;
  background:var(--blue-tint); display:flex; align-items:center; justify-content:center;
  font-size:38px; overflow:hidden; border:1px solid var(--line);
  transition:transform .18s, box-shadow .18s;
}
.mx-cat:hover .mx-cat-img{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(26,115,232,.22); }
.mx-cat-img img{ width:100%; height:100%; object-fit:cover; }
.mx-cat span{ font-size:13px; font-weight:600; color:var(--ink); display:block; }

/* ── product rail / grid ───────────────────────────── */
/* padding is vertical-only: horizontal padding shrank the track and
   made rail cards 1px narrower than grid cards */
.mx-rail{ display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding:2px 0; scroll-snap-type:x proximity; }
.mx-rail::-webkit-scrollbar{ display:none; }
/* match the grid card exactly (1180px container / 5 cols - gap = 218px)
   so a card in a rail and a card in a grid are the same object */
.mx-rail .mx-card{ flex:0 0 clamp(158px,20%,218px); scroll-snap-align:start; }

/* minmax(0,1fr), NOT 1fr — the whole reason cards came out different
   widths. `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto`
   floor is the item's min-content width: a column is never allowed to
   be narrower than the widest thing inside it. One listing photo whose
   intrinsic width would not shrink measured a 241px min-content, so its
   column went to 241px while the other two collapsed to 143px — on a
   591px phone, one card nearly twice the size of its neighbours.
   A floor of 0 lets every column take its equal share and makes the
   photo fit the card rather than the card fit the photo. */
.mx-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }

/* ── UNIFORM CARDS ──────────────────────────────────────────────
   The grid already stretches every card box to the tallest in its row.
   What it does NOT do is stretch the content: with display:block the
   image, title, rating and price stacked from the top and simply
   stopped, so a card with a one-line title left a gap underneath and
   its price sat higher than its neighbour's. The boxes matched; the
   things you actually look at did not, which is what reads as "some
   cards are bigger than others".

   As a flex column with the price pushed down by margin-top:auto, the
   price of every card in a row lands on the same line — which is the
   thing that makes a grid look tidy. */
.mx-card{
  text-decoration:none; position:relative;
  display:flex; flex-direction:column;
  height:100%;
  /* Belt and braces with minmax(0,1fr) on the columns. A grid or flex
     item defaults to min-width:auto, which is its min-content — so even
     with a zero-floor column, the card itself could refuse to shrink.
     Both have to give way for a photo to fit the card rather than the
     card stretch to the photo. */
  min-width:0;

  /* SKIP THE WORK FOR CARDS NOBODY IS LOOKING AT.
     The feed keeps appending as you scroll — up to forty batches — and
     every card already added stays in the document being laid out,
     styled and painted on every frame. On a fast phone that is
     invisible; on a cheap one it is the reason the page gets heavier
     the further you scroll, which is exactly the "slow on some devices"
     shape.

     content-visibility:auto lets the browser skip all of that for
     anything off screen, and do it the moment it scrolls into view.
     contain-intrinsic-size is the promise about how big the card WOULD
     be — without it every skipped card measures zero, the scrollbar
     lurches, and scrolling upwards jumps.

     320px is measured, not guessed: a rendered card came out at 315px
     at its commonest width. The `auto` keyword is what makes the number
     forgiving — once a card has been laid out once the browser
     remembers its REAL height and uses that instead, so this figure
     only has to be close enough for the very first paint. Card height
     tracks card width (the photo is square), so no single number could
     be right at every screen size anyway.

     Ignored safely by browsers that do not support it — they simply
     render as they always did. */
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}
.mx-card-img{
  position:relative; background:#F1F3F6; border-radius:10px; overflow:hidden;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  /* flex:0 0 auto keeps it square in the column; min-width:0 stops the
     photo inside it dictating how wide the whole card must be. This box
     was measured at a 241px min-content on the live site, which is what
     dragged one grid column to nearly twice its neighbours'. */
  flex:0 0 auto; min-width:0;
}
[data-theme="dark"] .mx-card-img{ background:#1B1B22; }
.mx-card-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease;
}
.mx-card:hover .mx-card-img img{ transform:scale(1.05); }

.mx-wish{
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:#5B6B79; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(13,27,42,.14);
}
.mx-wish:hover{ color:#E0245E; }
.mx-wish.on{ color:#E0245E; }
.mx-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  background:var(--marigold); color:#fff; font-family:'Sora',sans-serif;
  font-weight:800; font-size:11px; padding:3px 8px; border-radius:6px;
}
.mx-badge-hot{ background:#E0245E; }
/* Paid placement label. Deliberately quiet — a sponsored card must be
   clearly identifiable, but it shouldn't shout louder than the product.
   Never remove the label: undisclosed ads are what kill buyer trust. */
.mx-badge-feat{
  background:rgba(15,23,42,.82); color:#fff; font-weight:700;
  font-size:10.5px; letter-spacing:.02em; backdrop-filter:blur(2px);
}

/* "Sponsored" label used on hero slides and promo tiles */
.mx-sponsored{
  display:inline-block; font-style:normal; font-weight:700;
  font-size:10.5px; letter-spacing:.04em; text-transform:none;
  color:#fff; background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  padding:2px 9px; border-radius:99px; margin-bottom:8px;
  position:relative; z-index:2;
}
.mx-promo-tag{
  color:rgba(255,255,255,.86); font-size:12.5px; line-height:1.45;
  position:relative; z-index:2; margin:-6px 0 12px;
}
.mx-slide-ad .mx-slide-copy small.mx-sponsored{ color:#fff; }

.mx-card-title{
  font-size:13px; line-height:1.35; color:var(--ink); font-weight:500;
  margin:9px 0 5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:35px;
}
/* min-height because this row holds one of two different things: star
   glyphs at 13px when a listing has reviews, or the condition word at
   12px when it does not. Measured 21px against 19px, so cards in the
   same rail were two pixels apart for no reason a shopper could see.
   Pinned to the taller of the two. */
.mx-stars{
  display:flex; align-items:center; gap:4px; margin-bottom:5px;
  font-size:12px; min-height:21px;
}
.mx-stars .s{ color:#F2A20C; letter-spacing:-1px; font-size:13px; }
.mx-stars .n{ color:#8A94A6; }
/* margin-top:auto is what actually lines the cards up — it pushes the
   price to the bottom of the flex column, so every price in a row sits
   on the same baseline however long the title above it was.

   flex-wrap stays: on a narrow phone card a discounted price genuinely
   needs two lines rather than being clipped. It no longer makes the
   card taller than its neighbours, because the grid row absorbs it and
   the other cards' prices stay pinned to the same bottom edge. */
.mx-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:auto; }
.mx-price b{ font-family:'Sora',sans-serif; font-weight:800; font-size:14px; color:var(--ink); }
.mx-price s{ color:#98A2B3; font-size:12px; }
.mx-price .cur{ font-size:11px; color:#8A94A6; font-weight:600; }

/* ── three promo tiles ─────────────────────────────── */
.mx-promos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:30px; }
.mx-promo{
  position:relative; border-radius:14px; overflow:hidden; min-height:206px;
  padding:22px; text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end;
}
.mx-promo-a{ background:linear-gradient(140deg,#0A1AFF,#4C8DFF); }
.mx-promo-b{ background:linear-gradient(140deg,#0D1B2A,#1A73E8); }
.mx-promo-c{ background:linear-gradient(140deg,#00806E,#00C2A8); }
.mx-promo em{
  font-style:normal; color:#FFC24C; font-weight:800; font-size:12px;
  letter-spacing:.06em; position:relative; z-index:2; margin-bottom:5px;
}
.mx-promo b{
  font-family:'Sora',sans-serif; font-weight:800; color:#fff; position:relative; z-index:2;
  font-size:clamp(17px,2.1vw,22px); line-height:1.15; margin-bottom:12px;
}
.mx-promo .mx-cta{
  align-self:flex-start; background:#fff; color:#0A1AFF; font-weight:800;
  font-size:13px; padding:8px 18px; border-radius:99px; position:relative; z-index:2;
}
.mx-promo-art{
  position:absolute; top:-10px; right:-20px; width:56%; opacity:.8;
  object-fit:cover; aspect-ratio:1; border-radius:14px; transform:rotate(8deg);
}

/* ── POSTER TILE ────────────────────────────────────────────
   A whole flyer, shown whole.

   THE PROBLEM THIS SOLVES. .mx-promo-art above is decoration: it crops
   to a square, rotates 8deg, fades to 80% and hangs off the corner.
   Perfect behind a headline, ruinous for a poster — a portrait flyer
   run through it becomes a tilted, washed-out slice with the logo and
   the phone number outside the frame.

   contain, NOT cover. cover fills the tile by cropping whatever does
   not fit, and what does not fit is the top and bottom of a portrait
   poster, which is exactly where a flyer puts its name and its call to
   action. contain guarantees the whole artwork is on screen; the
   gradient shows through around it, which is why the tile keeps a
   theme colour.

   The tile also grows taller than a text card: 206px of a wide tile
   leaves a contained portrait image about 190px across, at which point
   its small print is unreadable. 300px is the point where the flyer
   used here becomes legible without the band dominating the page. */
.mx-promo-poster{
  padding:0;
  min-height:300px;
  align-items:center; justify-content:center;
}
.mx-promo-poster-img{
  width:100%; height:100%;
  position:absolute; inset:0;
  object-fit:contain;
  /* No opacity, no rotation, no filter. Somebody designed this. */
}
.mx-promo-poster-cta{
  position:relative; z-index:2;
  margin-top:auto; margin-bottom:14px;
  background:#fff; color:#0A1AFF; font-weight:800; font-size:13px;
  padding:8px 18px; border-radius:99px;
  /* Sits over artwork of unknown colour, so it carries its own
     separation rather than trusting the image behind it. */
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* Every tile in the row matches the tallest, so a poster does not
   leave the text cards floating at a different height. */
.mx-promos{ align-items:stretch; }
.mx-promo{ height:100%; }

/* ── POSTER ON A NARROW SCREEN ──────────────────────────────
   Below 900px the three tiles stack one per row, so the poster finally
   has the full column width — and the desktop rule was throwing it
   away. A fixed 300px height in a 360px-wide tile still renders a
   portrait flyer at 280px across, the same size it gets on desktop,
   with wasted colour down both sides.

   So on a phone the image leads and the tile follows it: full width,
   natural height, nothing cropped and nothing left over. On the flyer
   this is the difference between 38% of its original size and roughly
   full size — the difference between small print you squint at and
   small print you read.

   Most of MUBSell's traffic is here, so this is the case that matters. */
@media (max-width:900px){
  .mx-promo-poster{ min-height:0; display:block; }
  .mx-promo-poster-img{
    position:relative; inset:auto;
    width:100%; height:auto; display:block;
  }
  .mx-promo-poster-cta{
    position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    margin:0; white-space:nowrap;
  }
  /* The stacked tiles no longer share a row, so forcing equal heights
     would stretch the text cards to the poster's height for nothing. */
  .mx-promo{ height:auto; }
}

/* ── wide feature strip ────────────────────────────── */
.mx-wide{
  margin-top:32px; border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(120deg,#0A1AFF,#1A73E8 45%,#00A3E0);
  padding:34px 30px; text-align:center; text-decoration:none; display:block;
}
.mx-wide b{
  display:block; font-family:'Sora',sans-serif; font-weight:800; color:#fff;
  font-size:clamp(19px,3vw,29px); margin-bottom:8px; position:relative; z-index:2;
}
.mx-wide p{ color:rgba(255,255,255,.92); font-size:14px; margin:0 auto 16px; max-width:520px; position:relative; z-index:2; }
.mx-wide .mx-cta{ display:inline-block; background:#fff; color:#0A1AFF; font-weight:800; font-size:14px; padding:11px 26px; border-radius:99px; position:relative; z-index:2; }
.mx-wide-strip{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; position:relative; z-index:2; }
.mx-wide-strip img{ width:62px; height:62px; border-radius:12px; object-fit:cover; opacity:.95; }

/* ── responsive ────────────────────────────────────── */
@media (max-width:1024px){
  .mx-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:860px){
  .mx-hero{ grid-template-columns:1fr; }
  .mx-side{ min-height:150px; }
  .mx-promos{ grid-template-columns:1fr; }
  .mx-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mx-slide{ padding:22px; }
  .mx-slide-copy{ max-width:74%; }
}
@media (max-width:560px){
  .mx{ padding:0 12px; }
  .mx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mx-head{ margin:24px 0 11px; }
  .mx-cat{ flex-basis:92px; }
  .mx-cat-img{ width:82px; height:82px; font-size:30px; }
  .mx-slides{ min-height:196px; }
  .mx-slide-art{ width:50%; right:-34px; }
  .mx-wide{ padding:26px 18px; }
  .mx-wide-strip img{ width:46px; height:46px; }
}

/* ── category nav strip under the header ───────────── */
.mx-strip{
  background:var(--paper-card); border-bottom:1px solid var(--line);
  position:sticky; top:57px; z-index:40;
}
.mx-strip-in{
  max-width:1180px; margin:0 auto; padding:9px 18px;
  display:flex; align-items:center; gap:18px;
}
.mx-strip-all{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  font-size:14px; font-weight:700; color:var(--ink); text-decoration:none;
  background:var(--blue-tint); border:1px solid var(--line);
  padding:7px 13px; border-radius:8px;
}
.mx-strip-all:hover{ border-color:var(--marigold); color:var(--marigold); }
.mx-strip-links{
  display:flex; gap:17px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0;
}
.mx-strip-links::-webkit-scrollbar{ display:none; }
.mx-strip-links a{
  font-size:14px; color:var(--charcoal); text-decoration:none;
  white-space:nowrap; padding:4px 0; font-weight:500;
}
.mx-strip-links a:hover{ color:var(--marigold); }
.mx-strip-right{ display:flex; gap:12px; flex:0 0 auto; }
.mx-strip-right a{ font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.mx-strip-deal{ color:#E0245E; }
.mx-strip-boost{ color:var(--marigold); }

@media (max-width:860px){
  .mx-strip{ top:53px; }
  .mx-strip-right{ display:none; }
}
@media (max-width:560px){
  .mx-strip-in{ padding:8px 12px; gap:12px; }
  .mx-strip-all span{ display:none; }
}

/* ── card wrapper: lets an overlay button (e.g. the wishlist heart)
      sit on top of a full-card link without nesting interactive
      elements inside the <a> ── */
.mx-card-wrap{ position:relative; }
.mx-card-wrap .mx-wish{ top:8px; right:8px; }

/* empty state used by the browse grid + wishlist */
.mx-empty{
  grid-column:1 / -1; text-align:center; padding:40px 20px;
  background:var(--paper-card); border:1px dashed var(--line);
  border-radius:var(--radius); color:var(--charcoal); font-size:var(--fs-base);
}

/* ── one card width, everywhere ──────────────────────
   A card in a horizontal rail and a card in a grid must be the same
   object. Both now derive their width from the same per-breakpoint
   value, so nothing looks subtly "off" between sections.
   Desktop grid: 5 cols · Tablet: 4 · Small tablet: 3 · Phone: 2      */
.mx-rail .mx-card{ flex:0 0 calc((100% - 4 * 14px) / 5); }
@media (max-width:1024px){ .mx-rail .mx-card{ flex-basis:calc((100% - 3 * 14px) / 4); } }
@media (max-width:860px){  .mx-rail .mx-card{ flex-basis:calc((100% - 2 * 14px) / 3); } }
@media (max-width:560px){  .mx-rail .mx-card{ flex-basis:calc((100% - 14px) / 2); } }

/* A section nested inside an existing .mx container — inherits the
   parent's horizontal padding instead of adding its own, so its cards
   line up exactly with the grid above it. */
.mx-sub{ display:block; }

/* saved-list change flags — the reason to come back */
.sv-flags{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }
.sv-flag{
  font-size:var(--fs-sm,13px); font-weight:600; padding:6px 12px; border-radius:99px;
  background:var(--blue-tint,#EAF2FF); color:var(--marigold,#1A73E8);
}
.sv-flag.drop{ background:#FDECEF; color:#C0264A; }
.sv-flag.sold{ background:#EEF1F4; color:#5B6B79; }

/* ── category browse controls (sort + price) ───────────── */
.cx-controls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin:0 0 16px;
}
.cx-ctl{ display:flex; flex-direction:column; gap:5px; }
.cx-ctl > span{
  font-size:var(--fs-xs,12px); font-weight:700; color:var(--charcoal,#5B6B79);
  letter-spacing:.02em;
}
.cx-ctl select{
  min-width:172px; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--line,#E0E6EF);
  background:var(--paper-card,#fff); color:var(--ink,#0D1B2A);
  font-family:inherit; font-size:var(--fs-sm,13px); font-weight:600; cursor:pointer;
}
.cx-ctl select:focus{ border-color:var(--marigold,#1A73E8); outline:none; }
.cx-go{
  padding:10px 18px; border:0; border-radius:10px; cursor:pointer;
  background:var(--marigold,#1A73E8); color:#fff; font-weight:700;
  font-family:inherit; font-size:var(--fs-sm,13px);
}
.cx-clear{
  align-self:center; font-size:var(--fs-sm,13px); font-weight:600;
  color:var(--marigold,#1A73E8); text-decoration:underline;
}
@media (max-width:560px){
  .cx-controls{ gap:8px; }
  .cx-ctl{ flex:1 1 calc(50% - 4px); }
  .cx-ctl select{ min-width:0; width:100%; }
}

/* The "Best deals" accent is #E0245E, which measures 3.9:1 on the dark
   surface — under the 4.5 needed for a small text link. Lightened for
   dark mode only; the light theme keeps the deeper pink. */
[data-theme="dark"] .mx-strip-deal{ color:#FF7BA6; }

/* ── ENDLESS FEED ───────────────────────────────────────────
   The home page keeps loading listings as you scroll, so nothing is
   stranded past a cut-off of ten. These styles are only the furniture
   around the grid — the cards themselves are ordinary .mx-card, which
   is the point: what arrives on scroll must be indistinguishable from
   what was there on load. */
.feed-status{
  text-align:center; color:var(--muted,#5B6B79); font-size:13px;
  margin:16px 0 0; min-height:20px;
  /* min-height so the grid does not jump up and down by a line every
     time the message appears and clears. */
}
.feed-end{
  display:flex; justify-content:center; padding:20px 0 8px;
}
.feed-retry{
  font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--blue,#1A73E8); color:#fff; border:0;
  border-radius:99px; padding:10px 22px;
}