@media (max-width: 1280px){
  .brand-lockup{left:22px}
  .utility-bar{right:18px}
  .hero-copy{left:28px}
  .camera-stack{right:18px}
  .config-dock{width:min(1080px,calc(100vw - 180px));grid-template-columns:minmax(0,1fr) 292px}
  .dock-commerce{grid-template-columns:minmax(0,1fr) 118px;padding-left:12px;padding-right:12px}
  .dock-price__value{font-size:28px}
  .viewer-tools{left:20px}
  /*.drag-hint{right:106px}*/
}

@media (max-width: 1080px) and (min-width: 821px){
  .brand-lockup__fortuner,.brand-lockup__divider{display:none}
  .utility-btn>span:not(.share-feedback){display:none}
  .utility-btn:not(.utility-btn--icon):not(.utility-btn--wa){width:36px;padding:0}
  .config-dock{width:calc(100vw - 110px);height:184px;grid-template-columns:minmax(0,1fr) 264px}
  .dock-rail{grid-template-columns:repeat(8,minmax(58px,1fr))}
  .pane__trigger-label{font-size:11px}
  .dock-commerce{grid-template-columns:1fr 104px;gap:8px}
  .dock-price__meta{display:none}
  .viewer-tools{display:none}
  .hero-copy{display:none}
  /*.drag-hint{right:94px}*/
}

/* =========================================================
   MOBILE UI
   - No horizontal category scrollbar
   - All 8 categories visible as 4 x 2 grid
   - Active options fit inside the dock without sideways scroll
   ========================================================= */
@media (max-width: 820px){
  html,body,.app,.experience,.stage{width:100%;max-width:100%;overflow-x:hidden}
  body{overflow-y:hidden}

  .stage-ui::before{
    background:
      linear-gradient(180deg,rgba(4,11,19,.76),rgba(4,11,19,.12) 112px,transparent 184px),
      linear-gradient(0deg,rgba(3,9,15,.6),transparent 350px)
  }

  .brand-lockup{left:12px;top:13px;height:32px;gap:8px}
  .toyota-emblem{width:31px;height:24px}
  .toyota-emblem svg{width:31px;height:24px}
  .brand-lockup__toyota{font-size:15px}
  .brand-lockup__fortuner,.brand-lockup__divider{display:none}

  .utility-bar{right:8px;top:11px;gap:2px;max-width:calc(100vw - 145px)}
  .utility-btn{height:34px;width:34px!important;padding:0;flex:0 0 34px}
  .utility-btn>span:not(.share-feedback){display:none}
  .utility-btn svg{width:19px;height:19px}
  .theme{display:none}

  .camera-stack{
    top:60px;right:9px;transform:none;flex-direction:row;gap:3px;
    padding:4px;border-radius:18px
  }
  .camera-pill{width:54px;height:32px;font-size:11px}

  .hero-copy,.viewer-tools,.drag-hint{display:none}

  .config-dock{
    left:8px;right:8px;bottom:8px;transform:none;width:auto;height:322px;
    grid-template-columns:1fr;grid-template-rows:238px 84px;
    border-radius:18px;overflow:initial
  }

  .dock-config{min-width:0;padding:8px 8px 8px}
  .dock-rail{
    position:relative;height:100%;min-width:0;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:54px 54px;
    column-gap:3px;row-gap:3px;
    overflow:visible;padding:0
  }
  .pane{display:contents}
  .pane__trigger{
    grid-row:auto;min-width:0;width:100%;height:54px;
    padding:4px 2px;gap:3px;border-radius:9px
  }
  .pane__trigger-icon{width:23px;height:23px}
  .pane__trigger-icon svg{width:20px;height:20px}
  .pane__trigger-copy{width:100%;min-width:0}
  .pane__trigger-label{
    width:100%;font-size:10.5px;line-height:1.05;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }

  .pane__content{
    position:absolute;left:0;right:0;top:auto;bottom:2px;
    display:none!important;height:108px;min-width:0;
    padding:10px 0 4px;border-top:1px solid rgba(255,255,255,.11)
  }
  .pane.is-active .pane__content{display:block!important}

  .options{
    width:100%;height:92px;min-width:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));
    align-items:center;gap:5px;padding:0;
    overflow:hidden;scrollbar-width:none
  }
  .options::-webkit-scrollbar{display:none}

  .opt{
    width:100%;min-width:0;max-width:none;height:86px;
    padding:4px 3px 6px;border-radius:9px;
    grid-template-rows:34px 25px 13px;row-gap:2px;
    align-content:center;overflow:hidden
  }
  .opt__sw{width:32px;height:32px}
  .opt__sw svg{width:19px;height:19px}
  .paint-opt .opt__sw{width:32px;height:32px}
  .opt__name{
    width:100%;max-width:100%;min-height:25px;padding:0 1px;
    font-size:10.5px;line-height:1.12;
    white-space:normal;overflow:hidden;text-overflow:clip;
    display:flex;align-items:center;justify-content:center;text-align:center
  }
  .opt__price{font-size:10px;line-height:13px;min-height:13px;align-self:end}

  .dock-commerce{
    min-width:0;border-left:0;border-top:1px solid rgba(255,255,255,.12);
    padding:10px 12px;
    display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center
  }
  .dock-price__value{font-size:24px}
  .dock-price__label{margin-top:4px;font-size:10.5px}
  .dock-price__meta{display:none}

  .dock-actions{display:block;min-width:0}
  .dock-cta{width:100%;height:44px;font-size:11.5px;padding:0 10px;white-space:nowrap}
  .dock-secondary{display:none!important}
}

@media (max-width: 560px){
  .brand-lockup__toyota{font-size:14px;letter-spacing:.02em}
  .utility-bar .utility-btn:nth-child(3){display:none} /* screenshot hidden only on very small phones */
  .utility-bar{max-width:calc(100vw - 132px)}

  .camera-stack{top:56px}
  .camera-pill{width:48px;height:30px;font-size:10.5px}

  .config-dock{left:6px;right:6px;bottom:6px;height:318px;grid-template-rows:236px 82px}
  .dock-config{padding:7px 7px 7px}
  .dock-rail{grid-template-rows:53px 53px;gap:3px}
  .pane__trigger{height:53px}
  .pane__trigger-label{font-size:10px}
  .pane__content{top:auto;bottom:2px;height:106px;padding:9px 0 4px}

  .options{height:90px;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:4px}
  .opt{height:84px;padding:4px 2px 6px;grid-template-rows:33px 24px 13px;row-gap:2px}
  .opt__sw,.paint-opt .opt__sw{width:31px;height:31px}
  .opt__name{font-size:10px}
  .opt__price{font-size:9.5px}

  .dock-commerce{grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 10px}
  .dock-price__value{font-size:22px}
  .dock-price__label{font-size:9.5px}
  .dock-cta{height:42px;font-size:11px;padding:0 8px}

  .modal__summary{grid-template-columns:1fr}
  .qrow{grid-template-columns:1fr}
}

@media (max-width: 390px){
  .brand-lockup__toyota{font-size:13px}
  .toyota-emblem,.toyota-emblem svg{width:28px}
  .utility-btn{width:32px!important;height:32px;flex-basis:32px}
  .utility-btn svg{width:18px;height:18px}

  .camera-pill{width:45px}

  .config-dock{height:312px;grid-template-rows:232px 80px}
  .pane__trigger-label{font-size:9.6px}
  .pane__content{top:auto;bottom:2px;height:104px}
  .options{height:88px;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:3px}
  .opt{height:82px;grid-template-rows:32px 23px 13px}
  .opt__name{font-size:9.6px}

  .dock-commerce{grid-template-columns:102px minmax(0,1fr);gap:9px;padding:8px 9px}
  .dock-price__value{font-size:21px}
  .dock-cta{font-size:10.5px}
}

@media (max-height: 680px) and (min-width: 821px){
  .config-dock{height:166px;bottom:12px}
  .dock-rail{grid-template-rows:62px 1fr}
  .pane__trigger{padding:3px}
  .options{height:74px}
  .opt{height:70px;grid-template-rows:31px auto auto}
  .drag-hint{bottom:188px}
  .viewer-tools{bottom:18px}
}
@media(max-width: 1900px){
    .hero-copy,.viewer-tools{display:none}
}