/* 17 Great Finds, phone pass (2026-09-15). Kyle, on his phone: the cards under the hero showed "only three cards" in a sideways
   strip, "cropped at the top", and the nav read as an empty white bar with a lone Menu button. Loaded after styles.css. */

@media(max-width:780px){
  /* all seven hero cards in a calm two-column grid instead of a clipped sideways strip:
     four photo cards, the "Sell with B&H" feature card full width, then the two small cards */
  .category-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;min-height:0!important;margin-top:30px!important;
    padding:0!important;overflow:visible!important;scroll-snap-type:none!important;align-items:stretch!important}
  .category-grid>.gf-col,.category-grid .category-stack,.category-grid .category-stack.outer{display:contents!important}
  .category-grid .photo-card,.category-grid .feature-card{height:224px!important;margin:0!important;border-radius:20px}
  .category-grid .estates{order:1}
  .category-grid .furniture{order:2}
  .category-grid .collectibles{order:3}
  .category-grid .quilt{order:4}
  .category-grid .feature-card{order:5;grid-column:1/-1;height:196px!important}
  .category-grid .little-card{order:6;min-height:118px;border-radius:20px;padding:16px 14px}
  .category-grid .tint-card{order:7}
  .category-grid .card-copy{left:14px!important;right:12px!important;bottom:14px!important}
  .category-grid .card-copy h2,.category-grid .estates h2,.category-grid .feature-card .card-copy h2{font-size:19px!important;letter-spacing:-.4px!important;line-height:1.08;padding-right:34px}
  .category-grid .feature-card .card-copy h2{font-size:22px!important}
  .category-grid .card-copy p{display:none}
  .category-grid .feature-card .card-copy p{display:block;font-size:13px!important;margin-top:8px}
  .category-grid .card-tag{display:none!important}
  .category-grid .feature-card .card-tag{display:block!important;font-size:11px!important;margin-bottom:8px}
  .category-grid .category-icon{width:34px!important;height:34px!important;font-size:19px!important;left:12px!important;top:12px!important}
  .category-grid .card-copy .round{position:absolute!important;right:0!important;bottom:0!important;margin:0!important;width:28px!important;height:28px!important}
  .category-grid .little-card h3{font-size:15px}
  .category-grid .little-card p{font-size:12px}
  .motion.is-loaded:not(.entered) .category-grid .deal{animation-name:gf-deal!important}
}

@media(max-width:960px){
  /* at the top of the page the nav holds only the Menu button, so it floats on the hero without an empty white bar;
     the bar returns once the logo docks into it */
  .nav{transition:background-color .45s var(--soft),border-color .45s var(--soft),box-shadow .45s var(--soft)}
  .dock-on:not(.is-docked) .nav{background-color:transparent;border-color:transparent;box-shadow:none}
  .dock-on:not(.is-docked) .nav::after{opacity:0}
  .dock-on:not(.is-docked) .menu-toggle{box-shadow:0 6px 18px #1b2a3a14}
}