/* Phone layout: shorter, more direct pages. Desktop is untouched. */
/* nothing may make the page wider than the screen */
html,body{overflow-x:clip}
@media (max-width:600px){
  .section-title{font-size:34px}
  /* product cards: two per row, smaller */
  .grid-3,.grid-3.grid-2{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}
  .grid-3.grid-2{grid-template-columns:repeat(2,minmax(0,calc((100% - 20px) / 3)));justify-content:center}
  .card{padding-bottom:26px}
  .card{min-width:0}
  .card h3{margin-top:10px;font-size:clamp(10px,3.4vw,14px);letter-spacing:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .card-price{font-size:clamp(10px,2.9vw,12px)}
  .card p{display:none}
  .card-price{margin-top:4px}
  /* In the Field: small square thumbnails, 3 per row */
  .gallery{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -10px}
  .gallery::-webkit-scrollbar{display:none}
  .gallery a{flex:0 0 100%;scroll-snap-align:center}
  .gallery img{aspect-ratio:4/3}
  .gallery-count{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:12px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:#aaa}
  .gallery-count button{width:36px;height:36px;border:1px solid #444;border-radius:50%;background:none;color:#fff;font-size:16px;cursor:pointer}
  /* About: one photo + text */
  .about .tall{display:none}
  .about .text{padding:24px 4px 0;font-size:16px}
  /* Data Fields: compact list, no live previews on phones */
  .df-grid{grid-template-columns:1fr 1fr;gap:24px 12px}
  .df-info{padding-top:10px}
  .df-intro{font-size:14px;line-height:1.5;margin-bottom:24px}
  .df-info h2{font-size:15px;line-height:1.15}
  .df-info h2 span{display:block;font-size:11px;letter-spacing:.06em}
  .df-info p{font-size:11px;line-height:1.4;letter-spacing:.02em}
  .df-info p:not(.df-sub){display:none}
  .df-open{font-size:11px;margin-top:6px}
  /* Footer: links, copyright, then social buttons at the very bottom, all centred */
  .site-footer{min-height:0}
  .site-footer .inner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:36px 20px 28px;text-align:center}
  .site-footer .socials{order:3;justify-content:center;gap:14px}
  .site-footer .socials a{width:38px;height:38px}
  .site-footer .legal{order:1;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;font-size:14px}
  .site-footer .legal a:last-child{grid-column:1 / -1}
  .site-footer .inner > p{order:2;font-size:12px;color:#aaa}
  /* Sound map: shorter, readable small text */
  .mm-map{height:360px}
  .mm-where,.mm-time{font-size:13px}
  .mm-tour{top:10px;right:10px;height:36px;padding:0 12px;font-size:14px}
  .mm-wrap{overflow:hidden}
  .mm-bar{display:grid;grid-template-columns:40px 1fr;gap:10px 14px;align-items:center}
  .mm-bar .mm-info{grid-column:2;min-width:0}
  .mm-bar .mm-progress{grid-column:1 / -1}
  .mm-bar .mm-time{grid-column:1 / -1;margin-top:-8px}
  .mm-bar .mm-shuffle{grid-column:1 / 2;justify-self:start;width:max-content}
  .mm-bar .mm-open{grid-column:2;justify-self:end;font-size:15px}
  /* Homepage header image: 16:9 instead of most of the screen */
  .hero{height:auto;aspect-ratio:16/9}
  .hero-logo{width:72vw}
  /* Product pages: no big cover (it's on the homepage); title, price and Buy first, then player, text, media, specs */
  .product{gap:40px;padding:28px 16px 48px}
  .product-top{display:flex;flex-direction:column;gap:0}
  .product-visual,.product-info{display:contents}
  .product-visual>img{display:none}
  .pi-kicker{order:2;font-size:11px;margin-bottom:6px}
  .product-info h1{order:3;font-size:34px}
  .pi-buy{order:4;margin:14px 0 6px;gap:16px}
  .product-info .pi-buy .price{font-size:22px}
  .pi-buy .btn{height:44px;padding:0 26px;flex:1;max-width:220px}
  .product-info .pi-legal{order:5;font-size:11px;margin-bottom:22px!important}
  .product-visual .demo,.product-visual .sc-slim{order:6;width:100%;margin:0 0 24px}
  .pi-desc{order:7}
  .product-info .pi-desc p{font-size:15px;line-height:1.6;margin-bottom:12px}
  .pi-h:has(+ .pi-tags),.pi-tags{order:8}
  .pi-h{margin:24px 0 10px;font-size:11px}
  .pi-tags{gap:6px}
  .pi-tags li{padding:4px 9px;font-size:12px}
  .pv-gallery{order:9;margin-top:24px;gap:6px}
  .pi-h:has(+ .pi-specs),.pi-specs{order:10}
  .pi-specs div{grid-template-columns:96px 1fr;gap:10px;padding:9px 0}
  .pi-specs dt{font-size:10px;letter-spacing:.08em;padding-top:3px}
  .pi-specs dd{font-size:13px}
  .pi-doc{order:11;flex-direction:row;align-items:center;gap:14px;margin-top:24px;padding:14px}
  .pi-doc img{width:56px}
  .pi-doc .pi-doc-ico{width:40px;height:50px}
  .pi-doc strong{font-size:13px;margin-bottom:8px}
}