/* YouKnowYa mobile-first layout enhancement (2026-10-31).
   Overrides only; original styles.css and Google Sheets integration retained. */
.brand-logo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #d5dce4;
  background: #fff;
}
.search-tip {
  margin: 7px 2px 0;
  color: #637187;
  font-size: 12px;
  line-height: 1.4;
}
.search-tip strong {color: #1b3769;}
.card-title {overflow-wrap:anywhere;}
.card-buttons {margin-top:auto;}
/* Keep descriptive content readable while ensuring uniform cards. */
@media (max-width: 670px) {
  .header {
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 2px 9px rgba(18,29,53,.075);
  }
  .nav {gap: 8px;}
  .brand {font-size: 19px; gap: 8px; letter-spacing: -.6px;}
  .brand-logo {width: 36px; height: 36px;}
  .nav-actions {font-size: 11px; gap: 8px;}
  .hero-layout {min-height: 0;}
  .hero-copy {padding: 20px 0 21px;}
  .eyebrow {font-size: 9px; letter-spacing: 1.2px;}
  .spark {font-size: 12px; margin-right: 3px;}
  .hero h1 {
    font-size: clamp(27px,7.6vw,38px);
    letter-spacing: -1.35px;
    line-height: 1.12;
    margin: 9px 0 10px;
  }
  .hero-copy p {
    font-size: 11px;
    line-height: 1.5;
    max-width: 94%;
    margin: 0;
  }
  .hero-jump {display:none;}
  .notice {
    padding: 8px 0;
    gap: 8px;
    font-size: 10px;
    line-height: 1.4;
  }
  .notice-icon {font-size: 17px;}
  .catalog {padding-top: 15px; padding-bottom: 52px;}
  .section-kicker {font-size: 9px; letter-spacing: 1.5px;}
  .section-heading {margin: 6px 0 12px; align-items: center; gap: 10px;}
  .section-heading h2 {font-size: 23px; letter-spacing: -.65px; line-height: 1.12; margin: 0;}
  .section-heading p {display: none;}
  .count-pill {font-size: 10px; padding: 6px 9px;}
  .search-shell {height: 51px; padding: 0 13px; border-radius: 12px;}
  .search-shell input {font-size: 15px;}
  .search-shell input::placeholder {font-size: 12px;}
  .search-icon {font-size: 28px;}
  .search-tip {font-size: 10px; margin: 7px 0 0;}
  .category-pills {margin: 12px 0 11px; gap: 7px;}
  .pill {padding: 8px 11px;}
  .filter-bar {padding: 9px 0 15px; gap: 7px;}
  .select-group label {font-size: 10px;}
  .select-group select {padding-top: 9px; padding-bottom: 9px; font-size: 11px;}
  .product-grid {gap: 9px;}
  .photo {height: clamp(112px, 36vw, 166px);}
  .photo img {padding: 9px;}
  .photo .tag {top: 7px; left: 7px; font-size: 10px;}
  .card-content {padding: 11px 10px 12px;}
  .card-category {font-size: 9px; letter-spacing: .45px; margin-bottom: 5px;}
  .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    min-height: 0;
    max-height: 4.1em;
    line-height: 1.36;
    letter-spacing: -.2px;
    margin-bottom: 6px;
  }
  .card-brand {font-size: 10px; margin-bottom: 7px;}
  .card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.4;
    max-height: 2.9em;
    margin: 0 0 10px;
    flex: none;
  }
  .btn-buy,.btn-video {font-size: 11px; padding: 11px 4px;}
  .card-disclosure {font-size: 9px; margin-top: 7px;}
  .footer-promo-inner {padding: 25px 0;}
}
@media (max-width: 360px) {
  .brand {font-size: 17px;}
  .nav-actions {font-size: 10px;}
  .hero h1 {font-size: 27px;}
  .section-heading h2 {font-size: 21px;}
  .card-content {padding: 9px;}
  .card-title {font-size: 12px;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  .product-card {transition:none;}
}