/* FERA MOBILE-ONLY NAVIGATION
   Desktop styles are intentionally untouched. Everything below activates at 650px and below. */
@media (max-width:650px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important;overflow-y:auto!important}

  .nav{height:72px!important;min-height:72px!important}
  .nav .logo{
    left:50%!important;right:auto!important;top:5px!important;
    width:118px!important;height:62px!important;
    transform:translateX(-50%)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    z-index:4!important;
    filter:brightness(.96)!important;
  }
  .nav .logo img{
    width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center!important;
  }

  .navlinks{display:none!important}

  .fera-mobile-menu-btn{
    position:absolute!important;left:16px!important;top:0!important;
    width:42px!important;height:72px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:0!important;border:0!important;background:transparent!important;color:#fff!important;
    cursor:pointer!important;z-index:8!important;
  }
  .fera-mobile-menu-btn span,
  .fera-mobile-menu-btn span::before,
  .fera-mobile-menu-btn span::after{
    content:"";display:block;width:24px;height:1.5px;background:#fff;
    position:absolute;left:9px;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease;
  }
  .fera-mobile-menu-btn span{position:relative}
  .fera-mobile-menu-btn span::before{left:0;top:-7px}
  .fera-mobile-menu-btn span::after{left:0;top:7px}
  .fera-mobile-menu-btn[aria-expanded="true"] span{background:transparent}
  .fera-mobile-menu-btn[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
  .fera-mobile-menu-btn[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

  .actions{
    right:12px!important;top:0!important;height:72px!important;
    gap:9px!important;z-index:7!important;
  }
  .actions .search-wrap{width:28px!important;min-width:28px!important;flex-basis:28px!important;height:38px!important}
  .actions .search-wrap.open{position:absolute!important;right:40px!important;top:17px!important;width:190px!important;min-width:190px!important;flex-basis:190px!important}
  .actions .search-wrap.open .search-input{width:158px!important;min-width:158px!important;flex-basis:158px!important;height:34px!important}
  .actions > a.icon-btn[aria-label="Account"]{display:none!important}
  .actions .cart-btn{width:30px!important;height:30px!important}
  .actions .cart-btn svg{width:28px!important;height:28px!important}

  .fera-mobile-drawer-backdrop{
    position:fixed;inset:0;z-index:110;
    background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .32s ease;
  }
  .fera-mobile-drawer-backdrop.open{opacity:1;pointer-events:auto}
  .fera-mobile-drawer{
    position:fixed;left:0;top:0;bottom:0;z-index:120;
    width:min(315px,84vw);padding:25px 22px 28px;
    background:linear-gradient(180deg,#090909,#000);
    border-right:1px solid rgba(255,255,255,.18);
    box-shadow:24px 0 65px rgba(0,0,0,.65);
    transform:translateX(-105%);transition:transform .42s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
  }
  .fera-mobile-drawer.open{transform:translateX(0)}
  .fera-mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.13)}
  .fera-mobile-drawer-brand{width:112px;height:55px;display:flex;align-items:center;overflow:visible}
  .fera-mobile-drawer-brand img{width:100%;height:100%;object-fit:contain}
  .fera-mobile-close{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);background:#000;color:#fff;font-size:25px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .fera-mobile-drawer-label{margin:27px 0 12px;font-size:9px;letter-spacing:3px;color:#666;font-weight:800}
  .fera-mobile-links{display:flex;flex-direction:column;gap:8px}
  .fera-mobile-link{
    min-height:52px;padding:0 15px;display:flex;align-items:center;
    border:1px solid rgba(255,255,255,.17);background:#050505;color:#fff;
    font-size:11px;font-weight:800;letter-spacing:2.5px;
    transition:background .25s ease,border-color .25s ease,transform .25s ease;
  }
  .fera-mobile-link:active{transform:scale(.985)}
  .fera-mobile-link:hover{background:#111;border-color:rgba(255,255,255,.5)}
  .fera-mobile-divider{height:1px;background:rgba(255,255,255,.1);margin:20px 0}
  .fera-mobile-small{font-size:9px!important;letter-spacing:2px!important;color:#aaa!important;border-color:rgba(255,255,255,.1)!important}

  /* Home hero: compact phone composition — artwork is never stretched. */
  .home{height:auto!important;min-height:0!important;display:block!important;overflow:visible!important}
  .home .hero{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100vw!important;
    height:100svh!important;
    min-height:0!important;max-height:none!important;
    background-color:#000!important;
    background-image:url("assets/fera-hero-mobile-final.jpg")!important;
    background-repeat:no-repeat!important;
    background-size:175% 94%!important;
    background-position:center center!important;
  }
  .home .hero-content{
    position:absolute!important;left:0!important;right:0!important;top:var(--ship)!important;
    height:100svh!important;min-height:0!important;max-height:none!important;
  }
  .home .hero-search{
    left:50%!important;top:62%!important;
    width:76vw!important;max-width:440px!important;height:52px!important;
    transform:translate3d(-50%,-50%,0)!important;
    box-sizing:border-box!important;display:flex!important;align-items:center!important;
    overflow:hidden!important;margin:0!important;padding:0!important;
  }
  .home .hero-search input{
    flex:1 1 auto!important;min-width:0!important;width:0!important;height:100%!important;
    box-sizing:border-box!important;margin:0!important;border:0!important;outline:0!important;
    padding:0 16px!important;background:transparent!important;
    font-size:16px!important;line-height:58px!important;text-align:center!important;
    -webkit-text-size-adjust:100%!important;-webkit-appearance:none!important;appearance:none!important;
    caret-color:#fff!important;color:#fff!important;position:relative!important;z-index:2!important;
  }
  .home .hero-search input::placeholder{color:#fff!important;opacity:.9!important;text-align:center!important}
  .home .hero-search button{flex:0 0 58px!important;width:58px!important;height:100%!important;position:relative!important;z-index:3!important}
  .home .hero-search svg{width:24px!important;height:24px!important}
  .home .hero-scroll{display:none!important}
  .home .nav{border-bottom:1px solid rgba(255,255,255,.16)!important}
  .home + script + script + script + script + footer{margin-top:0!important}

  /* Legal pages / footer remain scrollable and readable on phones. */
  .legal-header{height:72px!important;min-height:72px!important;padding:0 18px!important;justify-content:center!important}
  .legal-header a,.legal-header > div{width:118px!important;height:62px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .legal-header img{width:118px!important;height:62px!important;object-fit:contain!important}
  .legal-page{padding:50px 20px 25px!important}
  .legal-page h1{font-size:34px!important;letter-spacing:4px!important}
  .legal-page h2{font-size:16px!important;letter-spacing:2px!important}
  .legal-page p,.legal-page li{font-size:13px!important;line-height:1.8!important}

  .fera-footer{margin-top:0!important;padding:38px 20px 25px!important}
  .fera-footer-inner{display:flex!important;flex-direction:column!important;gap:28px!important}
  .fera-footer-inner > div:first-child{width:100%!important}
  .fera-footer-brand,.fera-footer-brand img{width:150px!important;height:auto!important}
  .fera-footer-copy{max-width:100%!important}
  .fera-footer-links{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;justify-content:stretch!important}
  .fera-footer-links a{font-size:9px!important;letter-spacing:1.4px!important}
  .fera-footer-bottom{margin-top:26px!important;font-size:8px!important}

  /* Collection pages: give the content room under the mobile header. */
  .page{min-height:calc(100svh - var(--ship) - var(--nav))!important;padding:38px 16px 70px!important;overflow:visible!important}
  .collection{width:100%!important}
  .collection-head{align-items:flex-end!important}
  .collection-title{font-size:18px!important;letter-spacing:4px!important}
  .collection-sub{font-size:8px!important;letter-spacing:1.4px!important}
  .product-grid{gap:14px!important}
  .product-name{font-size:10px!important;letter-spacing:.4px!important}
  .product-price{font-size:10px!important}
}

@media(min-width:651px){
  .fera-mobile-menu-btn,.fera-mobile-drawer,.fera-mobile-drawer-backdrop{display:none!important}
}