/* SBF Mobile UI Override - Simple + functional */
@media (max-width: 768px){
  .sbf-wrap{padding:14px 12px !important;background:#f3f4f6 !important;}
  .sbf-header{display:flex !important;align-items:center !important;gap:12px !important;position:relative !important;flex-wrap:nowrap !important;margin-bottom:10px !important;}
  .sbf-heading{font-size:22px !important;font-weight:900 !important;color:#0f172a !important;margin:0 !important;}
  .sbf-toplinks{display:none !important;}

  .sbf-mobile-nav{display:flex !important;align-items:center !important;margin-left:auto !important;}
  .sbf-menu-btn{
    width:42px !important;height:42px !important;border-radius:14px !important;
    background:#ffffff !important;border:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    font-size:20px !important;font-weight:900 !important;color:#0f172a !important;
  }
  .sbf-menu-panel{
    position:absolute !important;right:12px !important;top:58px !important;z-index:9999 !important;
    min-width:220px !important;border-radius:16px !important;background:#111827 !important;color:#fff !important;
    box-shadow:0 12px 40px rgba(0,0,0,0.25) !important;overflow:hidden !important;
  }
  .sbf-menu-panel a{display:block !important;color:#fff !important;text-decoration:none !important;padding:12px 14px !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;}
  .sbf-menu-panel a:last-child{border-bottom:0 !important;}

  .sbf-bar{position:relative !important;display:flex !important;align-items:center !important;gap:10px !important;
    background:#ffffff !important;border:1px solid rgba(15,23,42,.10) !important;border-radius:18px !important;padding:10px 10px !important;
    box-shadow:0 10px 22px rgba(15,23,42,.08) !important;
  }
  .sbf-bar:before{content:"🔎" !important;position:absolute !important;left:16px !important;top:50% !important;transform:translateY(-50%) !important;opacity:.55 !important;font-size:16px !important;}
  .sbf-bar .sbf-input{flex:1 !important;border:0 !important;outline:0 !important;padding:10px 10px 10px 38px !important;background:transparent !important;font-size:16px !important;}
  .sbf-bar .sbf-btn{display:none !important;} /* remove search button */

  .sbf-results{margin-top:10px !important;display:flex !important;flex-direction:column !important;gap:10px !important;}
  .sbf-card{
    background:#ffffff !important;border:1px solid rgba(15,23,42,.10) !important;border-radius:18px !important;
    box-shadow:0 14px 28px rgba(15,23,42,.08) !important;padding:12px !important;
    display:grid !important;grid-template-columns:68px 1fr 78px !important;gap:12px !important;
  }
  .sbf-thumb{width:68px !important;height:68px !important;border-radius:14px !important;overflow:hidden !important;border:1px solid rgba(15,23,42,.08) !important;}
  .sbf-card-title{font-size:17px !important;font-weight:900 !important;color:#0f172a !important;line-height:1.15 !important;margin:0 0 6px 0 !important;}
  .sbf-tap-hint{font-size:12px !important;color:rgba(15,23,42,.55) !important;margin-top:2px !important;}

  .sbf-mobile-details{display:none !important;margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(15,23,42,.10) !important;}
  .sbf-card.sbf-open .sbf-mobile-details{display:block !important;}

  .sbf-card-actions{display:none !important;}

  .sbf-right-tile{border-radius:18px !important;background:rgba(34,197,94,.18) !important;border:1px solid rgba(34,197,94,.22) !important;min-width:78px !important;padding:10px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;}
  .sbf-right-tile.sbf-na{background:#ef4444 !important;border-color:rgba(239,68,68,.35) !important;}
  .sbf-right-tile .sbf-shelf-label{font-size:11px !important;font-weight:800 !important;margin:0 0 6px 0 !important;letter-spacing:.04em !important;text-transform:uppercase !important;}
  .sbf-right-tile .sbf-shelf-num{font-size:30px !important;font-weight:900 !important;line-height:1 !important;}
}

/* Ensure hamburger never shows on desktop */
@media (min-width: 769px){
  .sbf-mobile-nav{display:none !important;}
  .sbf-toplinks{display:flex !important;}
}

@media (max-width: 768px){
  /* After JS wraps content, keep only title + hint visible */
  .sbf-card .sbf-card-mid > :not(.sbf-card-title):not(.sbf-tap-hint):not(.sbf-mobile-details){display:none !important;}
  .sbf-mobile-details{display:none !important;}
  .sbf-card.sbf-open .sbf-mobile-details{display:block !important;}
}

/* Strong hide rules for templates that wrap content in .sbf-card-main */
@media (max-width: 768px){
  .sbf-card .sbf-card-main > :not(.sbf-card-title):not(.sbf-tap-hint):not(.sbf-mobile-details){display:none !important;}
  .sbf-card .sbf-card-mid > :not(.sbf-card-title):not(.sbf-tap-hint):not(.sbf-mobile-details):not(.sbf-card-main){display:none !important;}
  .sbf-mobile-details{display:none !important;}
  .sbf-card.sbf-open .sbf-mobile-details{display:block !important;}
}

/* === Mobile shelf pill sizing (approved mockup) === */
@media (max-width: 768px) {
  .sbf-right-tile {
    min-width: 86px;
    height: 52px;
    padding: 0 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sbf-right-tile .sbf-shelf-label {
    display: none;
  }

  .sbf-right-tile .sbf-shelf-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
  }
}

/* === Mobile compact rows (approved design direction) === */
@media (max-width: 768px){
  /* tighten cards a bit */
  .sbf-card{
    padding:12px 12px !important;
    border-radius:18px !important;
  }
  .sbf-thumb{width:60px !important;height:60px !important;border-radius:14px !important;}
  .sbf-body h3{font-size:18px !important;line-height:1.15 !important;margin:0 !important;}
  .sbf-sub{margin-top:6px !important;}
  .sbf-line{display:block !important;margin-top:6px !important;}
  .sbf-tap-hint{font-size:12px !important;margin-top:4px !important;opacity:.6 !important;}

  /* Shelf pill on right (no label) */
  .sbf-shelf-label{display:none !important;}
  .sbf-right-tile{
    min-width:90px !important;
    height:54px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 14px !important;
  }
  .sbf-shelf-num{font-size:24px !important;font-weight:900 !important;line-height:1 !important;}
  .sbf-right-tile.sbf-na{background:#ef4444 !important;}

  /* Accordion visibility */
  .sbf-card .sbf-mobile-details{display:none !important;}
  .sbf-card.sbf-open .sbf-mobile-details{display:block !important;}
}

/* === Mobile density pass (more items per screen) === */
@media (max-width: 768px){
  /* tighten overall spacing */
  .sbf-wrap{padding:8px !important;}
  .sbf-results{gap:10px !important;}
  .sbf-card{
    padding:10px 12px !important;
    border-radius:18px !important;
  }
  /* smaller thumbnail */
  .sbf-thumb{width:56px !important;height:56px !important;border-radius:14px !important;}
  /* title slightly smaller to reduce wrapping height */
  .sbf-card-title{font-size:18px !important;line-height:1.12 !important;}
  .sbf-tap-hint{font-size:12px !important;margin-top:4px !important;}

  /* shelf badge: true pill, slimmer */
  .sbf-right-tile{
    min-width:64px !important;
    height:44px !important;
    padding:0 12px !important;
    border-radius:999px !important;
  }
  .sbf-right-tile .sbf-shelf-num{
    font-size:22px !important;
    font-weight:900 !important;
  }

  /* reduce card internal spacing if present */
  .sbf-card-mid{gap:2px !important;}
}

/* === Mobile density pass v2 (tighter rows, more items per screen) === */
@media (max-width: 768px){
  /* Card: reduce padding + radius a touch */
  .sbf-card{
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  /* Thumbnail: slightly smaller */
  .sbf-thumb{
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
  }

  /* Title: keep readable but reduce wrap height */
  .sbf-card-title{
    font-size: 17px !important;
    line-height: 1.12 !important;
  }

  /* Tap hint: smaller + tighter */
  .sbf-tap-hint{
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  /* Shelf badge: shorter (prevents row height inflation) */
  .sbf-right-tile{
    height: 40px !important;
    min-width: 64px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }
  .sbf-right-tile .sbf-shelf-num{
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
}


/* === Mobile Compact UI (final overrides) === */
@media (max-width: 768px){
  /* show menu only on mobile */
  .sbf-toplinks{display:none !important;}
  .sbf-mobile-nav{display:flex !important;}

  /* tighten search bar */
  .sbf-bar{border-radius:16px !important;padding:8px 10px !important;box-shadow:0 8px 16px rgba(15,23,42,.07) !important;}
  .sbf-bar .sbf-input{font-size:16px !important;padding:8px 6px 8px 34px !important;}

  /* tighter list */
  .sbf-results{gap:8px !important;margin-top:10px !important;}
  .sbf-card{
    padding:10px 10px !important;
    border-radius:18px !important;
    box-shadow:0 6px 14px rgba(15,23,42,.06) !important;
  }

  /* smaller thumb */
  .sbf-thumb{width:52px !important;height:52px !important;border-radius:14px !important;flex:0 0 52px !important;}
  .sbf-thumb img{border-radius:14px !important;}

  /* title slightly smaller to keep rows short */
  .sbf-card-title{font-size:16px !important;line-height:1.15 !important;margin:0 !important;}
  .sbf-card-subtitle{font-size:12px !important;line-height:1.2 !important;margin-top:2px !important;}
  .sbf-tap-hint{font-size:11px !important;margin-top:2px !important;opacity:.65 !important;}

  /* shelf badge: keep color, remove label, make it more compact */
  .sbf-right-tile{
    width:auto !important;
    min-width:68px !important;
    height:52px !important;
    padding:0 14px !important;
    border-radius:18px !important;
  }
  .sbf-right-tile .sbf-shelf-label{display:none !important;}
  .sbf-right-tile .sbf-shelf-num{font-size:24px !important;font-weight:900 !important;line-height:1 !important;}
}
/* Desktop: never show mobile hamburger */
@media (min-width: 769px){
  .sbf-mobile-nav{display:none !important;}
  .sbf-toplinks{display:flex !important;}
}


/* === Compact mobile cards (match existing markup: .sbf-left/.sbf-body/.sbf-right) === */
@media (max-width: 768px){
  .sbf-results .sbf-card{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:18px;
  }
  .sbf-results .sbf-left{
    flex:0 0 auto;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sbf-results .sbf-left img{
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:14px;
  }
  .sbf-results .sbf-body{
    flex:1 1 auto;
    min-width:0;
  }
  .sbf-results .sbf-body h3{
    margin:0;
    font-size:18px;
    line-height:1.15;
    font-weight:800;
  }
  /* "Tap for details" hint when collapsed */
  .sbf-results .sbf-card:not(.sbf-expanded) .sbf-body h3::after{
    content:"Tap for details";
    display:block;
    margin-top:4px;
    font-size:12px;
    font-weight:600;
    opacity:.55;
  }
  /* Hide detail lines by default (collapsed) */
  .sbf-results .sbf-card:not(.sbf-expanded) .sbf-line{
    display:none !important;
  }
  /* When expanded, show lines with tighter spacing */
  .sbf-results .sbf-card.sbf-expanded .sbf-line{
    display:block;
    margin-top:6px;
    font-size:14px;
    line-height:1.25;
  }
  .sbf-results .sbf-card.sbf-expanded .sbf-line strong{
    font-weight:800;
  }

  /* Right shelf pill */
  .sbf-results .sbf-right{
    flex:0 0 auto;
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  /* Support both older .sbf-shelf-big and newer .sbf-right-tile */
  .sbf-results .sbf-right .sbf-shelf-big,
  .sbf-results .sbf-right .sbf-right-tile{
    width:74px;
    height:74px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.5px;
  }
  /* Hide the word "SHELF" on mobile if present */
  .sbf-results .sbf-right .sbf-shelf-label{
    display:none !important;
  }
  .sbf-results .sbf-right .sbf-shelf-num{
    font-size:30px;
    font-weight:900;
  }

  /* Reduce overall vertical spacing so more results fit */
  .sbf-results{ padding-top:6px; }
  .sbf-results .sbf-card + .sbf-card{ margin-top:10px; }
}


/* === Mobile Density Tweaks (Search bar smaller + less padding) === */
@media (max-width: 768px){
  /* Search bar shorter */
  .sbf-bar{border-radius:16px !important;padding:6px 8px !important;box-shadow:0 8px 18px rgba(15,23,42,.07) !important;}
  .sbf-bar:before{left:10px !important;font-size:14px !important;}
  .sbf-bar .sbf-input{font-size:15px !important;padding:0 !important;}

  /* Less space above results */
  .sbf-results{margin-top:6px !important;gap:8px !important;}

  /* Cards denser */
  .sbf-card{padding:8px 10px !important;border-radius:16px !important;}
  .sbf-thumb{width:44px !important;height:44px !important;border-radius:12px !important;}
  .sbf-card-title{font-size:16px !important;line-height:1.12 !important;}

  /* Remove helper line if present (Option A) */
  .sbf-tap-hint{display:none !important;}

  /* Shelf pill slightly larger, but not tall */
  .sbf-right-tile{min-width:70px !important;height:44px !important;padding:0 12px !important;border-radius:18px !important;}
  .sbf-right-tile .sbf-shelf-label{display:none !important;}
  .sbf-right-tile .sbf-shelf-num{font-size:22px !important;font-weight:900 !important;line-height:1 !important;}
}

/* === Mobile Results: 2-column grid (show more per page) === */
@media (max-width: 600px){
  /* Turn the results container into a 2-column grid */
  .sbf-results{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  /* Remove the vertical stacking margin used in 1-column mode */
  .sbf-results .sbf-card + .sbf-card{ margin-top:0 !important; }

  /* Compact card layout that works in a narrow column */
  .sbf-card{
    display:grid !important;
    grid-template-columns:48px 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:8px !important;
    row-gap:6px !important;
    align-items:center !important;
    padding:10px !important;
  }

  .sbf-thumb{
    width:48px !important;
    height:48px !important;
    border-radius:12px !important;
  }

  .sbf-title{
    font-size:16px !important;
    line-height:1.15 !important;
  }

  .sbf-left{ grid-column:1; grid-row:1 / span 2; }
  .sbf-body{ grid-column:2; grid-row:1 / span 2; padding-right:70px; }

  /* Keep the shelf pill visible but tucked to the top-right */
  .sbf-right{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:start;
    margin:0 !important;
  }

  .sbf-right-tile{
    min-width:64px !important;
    height:44px !important;
    border-radius:18px !important;
  }

  /* Details accordion should span full card width */
  .sbf-mobile-details{ grid-column:1 / -1; }
}