/* Shared mobile layouts. Desktop typography and layouts remain in each concept. */
@media (max-width:760px){
 html{scroll-padding-top:64px}
 body{padding-bottom:env(safe-area-inset-bottom)}
 *,*::before,*::after{box-sizing:border-box}
 img,video,svg{max-width:100%}
 figure,main,section,article,aside,form,fieldset{min-width:0}
 .wrap{width:calc(100% - 36px)}
 input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px;max-width:100%;min-height:44px}
 button,.btn,.button{min-height:44px;max-width:100%}
 button{touch-action:manipulation}
 input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px;accent-color:#30483c}
 summary{min-height:48px;align-content:center;padding-top:12px;padding-bottom:12px}
 [id]{scroll-margin-top:70px}
 .actions,.hero-actions,.test-actions{gap:10px;flex-wrap:wrap}
 .actions>a,.hero-actions>a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;text-align:center;white-space:normal}
 .toc,.toc>.wrap,.story-nav,.shopnav,.product-tabs{overscroll-behavior-x:contain;scrollbar-width:thin}
 .toc a,.story-nav a,.shopnav a,.product-tabs a{display:inline-flex;align-items:center;min-height:46px;flex-shrink:0}
 .toc{z-index:30}
 #pmm-concept-sender{padding:8px 18px!important;gap:4px!important;align-items:center;font-size:10px!important;line-height:1.4!important}
 #pmm-concept-sender>span{max-width:60%}
 #pmm-concept-sender>a{display:flex;align-items:center;min-height:36px;max-width:37%;text-align:right}
 /* Compact article mastheads retain the brand and primary editorial destination. */
 body[data-ux-family=article] .site-header,body[data-ux-family=diy] .site-header,body[data-ux-family=inspiration] .site-header,body[data-ux-family=review] .site-header,body[data-ux-family=first] .site-header{padding:16px 0;gap:12px}
 body[data-ux-family] .brandbar{padding:16px 0;gap:12px}
 body[data-ux-family] .brandbar img{width:190px;max-width:100%}
 .brandbar nav{gap:12px;font-size:12px}
 .brandbar nav a{min-height:36px;display:flex;align-items:center}
 .brandbar nav a:not(.active){display:none}
 .trustbar,.topbar{font-size:10px;line-height:1.4;padding:7px 12px}
 .breadcrumbs,.breadcrumb{font-size:11px;line-height:1.5;padding-top:18px;padding-bottom:18px;margin-top:0;margin-bottom:0}
 body[data-ux-family=article] h1,body[data-ux-family=diy] h1,body[data-ux-family=inspiration] h1,body[data-ux-family=review] h1,body[data-ux-family=first] h1{font-size:clamp(34px,9.8vw,42px);line-height:1.06;letter-spacing:-.025em;overflow-wrap:break-word}
 .lead{font-size:17px;line-height:1.65}
 .meta{font-size:11px;line-height:1.6;gap:6px 14px;flex-wrap:wrap}
 /* A title and image together introduce the article; the lead follows the image. */
 body[data-ux-family=article] .hero{display:flex;flex-direction:column;gap:16px;padding-top:14px;padding-bottom:32px}
 body[data-ux-family=article] .hero>div:first-child{display:contents}
 body[data-ux-family=article] .hero .eyebrow{order:0;margin:0}
 body[data-ux-family=article] .hero h1{order:1;margin:0}
 body[data-ux-family=article] .hero .meta{order:2;margin:0}
 body[data-ux-family=article] .hero>figure{order:3;margin:0;width:100%}
 body[data-ux-family=article] .hero>figure>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
 body[data-ux-family=article] .hero .lead{order:4;margin:0}
 body[data-ux-family=article] .hero .category-link{order:5;margin:0;min-height:36px;align-content:center}
 body[data-ux-family=article] .hero .byline{order:6;margin:0;padding-top:14px}
 body[data-ux-family=article] .hero .actions{order:7;margin:0;display:flex}
 body[data-ux-family=article] .product{gap:24px;padding-top:32px;padding-bottom:36px}
 body[data-ux-family=article] .product-image{padding:12px}
 body[data-ux-family=article] .product-image>img{height:auto;max-height:350px;aspect-ratio:4/3;object-fit:contain}
 body[data-ux-family=article] .product h3{font-size:29px}
 body[data-ux-family=article] .specs{gap:8px}
 body[data-ux-family=article] .specs>div{padding:12px;min-width:0}
 /* DIY and inspiration use the same reading sequence, with imagery appropriate to each. */
 .diy-hero,.inspo-hero{display:flex;flex-direction:column;gap:16px;padding:16px 0 28px}
 .diy-hero>div:first-child,.inspo-hero>div:first-child{display:contents}
 .diy-hero .eyebrow,.inspo-hero .eyebrow{order:0;margin:0}
 .diy-hero h1,.inspo-hero h1{order:1;margin:0}
 .diy-hero>figure,.inspo-hero>figure{order:2;width:100%;margin:0}
 .diy-hero>figure>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#f6f5ef}
 .inspo-hero>figure>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
 .diy-hero .lead,.inspo-hero .lead{order:3;margin:0}
 .diy-hero .byline,.inspo-hero .byline{order:4;margin:0}
 .diy-hero .meta,.inspo-hero .meta{order:5;margin:0}
 .diy-hero .red-link,.inspo-hero .red-link{order:6;margin:0;min-height:36px;align-content:center}
 .diy-hero .actions,.inspo-hero .actions{order:7;margin:0}
 .diy-hero .image-label{position:static;display:block;padding:9px 12px;font-size:11px;background:#f6f5ef;color:#30483c}
 .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
 .facts>div{padding:14px;min-width:0}
 .facts b,.facts strong{font-size:19px}
 .facts small{font-size:11px;line-height:1.5}
 .project-grid,.shopping-grid{grid-template-columns:minmax(0,1fr)}
 .checklist-item,.shopping-item{min-width:0}
 .steps-layout{gap:24px}
 .step-rail{position:static}
 .step-body h2,.step h2{font-size:29px}
 .related-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .related-guide img{width:100%;aspect-ratio:16/10;object-fit:cover}
 .sticky-buy,.sticky-bar,.bottom-bar{padding-bottom:max(10px,env(safe-area-inset-bottom))}
 .sticky-buy>div,.sticky-bar>div{min-width:0}
 .sticky-buy .btn,.sticky-bar .btn{flex-shrink:0}
 /* Every inspiration chapter gets its own heading, environment image, advice and products. */
 .style-story,.style-story:nth-child(odd){display:flex;flex-direction:column;gap:18px;padding-top:36px;padding-bottom:36px}
 .style-copy{display:contents}
 .style-copy>.style-number{order:0;font-size:42px;line-height:1}
 .style-copy>h2{order:1;font-size:31px;margin:0}
 .style-story>.style-photo,.style-story:nth-child(odd)>.style-photo{order:2;width:100%;margin:0}
 .style-photo>img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
 .style-copy>p{order:3;margin:0;font-size:16px;line-height:1.65}
 .style-copy>.palette{order:4}
 .style-copy>.product-caption{order:5;width:100%;padding:16px 0}
 .style-copy>.actions{order:6;margin:0}
 .style-copy>.category-style-link{order:7}
 .style-story>.style-gallery{order:8;margin-top:8px;width:100%}
 .style-story>.style-options{order:9;width:100%}
 .style-options .products,.style-options-grid{grid-template-columns:minmax(0,1fr)}
 .gallery-grid{grid-template-columns:minmax(0,1fr)}
 .environment-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
 .style-options article{min-width:0}
 .style-options a,.product-caption a{min-height:44px;align-content:center}
 /* Product review and early impressions already have mobile image ordering. */
 body[data-ux-family=review] .hero-shell,body[data-ux-family=first] .first-hero{gap:14px;padding-top:16px;padding-bottom:30px}
 body[data-ux-family=review] .hero-top h1,body[data-ux-family=first] .first-hero h1{margin:0}
 body[data-ux-family=review] .hero-media{margin:0}
 body[data-ux-family=review] #stock-banner{order:6}
 body[data-ux-family=review] .hero-media>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
 body[data-ux-family=review] .pros-cons{grid-template-columns:minmax(0,1fr)}
 .stagebar .wrap{padding:10px 0;font-size:10px;gap:10px;line-height:1.5}
 .factor-label{font-size:12px;line-height:1.4}
 .status-banner{flex-wrap:wrap;gap:14px;padding:18px}
 .status-banner a{white-space:normal;max-width:100%}
 dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
 dialog button[aria-label*=Stäng]{min-width:44px;min-height:44px}
 /* Retail layouts keep prices and product names aligned and badges in their chosen placement. */
 body[data-ux-family=retail] .main-header{padding:14px 0;gap:12px}
 body[data-ux-family=retail] .logo{width:190px}
 .favorite{width:44px;height:44px;min-width:44px;min-height:44px}
 .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
 .shop-card{min-width:0}
 .shop-card .product-title{font-size:14px;line-height:1.5;min-height:105px;height:auto;padding-top:10px}
 .shop-card .card-pricing{min-height:70px;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:4px}
 .shop-card .price{font-size:23px;white-space:nowrap}
 .shop-card .sales-chip{font-size:9px;text-align:left;max-width:100%;line-height:1.4}
 .card-award{gap:6px;padding:8px;min-height:64px;grid-template-columns:25px minmax(0,1fr)}
 .card-award>span{min-width:0}
 .card-award strong{font-size:12px;line-height:1.3}
 .card-award small{font-size:10px;line-height:1.4}
 .card-award .arrow{display:none}
 .filter-controls label,.filter-controls select{min-height:44px;font-size:13px}
 .filter-controls{flex-wrap:wrap}
 .filter-controls select{min-width:0;max-width:100%}
 .pdp{display:flex;flex-direction:column;gap:18px;padding-top:20px}
 .pdp>.product-info{display:contents}
 .pdp .product-info>h1{order:0;font-size:32px;margin:0}
 .pdp .product-gallery{order:1;min-width:0}
 .pdp .features{order:2;display:block;font-size:14px;margin:0}
 .pdp .customer-rating{order:3;flex-wrap:wrap;margin:0;gap:8px}
 .pdp .test-summary{order:4;margin:0;min-width:0}
 .pdp .buy-panel{order:5;min-width:0}
 .pdp .product-type{font-size:19px;margin-bottom:6px}
 .main-product{aspect-ratio:1/1}
 .gallery-thumbs{gap:8px;margin-top:10px}
 .gallery-thumbs a{width:64px;height:64px}
 .gallery-caption{font-size:11px}
 .test-summary{grid-template-columns:32px minmax(0,1fr) auto;padding:12px;gap:9px}
 .test-summary b{font-size:17px}
 .test-summary small{font-size:10px}
 .test-detail{padding:22px 18px}
 .review-head{gap:12px;flex-wrap:wrap}
 .review-award h3{font-size:26px}
 .buy-cta .button{font-size:16px;min-height:50px}
 /* Presentation and supporting concepts. */
 body[data-ux-family=presentation] main{padding-left:18px;padding-right:18px}
 .pmm-header{gap:18px;padding:18px 0;align-items:center}
 .pmm-home{min-height:48px;gap:9px}
 .pmm-home>span{font-size:10px}
 .client-lockup{gap:8px}
 .client-lockup small{font-size:10px}
 .client-lockup img{max-width:130px}
 .story-hero{padding-top:38px}
 .story-hero h1{font-size:clamp(44px,14.5vw,58px);line-height:1.04}
 .hero-strip{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding-bottom:8px}
 .hero-strip>figure,.hero-strip>a{scroll-snap-align:start;margin:0;min-width:0}
 .hero-strip img{width:100%;height:185px;object-fit:cover}
 .studio-panel{display:flex;flex-direction:column;gap:18px;padding:24px 18px}
 .studio-panel>div:first-child{display:contents}
 .studio-panel .eyebrow{order:0}
 .studio-panel h2{order:1}
 .studio-panel>figure{order:2;width:100%;margin:0}
 .studio-panel p{order:3}
 .studio-panel figure img{width:100%;height:auto}
 .story-footer{gap:22px;padding:26px 18px}
 .story-footer a{min-height:44px;display:inline-flex;align-items:center}
 body[data-ux-family=concept] main{padding:20px 18px 48px}
 body[data-ux-family=concept] .top{gap:14px;flex-wrap:wrap}
 body[data-ux-family=concept] .top span{font-size:11px}
 body[data-ux-family=concept] main>.hero{display:flex;flex-direction:column;gap:18px;padding-top:28px}
 body[data-ux-family=concept] main>.hero>div:first-child{display:contents}
 body[data-ux-family=concept] main>.hero .eyebrow{order:0}
 body[data-ux-family=concept] main>.hero h1{order:1;font-size:42px}
 body[data-ux-family=concept] main>.hero>a{order:2;width:100%}
 body[data-ux-family=concept] main>.hero p{order:3}
 body[data-ux-family=concept] main>.hero .btn{order:4}
 body[data-ux-family=concept] .flow{grid-template-columns:minmax(0,1fr)}
 body[data-ux-family=ads] header,body[data-ux-family=awards] header{padding:18px 0;gap:12px;flex-wrap:wrap}
 body[data-ux-family=ads] header img,body[data-ux-family=awards] header img{width:190px}
 body[data-ux-family=ads] h1,body[data-ux-family=awards] h1{font-size:42px}
 .phone{width:min(360px,100%);min-width:0}
 .video-row{grid-template-columns:minmax(0,1fr)}
 body[data-ux-family=awards] .hero{display:flex;flex-direction:column;gap:20px;padding:30px 0}
 body[data-ux-family=awards] .hero>div{display:contents}
 body[data-ux-family=awards] .hero .eyebrow{order:0;margin:0}
 body[data-ux-family=awards] .hero h1{order:1}
 body[data-ux-family=awards] .hero .badge{order:2;width:210px;align-self:center}
 body[data-ux-family=awards] .hero p{order:3;margin:0;font-size:18px}
 body[data-ux-family=awards] .hero .button{order:4}
 body[data-ux-family=awards] .hero .subtle{order:5}
 .table-wrap,.table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
}
@media(max-width:380px){
 .wrap{width:calc(100% - 32px)}
 .shop-card .product-title{font-size:13px;min-height:118px}
 .shop-card .price{font-size:21px}
 .card-award{display:flex;align-items:flex-start}
 .card-award>img{width:21px;height:21px}
 .card-award strong{font-size:11px}
 .test-summary{grid-template-columns:30px minmax(0,1fr)}
 .test-score{grid-column:2;text-align:left}
 .pmm-header{flex-wrap:wrap}
 .client-lockup{width:100%;justify-content:space-between}
 .flow,.steps,.summary-grid{grid-template-columns:minmax(0,1fr)}
 .brandbar img{width:160px}
 .brandbar nav{font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:760px){
 /* One compact brand row; the knowledge promise already sits in the strip above. */
 header.brand>.wrap{padding-top:15px;padding-bottom:15px;gap:12px;align-items:center}
 header.brand img{width:185px}
 header.brand small{display:none}
 header.brand nav{font-size:11px;line-height:1.35;gap:0}
 header.brand nav a{white-space:nowrap;min-height:38px;display:none}
 header.brand nav a.current,header.brand nav a.active{display:inline-flex;align-items:center}
 .trust{font-size:10px;padding:7px 12px;line-height:1.4}
 .prototype{font-size:9px;line-height:1.45;padding:6px 18px}
 .bildvariant>.wrap{padding:8px 0;gap:5px;line-height:1.4}
 .bildvariant,.bildvariant a{font-size:10px}
 .diy-hero,.inspo-hero{align-items:stretch;text-align:left}
 .diy-hero .eyebrow,.inspo-hero .eyebrow,body[data-ux-family=article] .hero .eyebrow{text-align:left}
 .diy-hero h1,.inspo-hero h1{text-align:left}
 .style-copy>.style-category-link{order:7;min-height:44px;align-content:center;margin:0}
 .section{padding-top:40px;padding-bottom:40px}
 .section-head{gap:16px;margin-bottom:24px}
 .section-head h2{font-size:32px;line-height:1.12}
 .tabs{gap:8px;flex-wrap:wrap}
 .tabs button,.style-nav a{min-height:44px;align-content:center}
 .sticky-action{padding-bottom:max(10px,env(safe-area-inset-bottom))}
 .sticky-action .wrap{gap:12px}
 .sticky-action .wrap>div{min-width:0}
 .sticky-action .btn{flex-shrink:0;font-size:12px}
 .sticky-action small{font-size:10px}
}
@media(min-width:701px) and (max-width:760px){
 .diagnosis,.steps-layout,.aftercare,.fit-grid,.guide-cards,.environment-grid{grid-template-columns:minmax(0,1fr)}
 .step-rail{display:none}
 .style-product-grid{grid-template-columns:minmax(0,1fr)}
 .style-product-card{grid-template-columns:85px minmax(0,1fr)}
 .style-product-card>img{width:85px;height:85px}
}
@media(max-width:380px){header.brand img{width:160px}header.brand nav{font-size:10px}}
@media(max-width:760px){
 header.brand{padding:0}
 .grid2>*{min-width:0;overflow-wrap:break-word}
 .grid2{grid-template-columns:minmax(0,1fr)}
 .mini .eyebrow{overflow-wrap:anywhere}
}
@media(max-width:1080px){
 body[data-ux-family=artwork]{width:100%;height:auto;min-height:100dvh;margin:0;padding:0}
 body[data-ux-family=artwork]>.canvas{width:540px;max-width:none;margin:0;transform:none}
}
@media(max-width:760px){
 .style-story,.style-story:nth-child(odd){align-items:stretch;margin:28px 0;padding:20px 0}
 .style-copy>.style-number{text-align:left}
 .shop-card .card-pricing>div{min-height:45px;display:flex;flex-direction:column;justify-content:flex-end}
 .pdp{margin-top:16px;padding-top:0}
 dialog .close,dialog button[aria-label^="Stäng"]{min-width:44px;min-height:44px}
}