/* ==========================================================================
   Mobile reading + performance layer (<= 849px only)
   Desktop and tablet rendering are untouched, so reference parity holds.
   ========================================================================== */
@media (max-width: 849px) {

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Body copy: the imported styles inherited 12-13px on small screens, which is
     below comfortable reading size. Lift prose, leave UI chrome alone. */
  .entry-content p,
  .entry-content li,
  .entry-content td,
  .entry-content blockquote,
  .page-content p,
  .page-content li,
  .post-content p,
  .post-content li { font-size: 15px !important; line-height: 1.72 !important; }

  .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
  .page-content h1, .page-content h2 { line-height: 1.3 !important; margin-bottom: .55em; }

  .entry-content ul, .entry-content ol { padding-left: 1.15em; }
  .entry-content li { margin-bottom: .5em; }

  /* Long words / strings must never cause sideways scrolling on a phone. */
  .entry-content, .page-content, .post-content { overflow-wrap: break-word; word-wrap: break-word; }

  /* Product cards: tiny category label + tight title made listings hard to scan. */
  .product-small .category { font-size: 11.5px !important; letter-spacing: .04em; }
  .product-small .name,
  .product-small .woocommerce-loop-product__title { font-size: 13.5px !important; line-height: 1.35 !important; }
  .product-small .price { font-size: 14.5px !important; }

  /* Comfortable tap targets (Apple/Google guidance is 44px). */
  .product-small .add_to_cart_button,
  .product-small .button { min-height: 40px; }
  .header-nav .nav > li > a,
  .mobile-sidebar .nav > li > a { min-height: 44px; display: flex; align-items: center; }
  .nav-sidebar li a { padding-top: 6px !important; padding-bottom: 6px !important; }

  /* The 18+ notice bar: font-size must land on the <p> inside ul.nav-small,
     because that list scales to 0.75em of whatever #top-bar carries. */
  #top-bar,
  #top-bar p,
  #top-bar li,
  #top-bar .nav-small,
  #top-bar .nav > li > a,
  .av-age-notice { font-size: 12.5px !important; line-height: 1.45 !important; }
  #top-bar .html.custom p { margin: 0 !important; }

  /* Reclaim dead vertical space above the first block. */
  .row.category-page-row { padding-top: 10px !important; }
  .content-area > p:empty { display: none !important; }
  .shop-container > .shop-page-title:first-child { padding-top: 6px !important; }

  /* Tighter product cards: the gap under the title pushed prices off-screen. */
  .product-small .price { margin-top: 4px !important; }
  .product-small .name { margin-bottom: 2px !important; }
  .product-small .box-text { padding-top: 6px !important; }

  /* Dead space above the first section pushed real content below the fold. */
  .home .page-wrapper > .row:first-child { padding-top: 10px; }
  .shop-page-title { padding-top: 12px; padding-bottom: 8px; }
  .shop-page-title .is-large, .shop-page-title h1 { font-size: 24px !important; line-height: 1.25; }

  /* Breadcrumbs wrap instead of clipping. */
  .breadcrumbs { font-size: 11.5px; line-height: 1.5; white-space: normal; }

  /* Footer link columns were 10-11px. */
  .footer-secondary, .absolute-footer, .footer-wrapper .widget p,
  .footer-wrapper .widget li, .footer-wrapper .widget a { font-size: 13px; line-height: 1.6; }

  /* Tables and spec blocks: scroll rather than overflow the viewport. */
  .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}