/* ALTAPARTE mobile audit — authoritative responsive layer (v27)
   Reference viewport: iPhone 14 Pro, 393 × 852 CSS px.
   This file loads after app/conversion/commerce styles and only affects <= 850px. */

@media (max-width:850px){
  html,body,.app{max-width:100%;overflow-x:hidden}
  .app{min-width:0}
  .app img,.app video,.app canvas{max-width:100%}
  .app button,.app a,.app input,.app select,.app textarea{min-width:0}
  .app .page{width:100%;max-width:100%;padding-inline:20px}
  .app .row{min-width:0}
  .app .primary,.app .outline,.app .quiet,.app .white-button{min-height:44px}

  /* Header / department navigation */
  .app .topbar{padding:14px 20px;gap:10px;min-width:0}
  .app .topbar .wordmark{min-width:0;flex:1 1 auto;overflow:hidden}
  .app .topbar .wordmark img.header-brand-logo{max-width:min(46vw,190px)!important;width:auto!important;flex-basis:auto!important;height:auto!important;margin:0!important}
  .app .header-actions{flex:0 0 auto;gap:2px}
  .app .header-actions .icon-button,.app .header-actions .quiet{min-width:44px;min-height:44px;padding:10px}
  .app .dept-nav{width:100%;max-width:100%;display:flex!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:6px;padding:8px 14px;justify-content:flex-start}
  .app .dept-nav::-webkit-scrollbar{display:none}
  .app .dept-button{flex:0 0 auto;min-width:84px;padding:9px 12px!important;white-space:nowrap}
  .app .dept-button strong{font-size:13px}
  .app .dept-button small{display:none}

  /* Shared headings / sections */
  .app h1{font-size:clamp(38px,11vw,56px);letter-spacing:-.055em}
  .app .section-head{align-items:flex-start;flex-direction:column;gap:14px}
  .app .section-head>*,.app .studio-intro>*,.app .workshop-intro>*,.app .portfolio-intro>*{min-width:0;max-width:100%}
  .app .filters{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
  .app .filters::-webkit-scrollbar{display:none}
  .app .filter{flex:0 0 auto;min-height:40px;white-space:nowrap}

  /* Product/detail pages */
  .app .detail-page{grid-template-columns:1fr!important;gap:24px!important;max-width:100%}
  .app .detail-image{width:100%;max-width:100%}
  .app .detail-image img{width:100%;height:auto;max-height:62vh;object-fit:contain}
  .app .detail-copy{min-width:0;padding:0!important}
  .app .detail-copy h1{font-size:clamp(34px,9vw,44px);overflow-wrap:anywhere}
  .app .detail-copy .row{align-items:flex-start}
  .app .detail-copy .primary{white-space:normal;text-align:center}

  /* Modals / cart / inquiry */
  .app dialog.modal,.app .modal{width:min(620px,calc(100vw - 20px));max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);margin:auto;border-radius:14px;overflow:hidden}
  .app .modal-head{padding:16px 18px;gap:12px}
  .app .modal-head h2{font-size:22px;min-width:0;overflow-wrap:anywhere}
  .app .modal-content{padding:18px;gap:14px;overflow-y:auto;overscroll-behavior:contain;max-height:calc(100dvh - 90px)}
  .app .summary-line{gap:12px;min-width:0}
  .app .summary-line>*{min-width:0}
  .app .summary-line>span:last-child,.app .summary-line>strong:last-child{text-align:right;white-space:nowrap}
  .app .cart-item{display:grid;grid-template-columns:56px minmax(0,1fr) 40px;gap:10px;padding:14px 0;align-items:start}
  .app .cart-item img{width:56px;height:70px}
  .app .cart-item .cart-info{min-width:0}
  .app .cart-item h3{font-size:15px;overflow-wrap:anywhere}
  .app .cart-item .row{gap:6px;flex-wrap:wrap}
  .app .cart-item>.icon-button{justify-self:end}

  /* Footer */
  .app .customer-footer{grid-template-columns:1fr 1fr!important;gap:26px 18px!important;padding-inline:20px}
  .app .customer-footer>div:first-child{grid-column:1/-1}
  .app .customer-footer nav{min-width:0}
  .app .customer-footer nav a,.app .customer-footer nav button{overflow-wrap:anywhere}
  .app .footer-bottom{grid-column:1/-1;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;overflow:visible!important}
  .app .footer-bottom small{white-space:normal!important;overflow-wrap:anywhere}
  .app .site-footer{padding:22px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}

  /* Support / cookie UI */
  .support-widget{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .support-widget #support-panel{width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);padding:16px}
  .cookie-settings{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-width:none;padding:18px}

  /* Studio: carousel is readable instead of fixed-height/cropped. */
  .app[data-department=studio] #asset-results.bundle-carousel{gap:14px!important;padding:4px 2px 18px!important;scroll-padding-inline:2px}
  .app[data-department=studio] .bundle-carousel>.product-card{
    flex:0 0 min(78vw,310px)!important;
    width:min(78vw,310px)!important;
    min-width:min(78vw,310px)!important;
    height:auto!important;min-height:430px!important;max-height:none!important;
    padding:14px!important;overflow:hidden!important
  }
  .app[data-department=studio] .bundle-carousel .product-image{
    width:100%!important;height:250px!important;min-height:250px!important;max-height:250px!important;flex:0 0 250px!important;margin:0 0 14px!important
  }
  .app[data-department=studio] .bundle-carousel h3{
    flex:0 0 auto!important;height:auto!important;min-height:44px!important;max-height:none!important;
    margin:0 0 7px!important;font-size:18px!important;line-height:22px!important;
    overflow:visible!important;white-space:normal!important;overflow-wrap:anywhere!important
  }
  .app[data-department=studio] .bundle-carousel .brand{height:auto!important;min-height:18px!important;flex:0 0 auto!important;white-space:normal}
  .app[data-department=studio] .bundle-carousel .meta{
    height:auto!important;min-height:18px!important;max-height:none!important;flex:0 0 auto!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere
  }
  .app[data-department=studio] .bundle-carousel .price{margin-top:auto!important;min-height:22px!important;flex:0 0 auto!important;white-space:normal}
  .app[data-department=studio] .carousel-controls{width:100%;justify-content:space-between;gap:10px;margin:12px 0 30px}
  .app[data-department=studio] .carousel-controls p{flex:1;min-width:0;text-align:center;font-size:13px;line-height:1.35}
  .app[data-department=studio] .carousel-controls button{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0}
  .app[data-department=studio] .studio-feature{grid-template-columns:1fr!important}
  .app[data-department=studio] .studio-feature-copy{padding:22px}
  .app[data-department=studio] .studio-business{grid-template-columns:1fr!important;align-items:flex-start}
  .app[data-department=studio] .studio-business .primary{width:100%}

  /* Merch */
  .app[data-department=merch] .merch-hero{grid-template-columns:1fr!important;min-height:0!important;gap:20px!important}
  .app[data-department=merch] .merch-copy{padding:24px 20px!important}
  .app[data-department=merch] .merch-copy h1{font-size:clamp(42px,12vw,56px)!important;max-width:100%;overflow-wrap:anywhere}
  .app[data-department=merch] .merch-visual{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:4/5!important;justify-self:stretch!important}
  .app[data-department=merch] .merch-visual>img{height:100%!important;width:100%!important;object-fit:cover!important}
  .app[data-department=merch] .product-recommendations{width:100%!important;max-width:100%!important;margin-top:36px!important}
  .app[data-department=merch] .recommendation-grid{grid-template-columns:1fr!important;gap:10px!important}
  .app[data-department=merch] .recommendation-card{padding:9px!important}
  .app[data-department=merch] .recommendation-product{grid-template-columns:64px minmax(0,1fr)!important;column-gap:10px!important}
  .app[data-department=merch] .recommendation-image{width:64px!important;height:76px!important}

  /* Portfolio */
  .app[data-department=portfolio] .portfolio-project{min-width:0}
  .app[data-department=portfolio] .portfolio-project-copy{min-width:0}
  .app[data-department=portfolio] .portfolio-project-copy h2{overflow-wrap:anywhere}
  .app[data-department=portfolio] .gallery-toolbar{gap:10px}
  .app[data-department=portfolio] .gallery-pagination{width:100%;justify-content:space-between}
}

@media (max-width:580px){
  .app .page{padding:18px 14px 34px}
  .app .utility{padding:6px 14px;gap:8px;white-space:normal}
  .app .topbar{padding:12px 14px}
  .app .topbar .wordmark img.header-brand-logo{max-width:min(42vw,150px)!important}
  .app .header-actions .quiet,.app .header-actions .icon-button{padding:9px;min-width:42px;min-height:42px}
  .app .dept-nav{padding-inline:10px}
  .app .dept-button{min-width:76px;padding:8px 10px!important}
  .app .dept-button strong{font-size:12px}
  .app h1{font-size:clamp(36px,11vw,48px)}
  .app h2{font-size:clamp(28px,8vw,36px)}

  /* Product cards: keep two columns but let commerce controls breathe. */
  .app[data-department=merch] .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
  .app[data-department=merch] .merch-card-shell{min-width:0}
  .app[data-department=merch] .merch-card-commerce{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;align-items:stretch!important}
  .app[data-department=merch] .merch-card-commerce .price{min-width:0;overflow-wrap:anywhere}
  .app[data-department=merch] .merch-quick-add{width:100%!important;min-width:0!important;height:44px!important;padding:0 10px!important;justify-content:center!important;font-size:12px!important;gap:7px!important}
  .app[data-department=merch] .merch-quick-add .icon{width:17px!important;height:17px!important}
  .app[data-department=merch] .image-label{gap:10px;align-items:flex-start;flex-direction:column}

  /* Workshop: viewer first, controls below; no squashed 2-column forms. */
  .app[data-department=workshop] .maker{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;align-items:stretch!important}
  .app[data-department=workshop] .maker>.canvas-column.has-workshop-estimate{
    order:1;width:100%!important;height:690px!important;min-height:690px!important;max-height:none!important;align-self:stretch!important;overflow:hidden!important
  }
  .app[data-department=workshop] .tools-panel{order:2;width:100%;border-right:0!important;border-bottom:1px solid var(--line);padding:18px 14px!important;max-height:none!important;overflow:visible!important}
  .app[data-department=workshop] .config-panel{order:3;width:100%;grid-column:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:16px!important;padding:20px 14px!important;max-height:none!important;overflow:visible!important}
  .app[data-department=workshop] .config-panel>*{grid-column:1!important;min-width:0}
  .app[data-department=workshop] .config-panel .quote-box{grid-column:1!important;margin-top:0!important}
  .app[data-department=workshop] .asset-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .app[data-department=workshop] .asset-picker img{height:auto!important;aspect-ratio:1!important;max-height:140px}
  .app[data-department=workshop] .tool-tabs{max-width:none!important;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .app[data-department=workshop] .layer-row-manageable{grid-template-columns:38px 22px minmax(0,1fr) 38px!important;gap:6px!important}
  .app[data-department=workshop] .layer-visibility,.app[data-department=workshop] .layer-delete{width:38px!important;height:38px!important}
  .app[data-department=workshop] .maker-heading{align-items:flex-start;padding:14px!important}
  .app[data-department=workshop] .maker-heading>.row{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .app[data-department=workshop] .maker-heading .outline,.app[data-department=workshop] .maker-heading .primary{width:100%;min-width:0;padding:10px 8px;font-size:11px;white-space:normal;text-align:center}
  .app[data-department=workshop] .maker>.canvas-column.has-workshop-estimate .stage{inset:0 0 286px 0!important;min-height:0!important}
  .app[data-department=workshop] .maker>.canvas-column.has-workshop-estimate .canvas-bottom{left:12px!important;right:12px!important;bottom:296px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  .app[data-department=workshop] .canvas-bottom>*{max-width:100%}
  .app[data-department=workshop] .canvas-toolbar{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;width:auto!important;max-width:100%;gap:2px!important;padding:5px!important}
  .app[data-department=workshop] .canvas-toolbar button{min-width:40px!important;min-height:40px!important;padding:8px!important}
  .app[data-department=workshop] .maker>.canvas-column.has-workshop-estimate .workshop-estimate-horizontal{
    left:8px!important;right:8px!important;bottom:8px!important;width:auto!important;
    height:270px!important;min-height:270px!important;max-height:270px!important;
    padding:12px!important;gap:7px!important;border-radius:13px!important;overflow:hidden!important
  }
  .app[data-department=workshop] .workshop-estimate-horizontal>.row:nth-child(2){min-height:48px!important}
  .app[data-department=workshop] .workshop-estimate-horizontal #design-subtotal,.app[data-department=workshop] .workshop-estimate-horizontal .price{font-size:28px!important;line-height:1!important;max-width:100%;white-space:nowrap!important}
  .app[data-department=workshop] .workshop-estimate-horizontal>p{font-size:11px!important;line-height:1.45!important;overflow:visible!important}
  .app[data-department=workshop] .workshop-estimate-horizontal>.primary{min-height:44px!important}
  .app[data-department=workshop] .workshop-estimate-horizontal>.quiet{min-height:38px!important;white-space:normal;text-align:center}
  .app[data-department=workshop] .maker-footer{gap:10px!important;padding:12px 14px!important;display:grid!important;grid-template-columns:1fr!important;text-align:left}

  /* Studio carousel on iPhone: enough width and no clipped copy. */
  .app[data-department=studio] .bundle-carousel>.product-card{
    flex-basis:min(84vw,320px)!important;width:min(84vw,320px)!important;min-width:min(84vw,320px)!important;min-height:430px!important
  }
  .app[data-department=studio] .bundle-carousel .product-image{height:252px!important;min-height:252px!important;max-height:252px!important;flex-basis:252px!important}
  .app[data-department=studio] .carousel-controls{margin-bottom:26px!important}

  /* Portfolio: two columns are more legible than the previous 3-up 393px layout. */
  .app[data-department=portfolio] .portfolio-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important}
  .app[data-department=portfolio] .portfolio-page{padding-inline:14px!important}
  .app[data-department=portfolio] .portfolio-project{grid-template-columns:1fr!important;gap:14px!important}
  .app[data-department=portfolio] .portfolio-project-cover{min-height:180px}

  /* Forms / conversion panels */
  .conversion-panel{grid-template-columns:1fr!important;padding:20px!important;gap:18px!important}
  .conversion-trust{grid-template-columns:1fr!important}
  #customer-inquiry .conversion-form-grid{grid-template-columns:1fr!important}
  .app input,.app select,.app textarea{font-size:16px!important}

  /* Toast should not sit under the home indicator. */
  .app .toast{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100vw - 28px);max-width:420px;padding:12px 14px;text-align:center}
}

@media (max-width:420px){
  .app .page{padding-inline:12px}
  .app .product-grid{gap-inline:8px}
  .app[data-department=merch] .product-card h3{font-size:16px}
  .app[data-department=merch] .product-card .meta{font-size:10px}
  .app[data-department=studio] .bundle-carousel>.product-card{flex-basis:calc(100vw - 44px)!important;width:calc(100vw - 44px)!important;min-width:calc(100vw - 44px)!important}
  .app[data-department=workshop] .maker>.canvas-column.has-workshop-estimate{height:670px!important;min-height:670px!important}
  .app[data-department=workshop] .workshop-estimate-horizontal #design-subtotal,.app[data-department=workshop] .workshop-estimate-horizontal .price{font-size:26px!important}
  .app .customer-footer{grid-template-columns:1fr!important}
  .app .customer-footer>div:first-child{grid-column:1}
}