/* ============================================================
   R2A — Responsive / smartphone layer
   Desktop styles remain in 10-base / 20-components / 30-pages.
   This file only adapts layout and touch ergonomics.
   ============================================================ */

@media (max-width: 980px){
  html,body{max-width:100%;overflow-x:hidden}

  .container{
    width:min(var(--max),calc(100% - 28px));
  }

  .hero-grid,
  .performance,
  .about,
  .product-layout,
  .footer-grid,
  .grid-3,
  .grid-2,
  .admin-grid,
  .feature-visual-grid{
    grid-template-columns:1fr;
  }

  /* Header remains compact; navigation becomes horizontally scrollable. */
  .site-header{
    padding-top:env(safe-area-inset-top);
  }

  .nav{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    min-height:64px;
    padding:8px 0 9px;
    gap:8px 10px;
  }

  .brand{grid-column:1;grid-row:1}
  .brand img{width:64px}

  .nav-actions{
    grid-column:3;
    grid-row:1;
    width:auto;
    justify-content:flex-end;
  }

  .nav-actions .btn{
    min-height:44px;
    padding:10px 14px;
  }

  .nav-links{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:6px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:1px 0 3px;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    flex:0 0 auto;
    white-space:nowrap;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);
    font-size:.88rem;
  }

  /* Home */
  .hero{padding:42px 0 30px}
  .hero-grid{gap:22px}
  .hero-copy h1{
    font-size:clamp(2.65rem,10vw,4.3rem);
    line-height:.94;
  }
  .hero-copy p{font-size:1rem}
  .hero-card{
    min-height:0;
    aspect-ratio:4/3;
    border-radius:24px;
  }
  .hero-card img{padding:18px}

  .section{padding:52px 0}
  .section-title{
    font-size:clamp(2rem,8vw,3.1rem);
    line-height:1;
  }

  .category-card,
  .feature-visual-card,
  .legal-card{
    border-radius:20px;
  }

  .category-visual{aspect-ratio:5/4}
  .category-body{padding:18px}

  .performance{gap:20px}
  .performance-media{
    min-height:0;
    aspect-ratio:4/3;
    border-radius:22px;
  }

  .feature-visual-grid{gap:16px;margin-top:22px}
  .feature-photo--close,
  .feature-photo--detail{aspect-ratio:5/4}
  .feature-photo--wide{aspect-ratio:16/9}

  .about{gap:22px}
  .about-photo{
    width:100%;
    max-width:560px;
    margin-inline:auto;
    border-radius:22px;
  }

  /* Reels become a native-feeling swipe carousel on phones/tablets. */
  .reels-grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 12px;
    margin-inline:-2px;
  }
  .reels-grid::-webkit-scrollbar{display:none}
  .reel-card{
    flex:0 0 min(320px,76vw);
    scroll-snap-align:start;
  }

  /* Product pages */
  .page-head{padding:30px 0 12px}
  .page-head h1{font-size:clamp(2.15rem,9vw,3.2rem)}
  .breadcrumbs{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.88rem;
  }

  .product-layout{gap:20px}
  .gallery-card{
    min-height:0;
    aspect-ratio:1/1;
    padding:12px;
    border-radius:22px;
  }
  .gallery-card img{
    width:100%;
    max-height:100%;
  }

  .thumb-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:0 0 5px;
  }
  .thumb-row::-webkit-scrollbar{display:none}
  .thumb{
    flex:0 0 78px;
    width:78px;
    height:92px;
    min-height:44px;
  }
  .thumb img{max-height:74px}

  .product-panel{
    padding:20px;
    border-radius:22px;
  }
  .product-panel h2{font-size:1.75rem!important}
  .price{font-size:1.85rem}

  .product-panel > .row{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px!important;
  }
  .product-panel > .row .btn{
    width:100%;
    min-width:0;
  }

  /* Footer */
  .footer{padding:34px 0 calc(44px + env(safe-area-inset-bottom))}
  .footer-grid{gap:26px}
}

/* ============================================================
   Phones
   ============================================================ */
@media (max-width: 640px){
  .container{
    width:calc(100% - 22px);
  }

  body::before{
    background-size:138vw auto;
    background-position:center 48%;
    opacity:.05;
    filter:blur(1px) saturate(.9);
  }

  .brand img{width:58px}

  .nav{
    gap:7px 8px;
    padding-bottom:8px;
  }

  .nav-links a{
    font-size:.82rem;
    min-height:38px;
    padding:7px 10px;
  }

  .btn,
  button,
  select,
  input,
  textarea{
    min-height:44px;
  }

  /* Prevent iOS Safari from zooming forms. */
  input,
  select,
  textarea{
    font-size:16px;
  }

  .hero{padding:32px 0 24px}
  .hero-copy h1{
    font-size:clamp(2.35rem,12.3vw,3.25rem);
    letter-spacing:-.045em;
  }
  .eyebrow{
    margin-bottom:13px;
    font-size:.72rem;
  }
  .hero-copy p{font-size:.96rem;line-height:1.55}

  .hero-copy > div:last-child{
    display:grid!important;
    grid-template-columns:1fr;
    gap:9px!important;
    margin-top:18px!important;
  }
  .hero-copy > div:last-child .btn{width:100%}

  .hero-card{
    aspect-ratio:1/1;
    border-radius:20px;
  }
  .hero-card img{padding:10px}

  .section{padding:42px 0}
  .section-title{
    font-size:clamp(1.9rem,10vw,2.65rem);
    letter-spacing:-.035em;
  }
  .section-copy{
    line-height:1.55;
    font-size:.95rem;
  }

  .grid-3{gap:15px}
  .category-visual{aspect-ratio:1/1}
  .category-body{
    padding:16px;
  }
  .category-body h3{font-size:1.4rem}
  .category-body .btn{width:100%}

  .performance-media{aspect-ratio:1/1}
  .feature-copy{padding:15px}
  .feature-title-row{gap:9px}
  .feature-title-row .icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .feature-copy p{font-size:.93rem;line-height:1.5}

  .values{gap:7px}
  .badge{
    font-size:.82rem;
    padding:8px 10px;
  }

  .about-point{
    padding:13px 14px;
    font-size:.94rem;
  }

  .reel-card{
    flex-basis:min(300px,82vw);
    border-radius:16px;
  }
  .reel-ig-shell,
  .reel-player-shell{
    border-radius:16px;
  }
  .reel-ig-embed{
    top:-138px;
    left:-18%;
    width:138%;
    height:1140px;
    transform:scale(1.28);
  }
  .reel-expand-overlay{
    width:44px;
    height:44px;
  }

  .reel-modal{padding:10px}
  .reel-modal-panel{
    width:min(410px,92vw);
    max-height:92dvh;
  }
  .reel-modal-close{
    right:6px;
    top:6px;
  }

  /* Product page */
  .page-head{padding-top:24px}
  .page-head h1{font-size:2.15rem}
  .gallery-card{
    aspect-ratio:1/1.04;
    padding:8px;
  }
  .product-panel{padding:16px}
  .product-panel h2{font-size:1.55rem!important}
  .price{font-size:1.7rem}

  .sizes{
    gap:6px;
    margin-bottom:16px;
  }
  .size-chip{
    padding:8px 10px;
    font-size:.88rem;
  }

  .form-grid{gap:11px}
  .selector,
  .input,
  textarea{
    padding:12px 13px;
  }
  .notice{
    padding:12px 13px;
    font-size:.9rem;
  }

  .product-panel > .row{
    grid-template-columns:1fr;
  }

  /* Cart becomes a thumb-friendly bottom sheet. */
  body > .cart-drawer{
    top:auto;
    right:0;
    bottom:0;
    width:100%;
    height:min(86dvh,720px);
    max-height:86dvh;
    padding:15px 13px calc(15px + env(safe-area-inset-bottom));
    border-left:0;
    border-top:1px solid #303030;
    border-radius:24px 24px 0 0;
    transform:translateY(104%);
    transition:transform .25s ease;
    box-shadow:0 -18px 60px rgba(0,0,0,.55);
  }
  body > .cart-drawer.open{
    right:0;
    transform:translateY(0);
  }
  .cart-drawer > .row:first-child{
    position:relative;
    padding-top:4px;
  }
  .cart-drawer > .row:first-child::before{
    content:"";
    position:absolute;
    width:44px;
    height:4px;
    border-radius:999px;
    background:#444;
    left:50%;
    top:-8px;
    transform:translateX(-50%);
  }
  .cart-item{padding:11px}
  .cart-drawer .promo-box{
    grid-template-columns:1fr auto;
  }
  .cart-drawer .promo-box .btn{
    min-width:98px;
    padding-inline:12px;
  }
  #checkoutBtn{width:100%}

  .legal-card[style]{
    padding:18px!important;
  }

  .footer{margin-top:28px}
  .footer img{max-width:145px!important}
}

/* Very narrow phones (320–390 px). */
@media (max-width: 390px){
  .container{width:calc(100% - 18px)}

  .brand img{width:54px}
  .nav-actions .btn{
    padding-inline:11px;
    font-size:.88rem;
  }

  .hero-copy h1{font-size:2.25rem}
  .section-title{font-size:1.9rem}

  .reel-card{flex-basis:84vw}

  .cart-drawer .promo-box{
    grid-template-columns:1fr;
  }
  .cart-drawer .promo-box .btn{width:100%}

  .cart-drawer .row{
    gap:9px;
  }
}

/* Short landscape phones. */
@media (max-height: 520px) and (orientation: landscape){
  .site-header{position:relative}
  body > .cart-drawer{
    height:96dvh;
    max-height:96dvh;
    border-radius:16px 16px 0 0;
  }
  .reel-modal-panel{max-height:96dvh}
}

/* Touch devices: do not rely on hover effects. */
@media (hover:none){
  .btn:hover{transform:none}
}

/* Accessibility / battery friendly motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}