/* ============================================================
   SHOPTER.AI — PRODUCT-FIRST LAYOUT
   ============================================================
   Include on every page, AFTER shopter-a11y.css:
       <link rel="stylesheet" href="shopter-ui.css">

   WHAT THIS DOES
   The app was laid out like a consumer app: three columns of
   thumbnails on a phone, bordered cards, badges and gradients
   layered over the photography, and the brand accent used on
   every surface.

   Luxury retail does the opposite. Look at SSENSE, Net-a-Porter
   or Mytheresa: large product photography, information set
   quietly beneath it, almost no colour, and nothing competing
   with the item itself.

   These rules apply that treatment everywhere at once, so the
   design can't drift page to page the way the settings menus
   did.
   ============================================================ */

/* ── 1. ICONS ──────────────────────────────────────────────── */
.ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;flex-shrink:0}
.ic svg{width:100%;height:100%;display:block}
.ic-sm{width:16px;height:16px}
.ic-lg{width:22px;height:22px}

/* ── 2. PRODUCT GRIDS ──────────────────────────────────────── */
/* Three columns made every photo a thumbnail. Two roughly triples
   the image area, and 3:4 is how fashion is actually shot. */
/* .closet-grid deliberately excluded here and below. Closet manages
   its own layout: its cards carry absolutely-positioned source
   badges, tags and action rows that the shopping feed cards do not.
   Forcing the feed rules onto it displaced those badges onto the
   item text. */
#items-grid,
.grid,
.grid-2col,
.items-grid,
.listings-grid,
.wish-grid{
  display:grid!important;
  /* minmax(0,1fr) not 1fr — plain 1fr lets long content push a column
     wider than its neighbour, which made Resale's columns 227px and 205px
     instead of equal. */
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:22px 12px!important;
}
@media (min-width:700px){
  #items-grid,.grid,.grid-2col,.items-grid,
  .listings-grid,.wish-grid{
    grid-template-columns:repeat(3,1fr)!important;
  }
}

/* ── 3. CARDS ──────────────────────────────────────────────── */
/* No card. The photograph is the card. */
.item-card,
.listing-card,
.wish-card,
.result-card{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  /* position:relative kept — absolutely positioned badges inside a card
     anchor to it. Without this they anchor to the page and land on the
     text below, which is what broke Closet. */
  position:relative;
}

/* overflow is NOT forced open. Closet clips its source badge with
   overflow:hidden; overriding that let the badge escape the card. */

.item-img-wrap,
.listing-img-wrap,
.wish-img-wrap{
  position:relative;
  aspect-ratio:3/4!important;
  border-radius:3px;
  overflow:hidden;
  background:#F2F1EE;
}
/* Scoped to images inside a sized wrapper. Unscoped, height:100% made
   the image fill the whole card on pages whose cards aren't a fixed
   height — which pushed Closet's source badge onto the item text. */
/* Descendant, not direct child — the image isn't always an immediate
   child of its wrapper. */
.item-img-wrap .item-img,
.listing-img-wrap .listing-img,
.wish-img-wrap .wish-img,
.item-img-wrap img,
.wish-img-wrap img{
  width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important;
}

/* Information sits under the photograph, never on top of it */
.item-info,.listing-info,.wish-info{
  padding:10px 1px 0!important;
  background:transparent!important;
  border:none!important;
}

.item-brand,.listing-brand,.wish-brand{
  font-size:11px!important;
  letter-spacing:1.4px!important;
  text-transform:uppercase;
  font-weight:700!important;
  color:var(--text)!important;
  opacity:0.55;
  margin-bottom:5px!important;
}
.item-name,.listing-name,.wish-name{
  font-family:var(--font-b)!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.35!important;
  color:var(--text)!important;
  margin-bottom:6px!important;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.item-price,.listing-price,.wish-price{
  font-family:var(--font-b)!important;
  font-size:15px!important;
  font-weight:700!important;
  color:var(--text)!important;
}
.item-price-old,.price-orig,.wish-orig,.listing-retail{
  font-size:12px!important;opacity:0.45;text-decoration:line-through;font-weight:500!important;
}

/* ── 4. ON-IMAGE CONTROLS ──────────────────────────────────── */
/* One neutral treatment. Previously each was a different colour
   with its own glow, all shouting over the product. */
.item-heart,.item-tryon-icon,.wish-heart,.closet-heart{
  background:rgba(255,255,255,0.86)!important;
  backdrop-filter:blur(6px);
  border:none!important;
  color:#07090A!important;
  width:30px!important;height:30px!important;
  display:flex!important;align-items:center;justify-content:center;
  border-radius:50%!important;
  box-shadow:none!important;
  padding:0!important;
}
.item-heart .ic,.item-tryon-icon .ic{width:16px;height:16px}
.item-heart.on{color:#E4573D!important}
.item-heart.on svg{fill:currentColor}

/* One badge, quiet, square-ish — not a stack of coloured pills */
.item-badge,.listing-badge{
  background:rgba(7,9,10,0.78)!important;
  color:#FFFFFF!important;
  border:none!important;
  font-size:10px!important;
  letter-spacing:0.8px;
  text-transform:uppercase;
  font-weight:700!important;
  padding:4px 9px!important;
  border-radius:2px!important;
}

/* Seller avatar on the photograph */
.item-seller-chip{
  position:absolute;bottom:8px;left:8px;display:flex;align-items:center;
  background:rgba(255,255,255,0.86);backdrop-filter:blur(6px);
  border-radius:100px;padding:3px;z-index:2;text-decoration:none;
}
.item-seller-av{
  width:20px;height:20px;border-radius:50%;background:transparent;color:#07090A;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-family:var(--font-b);
}

/* ── 5. NAV & SEARCH ───────────────────────────────────────── */
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  border:0.5px solid var(--border2);background:transparent;color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;
}
.icon-btn:hover{border-color:var(--text)}

.search-bar{
  border-radius:2px!important;
  background:transparent!important;
  border:0.5px solid var(--border2)!important;
}
/* The row holds a search field plus three round buttons. The field has to
   be the thing that shrinks — otherwise it holds its width and pushes the
   buttons off the edge of the screen, which is exactly what was happening:
   the camera was clipped and the filter button squashed to 20px. */
.search-wrap,.search-section > div:first-child{
  display:flex!important;align-items:center;gap:10px!important;min-width:0;
}
.search-bar{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important}
/* The input inside must shrink too. Without this it keeps its own width,
   spills past the field border and runs underneath the mic button. */
.search-bar .search-input{flex:1 1 auto!important;min-width:0!important;width:100%!important;
  text-overflow:ellipsis}
.mic-search-btn,.camera-btn,.mic-btn,.filter-open-btn{
  flex:0 0 42px!important;
  width:42px!important;height:42px!important;min-width:42px!important;
  border-radius:50%!important;
  background:transparent!important;border:0.5px solid var(--border2)!important;
  color:var(--text)!important;box-shadow:none!important;
  display:flex!important;align-items:center;justify-content:center;padding:0!important;
}
.mic-search-btn .ic,.camera-btn .ic,.filter-open-btn .ic{width:19px;height:19px}

/* One filled control per row, so there's a single obvious primary action.
   It follows the theme — a white circle would vanish on a white page. */
.camera-btn{background:var(--text)!important;color:var(--bg)!important;border:none!important}

/* ── 6. RESTRAINT ──────────────────────────────────────────── */
/* The accent worked everywhere, which meant it worked nowhere.
   Glows removed; green kept for genuine emphasis only. */
.bnav-sell-icon,.sell-fab,.scan-btn{box-shadow:none!important}
.story-av{border-color:var(--border2)!important;border-width:0.5px!important}
.story-name{font-size:11px!important;letter-spacing:0.2px;opacity:0.7}

/* ── 7. BOTTOM NAV ─────────────────────────────────────────── */
.shopter-bnav-icon{display:flex;align-items:center;justify-content:center;height:22px}
.shopter-bnav-icon .ic{width:21px;height:21px}

/* ── 8. SAFETY ─────────────────────────────────────────────── */
/* Nothing should ever push the page sideways. */
html{overflow-x:hidden}
body{max-width:100%;overflow-x:hidden}
nav{min-width:0}
.nav-title,.logo{min-width:0}

/* ── 9. NAV — ONE HEIGHT EVERYWHERE ────────────────────────
   Heights ranged from 60px to 77px page to page, because each
   page carried its own padding and button sizes. Standardised
   here so the header doesn't jump when you move between pages. */
nav{
  min-height:60px!important;
  height:60px!important;
  padding:0 16px!important;
  gap:10px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box;
}
nav .logo,nav .nav-title{
  font-size:21px!important;
  line-height:1!important;
  margin:0!important;
  /* The logo takes the spare room, so the bell, Settings and avatar sit
     together at the right. Without this, navs using space-between push
     the settings group into the middle of the bar. */
  flex:1 1 auto!important;
  min-width:0;
}
/* Controls stay grouped at the right edge */
nav > *:not(.logo):not(.nav-title){flex:0 0 auto!important}
/* Every round control in the nav is the same size */
nav .shopter-settings-btn,nav .settings-btn{
  height:34px!important;padding:0 14px!important;
  border-radius:100px!important;font-size:13px!important;
  display:flex!important;align-items:center;gap:6px;
  border:0.5px solid var(--border2)!important;background:transparent!important;
  color:var(--text)!important;white-space:nowrap;flex-shrink:0;
}
nav #shopter-notif-bell,nav .back-nav,nav #nav-av,nav .nav-profile,nav .nav-av{
  width:34px!important;height:34px!important;
  border-radius:50%!important;flex-shrink:0;
  display:flex!important;align-items:center;justify-content:center;
  border:0.5px solid var(--border2)!important;
  background:transparent!important;color:var(--text)!important;
  font-size:14px!important;text-decoration:none;
}
nav #shopter-notif-bell .ic,nav .back-nav .ic{width:17px;height:17px}

/* Small mics — the ones sitting in a search row beside the camera.
   Same size and treatment as that camera button. */
.mic-search-btn,
.search-wrap .mic-btn{
  width:42px!important;height:42px!important;min-width:42px!important;
  border-radius:50%!important;background:transparent!important;
  border:0.5px solid var(--border2)!important;color:var(--text)!important;
  display:flex!important;align-items:center;justify-content:center;
  padding:0!important;box-shadow:none!important;flex-shrink:0;
}
.mic-search-btn .ic,.search-wrap .mic-btn .ic{width:19px!important;height:19px!important}

/* Hero mic — Voice Search. This is the whole point of that page, so it's
   the filled, unmissable control, same treatment as Discover's camera.
   Scoped to .hero-mic: other pages use .mic-btn for small buttons. */
.hero-mic{
  width:120px!important;height:120px!important;min-height:120px!important;
  border-radius:50%!important;
  background:var(--text)!important;color:var(--bg)!important;
  border:none!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;flex-shrink:0;
}
.hero-mic .ic{width:48px!important;height:48px!important}
.hero-mic.listening{background:var(--green)!important;color:#07090A!important}

/* Any other .mic-btn stays a small control */
.mic-btn:not(.hero-mic){
  width:42px!important;height:42px!important;min-width:42px!important;
  border-radius:50%!important;background:transparent!important;
  border:0.5px solid var(--border2)!important;color:var(--text)!important;
  display:flex!important;align-items:center;justify-content:center;
  padding:0!important;box-shadow:none!important;flex-shrink:0;
}
.mic-btn:not(.hero-mic) .ic{width:19px!important;height:19px!important}
/* "Ask the stylist" buttons: same 42px height everywhere. Width is free —
   icon-only on Occasion Styling, icon plus label on Style Twin. */
.twin-mic-btn{
  height:42px!important;min-height:42px!important;
  border-radius:100px!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
}
.twin-mic-btn .ic{width:18px!important;height:18px!important}
/* Listening state — one treatment everywhere */
.mic-btn.listening,.mic-search-btn.listening,.twin-mic-btn.listening{
  border-color:var(--green)!important;color:var(--green)!important;
  background:var(--green2)!important;
}

/* ── 10. CARD CONTENT — BREATHING ROOM ─────────────────────
   Resale carried condition, token reward, a seller line and a
   buy button under every photo. In a two-column grid that's
   seven stacked rows in ~227px, which reads as cramped. The
   buy button also duplicated tapping the card. All of it still
   exists on the item page. */
.item-card .item-condition,
.item-card .token-reward,
.item-card .item-seller,
.item-card .item-buy-btn,
.listing-card .item-condition,
.listing-card .token-reward{ display:none!important; }

/* Slightly more air between the remaining three lines */
.item-info,.listing-info,.wish-info{ padding:12px 1px 0!important; }
.item-brand,.listing-brand{ margin-bottom:6px!important; }
.item-name,.listing-name{ margin-bottom:7px!important; }

/* ── 11. INPUT ROWS MUST FIT ───────────────────────────────
   Same failure as the search row: the text field held its own
   width, so the buttons beside it were pushed off the screen.
   On Occasion Styling that hid both "Style Me" and the mic. */
.twin-input-wrap{
  display:flex!important;align-items:center;gap:8px!important;
  min-width:0;flex-wrap:nowrap;
}
.twin-input-wrap .twin-input{
  flex:1 1 auto!important;min-width:0!important;width:auto!important;
}
.twin-input-wrap .twin-style-btn{
  flex:0 0 auto!important;white-space:nowrap;padding:12px 16px!important;
}
.twin-input-wrap .twin-mic-btn{
  flex:0 0 42px!important;width:42px!important;min-width:42px!important;
}

/* ── 12. ROWS THAT MUST NOT PUSH CONTROLS OFF SCREEN ───────
   body has overflow-x:hidden, which stops the page sliding but
   also means anything past the edge is simply unreachable. On
   Alerts a "Follow anyway" button sat 225px off screen; on
   Closet a tab was clipped. These rows now let their text
   shrink so the controls stay inside. */
.brand-row,.brand-result,.alert-row{
  display:flex!important;align-items:center;gap:10px!important;min-width:0;
}
.brand-info,.alert-body{min-width:0!important;flex:1 1 auto!important;overflow:hidden}
.brand-name,.brand-followers{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.follow-btn{flex:0 0 auto!important;max-width:44vw}

/* Tab rows: scrollable rather than clipped */
.tabs{overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{flex:0 0 auto!important;white-space:nowrap}

/* Any input sitting in a row keeps its buttons on screen */
.budget-row,.input-row,.budget-input-row,.track-input-row{display:flex!important;gap:8px;min-width:0}
.budget-row input,.input-row input,.budget-input-row input,.track-input-row input{
  flex:1 1 auto!important;min-width:0!important;width:auto!important;
}
.track-input-row button{flex:0 0 auto!important;white-space:nowrap}
.budget-input-row button{flex:0 0 auto!important;white-space:nowrap}

/* Two-up card grids: 1fr lets a long brand name push the column wider
   than the screen, taking its Follow button with it. */
.brands-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.brand-card{min-width:0!important}
.brand-card .brand-info{min-width:0!important;flex:1 1 auto!important;overflow:hidden}
.brand-card .brand-name,.brand-card .brand-followers{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand-card .follow-btn{flex:0 0 auto!important}

/* ── 13. ONE FILLED ACTION PER SCREEN ──────────────────────
   Luxury retail keeps chrome monochrome and lets the product
   carry the colour. The pattern already working on Discover —
   filled camera, outlined mic — applied everywhere: primary
   action filled in the text colour, everything supporting it
   outlined. Green is kept for the wordmark, the token mark,
   the Sell button, and genuine state (active, listening,
   success), not for every button on the page. */

/* Primary actions — the one thing you're meant to press */
.save-btn,.submit-btn,.become-btn,.add-listing-btn,.empty-btn,
.btn-primary,.modal-submit,.aff-main-btn,.send-btn,.comment-send,
.fs-apply,.item-buy-btn,.buy-now-main,.publish-btn,.cont-btn,
.cta-btn,.twin-style-btn,.style-btn,.provenance-sell-btn,
.item-action-btn,.wish-buy-btn,.alert-btn,.budget-set-btn,
.track-btn,.compute-btn,.post-btn,.hero-btn,.profile-action-btn,
.nav-follow,.follow-btn{
  background:var(--text)!important;
  color:var(--bg)!important;
  border:none!important;
  box-shadow:none!important;
}
/* Their labels sit in the display face on some pages — keep that,
   just make sure the colour follows the fill. */
.save-btn *,.submit-btn *,.become-btn *,.fs-apply *,
.item-buy-btn *,.publish-btn *,.cta-btn *{color:inherit!important}

/* Supporting actions stay outlined so the primary one stands out */
.secondary-btn,.btn-secondary,.ghost-btn,.cancel-btn,
.photo-btn,.qr-save-btn,.ss-qr-btn,.hrefresh{
  background:transparent!important;
  border:0.5px solid var(--border2)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}

/* Green earns its place in three situations only */
.bnav-sell-icon{background:var(--green)!important;color:#07090A!important}   /* the marketplace's core action */
.logo span,.nav-title span{color:var(--green)!important}                     /* the wordmark */
.chip.active,.filter-btn.active,.tab.active,.seg-btn.active,
.cat-tab.active,.tf-btn.active,.btab.active,.accent-chip.active{
  background:var(--green2)!important;
  border-color:var(--border)!important;
  color:var(--green)!important;
}
/* Listening / recording — a real live state, worth the colour */
.mic-btn.listening,.mic-btn.on,.twin-mic-btn.on,.hero-mic.listening{
  background:var(--green)!important;color:#07090A!important;border-color:var(--green)!important;
}

/* Glow was the other thing making it read as an app rather than a house */
.save-btn,.submit-btn,.cta-btn,.bnav-sell-icon,.big,
.item-buy-btn,.publish-btn{box-shadow:none!important}

/* The token mark is brand, not a button — it keeps the green */
.token-badge{background:var(--green2)!important;color:var(--green)!important;
  border:0.5px solid var(--border)!important}

/* Background swatches on Style Twin are colour samples, left alone */
.bg-chip{border:0.5px solid var(--border2)!important}

/* Toggles that show which option is selected keep the green — that's
   state, not decoration. Women/Men, Buying/Selling, Following. */
.gender-toggle-btn.active,.toggle-btn.active,.seg-btn.active{
  background:var(--green)!important;color:#07090A!important;border-color:var(--green)!important;
}
.follow-btn.following,.nav-follow.following{
  background:var(--green2)!important;color:var(--green)!important;
  border:0.5px solid var(--border)!important;
}

/* On a 360px screen the nav can run out of room. The Settings label is
   the first thing that can go — the gear still says what it does. */
@media (max-width:380px){
  nav .shopter-settings-btn{
    width:34px!important;padding:0!important;gap:0!important;
    font-size:0!important;justify-content:center;
  }
  nav .shopter-settings-btn .ic{margin:0!important}
}

/* ── 13. SETTINGS PANEL ────────────────────────────────────
   The panel is anchored right, but with no width cap its own
   content could stretch it until it touched the left edge —
   so it read as a full-width sheet opening from the wrong side. */
.shopter-settings-panel{
  width:auto!important;
  max-width:min(280px,calc(100vw - 24px))!important;
  left:auto!important;
  right:12px!important;
}
.shopter-settings-panel .ssp-link,
.shopter-settings-panel .ssp-btn{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── 14. NAV CANNOT OVERFLOW ───────────────────────────────
   A user on iOS reported the Settings button clipped at the
   right edge. I could not reproduce it at any width or text
   size, so rather than guess at the cause, these rules make
   overflow structurally impossible on any device:
   the logo yields space first, and if it still will not fit,
   the Settings label hides and leaves its icon. */
nav{
  overflow:hidden!important;
  padding-right:12px!important;
  box-sizing:border-box;
}
nav .logo,nav .nav-title{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  min-width:0!important;
}
/* Controls never shrink and never get pushed out */
nav .shopter-settings-btn,
nav #shopter-notif-bell,
nav #nav-av,
nav .nav-profile,
nav .back-nav{
  flex:0 0 auto!important;
}
/* Keep the word "Settings" visible. An earlier version hid the label
   below 380px, leaving a bare gear icon that users read as a theme
   toggle and never tapped — they reported Settings as missing. The
   label stays; the logo yields space instead. */
nav .shopter-settings-btn{
  font-size:13px!important;
  padding:0 12px!important;
  width:auto!important;
  white-space:nowrap!important;
}
@media (max-width:379px){
  nav .shopter-settings-btn{padding:0 10px!important;font-size:12px!important}
  nav .logo,nav .nav-title{font-size:18px!important}
}

/* Some navs carry an extra block between the title and the controls
   (a link row on Sell, a tagline on LTK). Those must yield space too,
   or they push Settings past the edge. */
nav .nav-right,
nav > div:not(.nav-title):not([id]){
  min-width:0!important;
  overflow:hidden!important;
  flex:0 1 auto!important;
}
nav .nav-right{
  display:flex!important;align-items:center;gap:8px;
  overflow-x:auto!important;scrollbar-width:none;
}
nav .nav-right::-webkit-scrollbar{display:none}

/* ── 15. PRODUCT FIRST ─────────────────────────────────────
   Feedback: people open these pages to see items, not to read.
   Measured before this rule, the first product sat at 496px on
   Discover, 854px on Resale, 1872px on Closet — a screen or more
   of copy, banners and promotions ahead of anything to buy.

   Nothing is deleted. The marketing blocks move below the first
   rows of product, where someone browsing will still meet them. */
/* These blocks sit directly on <body>, which is display:block, so
   `order` alone does nothing. Making body a flex column lets the
   product grid move above the promotional blocks without touching
   the markup on any page. */
/* Reordering the feed needs body to be a flex column — but that makes
   every direct child a flex item, and on pages like Closet it stretched
   card rows to fill space, creating large gaps. Restricted to the pages
   that actually need the reorder. */
body.shopter-feed-order{display:flex!important;flex-direction:column!important}
body.shopter-feed-order > *{flex:0 0 auto}
body.shopter-feed-order > nav{order:0}
body.shopter-feed-order > .search-section,
body.shopter-feed-order > .stories-bar,
body.shopter-feed-order > .filter-row,
body.shopter-feed-order > .filter-tabs,
body.shopter-feed-order > .sort-bar{order:1}
body.shopter-feed-order > .grid-wrap,
body.shopter-feed-order > #items-grid,
body.shopter-feed-order > .wrap{order:2}
/* Marketing and context move below the first product rows */
body.shopter-feed-order > .hero,
body.shopter-feed-order > .ticker-bar,
body.shopter-feed-order > .pulse-tucked,
body.shopter-feed-order > .token-banner,
body.shopter-feed-order > .charity-banner{order:3}
body.shopter-feed-order > .shopter-bottom-nav{order:9}
/* Overlays and toasts must not be caught in the flow */
body.shopter-feed-order > .sheet-overlay,
body.shopter-feed-order > .filter-sheet-overlay,
body.shopter-feed-order > #sr-overlay,
body.shopter-feed-order > .gallery-overlay,
body.shopter-feed-order > .scan-overlay,
body.shopter-feed-order > .toast,
body.shopter-feed-order > .shopter-settings-panel{position:fixed}

/* Hero copy trimmed rather than removed — the headline stays,
   the paragraph and stat row go below the product. */
.hero{padding-top:14px!important;padding-bottom:10px!important}
.hero .hero-sub,
.hero .stats-row,
.hero .hero-stats{order:6}

/* Card text: brand, name, price. Anything else belongs on the
   item page, which tapping the card already opens. */
.item-card .item-cond,
.item-card .item-condition,
.item-card .item-tags,
.item-card .item-meta,
.item-card .price-save,



/* ── 16. SHEETS MUST CLEAR THE BOTTOM NAV ──────────────────
   Reported: no send button when messaging a seller, and no way
   to submit an offer. Both were there — the fixed bottom nav
   (~86px) was sitting on top of them. Nine sheets across eight
   pages had bottom padding between 20px and 40px, none enough.

   This is the marketplace's core interaction, so the fix is a
   generous floor plus the device's own safe area, applied to
   every sheet at once rather than page by page. */
.sheet,
.offer-sheet,
.aff-sheet,
.safety-sheet,
.share-sheet,
.filter-sheet,
.report-sheet{
  padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px))!important;
  max-height:88vh!important;
}

/* The action inside a sheet stays reachable even mid-scroll */
.sheet .send-btn,
.sheet .submit-btn,
.offer-sheet .send-btn,
.offer-sheet .submit-btn,
.sheet .fs-apply{
  position:sticky;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:2;
}

/* Closet cards: the source badge is absolutely positioned, so its card
   needs to be the positioning context. Without this it anchors to the
   page and lands over the brand and item name. */
.item-card{position:relative}
.item-card .item-source-badge{
  position:absolute!important;top:8px;left:8px;z-index:2;
  background:rgba(7,9,10,0.78);color:#fff;border-radius:2px;
  padding:4px 9px;font-size:10px;letter-spacing:0.8px;
  text-transform:uppercase;font-weight:700;
}
/* Text below the photo must never sit under an overlay badge */

/* ── 17. TOASTS MUST ACTUALLY GO AWAY ──────────────────────
   Reported: the "Light mode" confirmation stays on screen.
   The toast hides by sliding down 80px, but it sits 90px above
   the bottom of a tall page — so it slides to somewhere still
   visible instead of off-screen, and lingers indefinitely.

   Hiding by opacity as well as transform makes it disappear
   regardless of page height. */
.toast{
  opacity:0;
  pointer-events:none;
  transition:transform 0.3s ease, opacity 0.3s ease!important;
}
.toast.show{
  opacity:1;
}

/* ── 18. BODY TEXT READABILITY ─────────────────────────────
   Feedback: the type is hard to read. Measured on Discover in
   light mode, the most common style was 13px — and 19 elements
   were at 10px.

   Syne is a display typeface. It's excellent for the wordmark
   and headings, and genuinely hard work as body copy at small
   sizes: tall x-height, tight apertures, unusually uniform
   letterforms. That's why it reads as "hard to read" even at
   passing contrast.

   Two changes: nothing below 13px, and small body text uses a
   system UI face while Syne keeps every heading, button, price
   and label. The brand voice is unchanged; the paragraphs are
   simply legible. */
body,p,li,td,
.item-name,.listing-name,.wish-name,
.desc-text,.item-desc,.sub,.page-sub,.hero-sub,
.msg-bubble,.comment-text,.post-caption,
.sd-sub,.sr-sub,.oa-text{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:0!important;
}

/* The wordmark and headings are Cormorant Garamond — the serif. Forcing
   them to Syne was my mistake: it changed the logo, which was never the
   problem being solved. */
.logo,.nav-title,
h1,h2,h3,
[class*="hero-h"],[class*="section-h"],[class*="page-h"],
[class*="welcome-h"],[class*="sheet-h"],[class*="modal-h"]{
  font-family:var(--font-d,'Cormorant Garamond',serif)!important;
}

/* Syne stays where it always was — small caps labels, buttons, prices */
[class*="-btn"],button,
.item-brand,.listing-brand,.item-price,.listing-price,
[class*="label"],[class*="badge"],[class*="chip"],[class*="tab"]{
  font-family:'Syne',sans-serif!important;
}

/* No body text below 13px, and a comfortable line height */
body{font-size:16px!important;line-height:1.6!important}
p,li,.desc-text,.item-desc,.sub,.page-sub,.hero-sub,
.msg-bubble,.comment-text{font-size:16px!important;line-height:1.65!important}

/* Nothing readable falls below 13px. 10px and 11px labels were the
   worst offenders — small caps in a display face is the hardest
   combination to read. */
[class*="label"],[class*="meta"],[class*="sub"],[class*="hint"],
[class*="caption"],[class*="badge"],[class*="tag"],
.ssp-h,.section-label,.item-cond,.item-condition{
  font-size:13px!important;
}
/* ── BOTTOM NAV LABELS ─────────────────────────────────────
   These were 12px at weight 600 in a mid grey — which measured
   2.79:1 on the light background, well under the 4.5 minimum.
   Faint rather than small was the real problem.

   Now heavier, slightly larger, and using the theme's own text
   colour rather than a fixed grey, so they stay legible in dark,
   light and rose alike. Five labels still fit across a phone. */
/* Each page carries its own inline <style> for the nav, and an inline
   block outranks a linked stylesheet at equal specificity. Matching the
   nav container in the selector raises specificity enough to win. */
.shopter-bottom-nav .shopter-bnav-label,
.shopter-bottom-nav .bnav-label,
nav ~ * .shopter-bnav-label,
.shopter-bnav-item .shopter-bnav-label{
  font-size:12px!important;
  font-weight:800!important;
  color:var(--text)!important;
  opacity:0.78;
  letter-spacing:0.1px!important;
}
/* The current page reads as clearly current */
.shopter-bottom-nav .shopter-bnav-item.active .shopter-bnav-label,
.shopter-bottom-nav .shopter-bnav-item.active .bnav-label{
  color:var(--green)!important;
  opacity:1;
}
/* Sell keeps its own colour — it's the primary action */
.bnav-sell-label{
  font-size:12px!important;font-weight:800!important;letter-spacing:0.1px!important;
}
/* Icons match the label weight, so the pairing reads as one unit */
.shopter-bnav-icon{opacity:0.75}
.shopter-bnav-item.active .shopter-bnav-icon{opacity:1}
.shopter-bnav-icon svg{stroke-width:1.7!important}
.shopter-bnav-item.active .shopter-bnav-icon svg{stroke-width:2!important}