/* The three-line menu button only exists on phones */
.menu-toggle { display: none; }
/* Phone-size refinements shared by every page. Loaded after each page's own styles. */
@media (max-width: 720px) {
  /* Compact header: logo, social icons and basket on one row, menu links on a second row */
  nav .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0 4px; padding-block: 8px; }
  nav .nav-right { display: contents; }
  nav .mark img { height: 52px; }
  nav .nav-social { grid-column: 2; grid-row: 1; padding-left: 0; border-left: 0; gap: 0; }
  nav .cart-btn { grid-column: 3; grid-row: 1; }
  nav ul { grid-column: 1 / -1; grid-row: 2; display: none; flex-direction: column; gap: 0; width: 100%; margin: 6px 0 0; padding: 6px 0 4px; border-top: 1px solid var(--line); }
  nav.menu-open ul { display: flex; animation: menu-in .22s ease both; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  nav ul li { text-align: left; border-bottom: 1px solid rgba(58,35,40,.6); }
  nav ul li:last-child { border-bottom: 0; }
  nav ul a { display: block; padding: 15px 4px; font-size: .9rem; letter-spacing: .2em; }
  nav ul a[aria-current] { color: var(--rose); }
  .menu-toggle { grid-column: 4; grid-row: 1; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
  .menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--bone); transition: transform .2s ease, opacity .2s ease; }
  nav.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  nav.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  nav.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Comfortable tap targets (at least 44px tall) */
  .nav-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .cart-btn { width: 44px; height: 44px; }
  footer a { display: inline-block; padding-block: 10px; }
  footer .foot-social a { display: inline-flex; padding: 0; width: 44px; height: 44px; }
  .back, .more, .duet-jump { display: inline-block; padding-block: 12px; }
  .rating .rating-count a { display: inline-block; padding-block: 8px; }
  label.check { min-height: 44px; align-items: center !important; }
  label.check input[type=checkbox], label.check input[type=radio] { width: 22px !important; height: 22px !important; margin-top: 0 !important; }
  .currency-pick { min-height: 44px; }
  .stars-in label { padding: 6px 3px; font-size: 1.8rem !important; }
  summary { min-height: 48px; align-items: center; }
  .qty button[data-q] { width: 40px; height: 40px; font-size: 1.15rem; }
  .cart-rm { padding: 12px 4px; }
  .cart-x { padding: 10px 12px; }

  /* Nothing smaller than about 12px */
  .torch-hint, .ku-badge, .order small, .order .here, .facts dt, .quote figcaption, .steps span,
  .rq-label, .fmt-name, .cw li, .tags li, .trope-list li, .review-links .btn, .review-form label:not(.check) { font-size: 12px !important; }
}