/* Phone pass (10 Nov 2026): less scrolling on phones, nothing removed from the page for search.
   Everything here is inside one phone-only block, so desktop and tablet are untouched.
   What it does: slimmer strips and header, kit cards as a swipe row on Home and tighter everywhere,
   extras as a swipe row, How it works as three compact rows, Add to basket before the long copy on a
   product page, a footer under one screen. */
@media (max-width: 700px) {
  /* ── Top of every page: 230px of strips and header down to about 125px ── */
  body .ybc-xmas { font-size: 14px; line-height: 1.3; padding: 7px 12px; }
  body .ybc-xmas .ybc-xmas__more { display: none; }
  body .ybc-when { font-size: 14px; line-height: 1.3; padding: 7px 12px; }
  body .ybc-when a { display: none; }
  body .ybc-header__in { height: 60px; }

  /* Home: the walk through the type into the kitchen takes less scrolling */
  body .zoom { height: 140svh; }
  body.rm .zoom, .rm body .zoom { height: auto; }

  /* ── Rhythm: sections breathe less ── */
  body .sec { padding: 52px 0; }
  body .sec--tight { padding-top: 36px; }
  body .sec-head { margin-bottom: 26px; gap: 12px; }
  body .sec-head h2 { font-size: 36px; }
  body .sec-head p { font-size: 17px; }
  body .phead { padding: 34px 0 24px; }

  /* ── Kit cards: tighter everywhere ── */
  body .box__pic img, body .box--lead .box__pic img { aspect-ratio: 3 / 2; }
  body .box__body, body .box--lead .box__body { padding-top: 14px; }
  body .box h3 { font-size: 25px; }
  body .box .price { font-size: 24px; white-space: nowrap; }
  body .box__line { display: none; }
  body .box__dishes { margin-top: 12px; }
  body .box__dishes li { grid-template-columns: 4.8em 1fr; gap: 10px; padding: 8px 0; font-size: 15px; line-height: 1.35; }
  body .box__meta { margin-top: 10px; gap: 16px; font-size: 14.5px; }
  body .box__actions, body .box--lead .box__actions { margin-top: auto; padding-top: 14px; flex-wrap: nowrap; gap: 18px; }
  body .box__actions .btn { padding-left: 16px; padding-right: 16px; white-space: nowrap; }
  body .box__actions .link { font-size: 15px; white-space: nowrap; }
  body #menus .box__actions { gap: 12px; }
  body .boxes { gap: 40px 0; }

  /* Home: the four kits sit side by side and swipe, one card and a slice of the next on screen */
  body #menus .boxes { display: flex; gap: 14px; margin: 0 calc(var(--g) * -1); padding: 0 var(--g) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--g); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body #menus .boxes::-webkit-scrollbar { display: none; }
  body #menus .box { flex: 0 0 84%; scroll-snap-align: start; }
  body #menus .box__dishes li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body #menus .sec-head::after { content: "Swipe for all four menus"; font: 600 14px/1 var(--text); color: var(--ink-2); }

  /* Extras: a swipe row instead of a two-column stack */
  body .extras { display: flex; gap: 12px; margin: 0 calc(var(--g) * -1); padding: 0 var(--g) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--g); scrollbar-width: none; }
  body .extras::-webkit-scrollbar { display: none; }
  body .extra { flex: 0 0 43%; scroll-snap-align: start; }
  body .extra h3 { font-size: 16px; }
  body .extra .price { font-size: 16px; }
  body .extra p { font-size: 14.5px; }
  body .extra__row { padding-top: 10px; }

  /* Gift band: the words and the button; the card drawing is on the gift page itself */
  body .gift__in { padding-top: 48px; padding-bottom: 48px; }
  body .gift h2 { font-size: 40px; }
  body .gift p:not(.note) { font-size: 17.5px; margin-top: 14px; }
  body .gift__card:not(.gift__card--big) { display: none; }

  /* How it works: three rows, picture beside the words */
  body .flow { gap: 0; }
  body .flow__step { position: relative; display: grid; grid-template-columns: 104px 1fr; column-gap: 16px; align-content: start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  body .flow__step:first-child { border-top: 1px solid var(--rule); }
  body .flow__media { grid-row: 1 / 4; aspect-ratio: 1; margin: 0; align-self: start; }
  body .flow__step .step__n { position: absolute; left: -6px; top: 8px; z-index: 2; width: 38px; height: 38px; font-size: 16px; background: #fff; border-radius: 50%; }
  body .flow__step h3 { font-size: 19px; margin: 0 0 6px; }
  body .flow__step p { font-size: 15.5px; line-height: 1.45; }

  /* Unbox the magic */
  body .unbox:not(.unbox--hero) { padding: 64px 0 48px; }
  body .unbox h2 { font-size: 54px; }
  body .unbox__lede { font-size: 17px; margin-top: 18px; }
  body .reels { grid-template-columns: repeat(3, 46%); margin-top: 32px; gap: 10px; }
  body .reel figcaption { font-size: 22px; left: 12px; bottom: 10px; }
  body .unbox__foot { margin-top: 32px; gap: 14px; }
  body .unbox .sig { font-size: 24px; }

  /* Questions: tighter rows */
  body .qa summary { padding: 16px 0; font-size: 17px; }
  body .how { gap: 22px; }

  /* ── Product page: photo, name, price, Add to basket, then the reading ── */
  body .pdp { gap: 18px; padding-bottom: 48px; }
  body .pdp__main { aspect-ratio: 4 / 3; }
  body .pdp__thumbs { grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
  body .pdp > div:last-child { display: flex; flex-direction: column; }
  body .pdp > div:last-child > * { order: 2; }
  body .pdp > div:last-child > .crumbs, body .pdp > div:last-child > h1, body .pdp > div:last-child > .ybc-price { order: 0; }
  body .pdp > div:last-child > .buybox { order: 1; margin-top: 16px; padding: 16px; }
  body .pdp h1 { font-size: 36px; }
  body .pdp__what { margin-bottom: 8px; }
  body .pdp .ybc-price { margin-top: 10px; }
  body .pdp .ybc-price [data-price] { font-size: 36px; }
  body .pdp__intro { font-size: 17px; margin-top: 18px; }
  body .pdp .ybc-add { margin-top: 12px; }
  body .pdp__sec { margin-top: 28px; }

  /* ── Contact: six stacked doors become a 2 by 3 grid ── */
  #ybc-contact .yc-top { padding-top: 34px; padding-bottom: 36px; gap: 30px; }
  #ybc-contact .yc-lead { font-size: 17px; margin-top: 14px; }
  #ybc-contact .yc-label { margin-top: 22px; }
  #ybc-contact .yc-doors { grid-template-columns: 1fr 1fr; gap: 8px; }
  #ybc-contact .yc-doors button { padding: 11px 12px; font-size: 15px; line-height: 1.25; min-height: 56px; }
  #ybc-contact .yc-doors button span { display: none; }
  #ybc-contact .yc-facts { margin-top: 24px; padding-top: 18px; gap: 10px; }
  #ybc-contact .yc-answers { padding-top: 40px; padding-bottom: 40px; gap: 20px; }
  #ybc-contact .yc-acc summary { padding-top: 16px; padding-bottom: 16px; font-size: 16.5px; }
  #ybc-contact .yc-close-img { height: 200px; }
  #ybc-contact .yc-close-copy { padding: 32px 20px 40px; }

  /* ── Footer: 1.6 screens down to about 0.8 ── */
  body .ybc-footer { padding: 36px 0 24px; }
  body .ybc-footer__grid { gap: 22px 24px; grid-template-rows: auto auto auto; }
  body .ybc-footer .ybc-logo { width: 92px; }
  body .ybc-footer__about p { display: none; }
  body .ybc-footer__grid > div:nth-child(2) { grid-row: 2 / 4; }
  body .ybc-footer h2 { margin-bottom: 6px; }
  body .ybc-footer a { padding: 7px 0; }
  body .ybc-footer li a { font-size: 16px; overflow-wrap: anywhere; }
  body .ybc-footer__base { margin-top: 22px; padding-top: 16px; gap: 6px; font-size: 13px; line-height: 1.45; }
  body .ybc-footer__base br { display: none; }
}