/* RF-22 mobile product page composition. Separate art-direction, not scaled desktop. */
@media (max-width:620px){
  .product-body .site-header{top:10px;left:0;right:0}
  .product-body .nav-shell{position:relative;width:254px;max-width:none;height:44px;min-height:44px;margin-left:18px;margin-right:auto;padding:0 7px 0 13px;grid-template-columns:auto 1fr;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.09));border-color:rgba(255,255,255,.28);border-radius:999px}
  .product-body .logo{font-size:22px;line-height:1}
  .product-body .nav-links{display:flex;justify-self:end;align-items:center;gap:0;height:100%}
  .product-body .nav-links a{display:none!important;font-size:7.5px;line-height:1;padding:9px 7px;border-radius:999px;white-space:nowrap}
  .product-body .nav-links a:nth-child(1),.product-body .nav-links a:nth-child(2),.product-body .nav-links a:nth-child(3){display:block!important}
  .product-body .nav-links a:nth-child(2){background:rgba(255,255,255,.92);color:#111;box-shadow:0 5px 16px rgba(255,255,255,.18)}
  .product-menu-button{position:absolute;left:auto;right:-106px;top:-1px;width:46px;height:46px;margin:0;gap:5px;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26)}
  .product-menu-button span{width:15px}

  .product-hero-scene{height:557px;min-height:557px;max-height:557px;padding:0;overflow:hidden;background:#0d0e0e}
  .product-hero-shell{position:relative;height:557px;min-height:557px;width:calc(100% - 44px);padding:0;margin-inline:auto}
  .product-grid{display:block;height:100%}
  .product-category-rail,.product-side-note,.product-foreground-glass{display:none!important}
  .product-back{top:64px;left:0;gap:7px;font-size:9px;line-height:1.1}
  .product-back b{font-size:16px}
  .product-counter{display:flex;top:64px;right:0;gap:8px;font-size:9px;line-height:1.1}
  .product-counter::after{width:30px}

  .product-media-stage{position:absolute;left:0;right:0;top:70px;height:218px;margin:0;overflow:visible}
  .product-object{left:49%;top:50%;width:84%;height:112%;max-width:none;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 18px 23px rgba(0,0,0,.35))}
  .product-360{display:grid;right:0;bottom:5px;width:48px;height:48px;font-size:9px;line-height:1.05;border-color:rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.2)}

  .product-details{position:absolute;z-index:7;left:0;right:0;top:288px;max-width:none;padding:0;margin:0}
  .product-kicker{margin:0 0 7px;font-size:9px;line-height:1;gap:9px;color:rgba(255,255,255,.72)}
  .product-kicker::after{width:23px}
  .product-details h1{font-size:30px;line-height:.92;letter-spacing:-.055em}
  .product-description{max-width:330px;margin:7px 0 8px;font-size:12px;line-height:1.25;color:rgba(255,255,255,.9)}

  .product-spec-list{height:86px;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:10px 6px;margin:0 0 7px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .product-spec-list .product-spec{display:block;min-width:0;padding:0 7px;border-right:1px solid rgba(255,255,255,.14)}
  .product-spec-list .product-spec:last-child{border-right:0}
  .product-spec-list .product-spec__icon{width:24px;height:24px;margin:0 0 6px;padding:5px}
  .product-spec-list dt{margin-bottom:2px;font-size:7.5px;line-height:1.05;color:rgba(255,255,255,.62)}
  .product-spec-list dd{font-size:8.3px;line-height:1.18;overflow-wrap:anywhere}
  .product-actions{max-width:none;gap:6px}
  .product-actions .button{min-height:40px;height:40px;padding-inline:18px;font-size:11px;line-height:1;border-radius:999px}
  .product-actions .plus{width:28px;height:28px;font-size:17px}
  .product-spec-dock{display:none!important}

  .product-projects{height:250px;min-height:250px;padding:12px 0 10px;overflow:hidden}
  .product-projects>.shell{width:calc(100% - 44px)}
  .projects-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin:0 0 8px}
  .projects-head>div:first-child{grid-column:1;min-width:0}
  .projects-kicker{margin:0 0 5px;font-size:8px;line-height:1;gap:8px}
  .projects-kicker::after{width:20px}
  .projects-head h2{font-size:26px;line-height:.88;letter-spacing:-.055em}
  .projects-copy{display:none}
  .projects-nav{grid-column:2;grid-row:1;display:flex;align-items:flex-end;gap:7px;align-self:end;justify-self:end;padding-bottom:1px}
  .projects-head-counter{display:inline-block;font-size:8.5px;line-height:1;white-space:nowrap;color:rgba(255,255,255,.76)}
  .projects-controls{display:flex;gap:5px}
  .projects-controls button{width:36px;height:36px;font-size:17px}
  .projects-rail{height:164px;min-height:164px;gap:9px;padding-right:44px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
  .projects-rail::-webkit-scrollbar{display:none}
  .project-card,.project-card.is-active{flex:0 0 77vw;min-width:77vw;height:164px;border-radius:18px;scroll-snap-align:start}
  .project-card__meta{left:14px;right:12px;top:13px;gap:7px;font-size:8px}
  .project-card__meta span:last-child{width:24px}
  .project-card__title{left:14px;top:31px;font-size:11px}
  .project-card__body{left:14px;bottom:13px;max-width:210px;opacity:1;transform:none}
  .project-card__body h3{margin-bottom:8px;font-size:17px;line-height:1.02}
  .project-card__body .button{min-height:36px;padding-inline:14px;font-size:9px}
  .project-card__open{display:none}
  .projects-foot{display:none}

  .product-footer{height:65px;padding:10px 0 7px}
  .product-footer .shell{width:calc(100% - 44px)}
  .product-footer__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
  .product-footer__logo{font-size:22px}
  .product-footer nav{display:flex;align-items:center;justify-content:center;gap:8px;font-size:6.5px;white-space:nowrap}
  .product-footer__social{display:flex;gap:5px}
  .product-footer__social a{width:28px;height:28px}
  .product-footer__social svg{width:13px;height:13px}
  .product-footer__legal{margin-top:5px;text-align:right;font-size:6.3px}
}

/* Review fix: mobile product header uses the same readable glass grammar as the landing header. */
@media (max-width:620px){
  .product-body .site-header{top:10px!important;left:0!important;right:0!important}
  .product-body .nav-shell{
    width:calc(100% - 18px)!important;max-width:none!important;height:50px!important;min-height:50px!important;
    margin:0 auto!important;padding:0!important;display:grid!important;grid-template-columns:52px minmax(0,1fr) 42px!important;gap:6px!important;
    background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important
  }
  .product-body .logo{font-size:24px!important;color:#fff!important;justify-self:start}
  .product-body .nav-cta{display:none!important}
  .product-body .nav-links{
    display:flex!important;width:100%!important;height:46px!important;justify-self:stretch!important;align-items:center!important;gap:0!important;padding:3px!important;
    border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.14)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.2)!important;backdrop-filter:blur(18px) saturate(1.2)!important;box-shadow:inset 0 1px rgba(255,255,255,.24)!important
  }
  .product-body .nav-links a{display:none!important;flex:1;min-height:38px;padding:0 4px!important;align-items:center;justify-content:center;border-radius:999px;font-size:8px!important;line-height:1!important;color:rgba(255,255,255,.68)!important;white-space:nowrap}
  .product-body .nav-links a:nth-child(2),.product-body .nav-links a:nth-child(3),.product-body .nav-links a:nth-child(4),.product-body .nav-links a:nth-child(5){display:flex!important}
  .product-body .nav-links a:nth-child(2){background:rgba(255,255,255,.92)!important;color:#111!important;box-shadow:0 6px 16px rgba(0,0,0,.14)!important}
  .product-menu-button{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:42px!important;height:42px!important;margin:0!important;justify-self:end!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important}
  .product-back,.product-counter{top:70px!important}
}