/* Mobile usability pass, 8 October 2026. Desktop layout intentionally unchanged. */
@media(max-width:767.98px){
 .tw-pro-homepage .tw-pro-application__content b{hyphens:manual;overflow-wrap:normal;word-break:normal;font-size:clamp(12px,3.45vw,16px);line-height:1.35}
 .tw-refinement-brands .tw-refinement-brand__image{min-width:0;overflow:hidden}
 .tw-refinement-brands .tw-refinement-brand__image picture{display:block;width:100%;height:100%}
 .tw-refinement-brands .tw-refinement-brand__image img{display:block;width:100%;height:100%;object-fit:contain}
 .tw-refinement-brands .tw-refinement-brands__dots button{width:44px;min-height:44px}
 .tw-refinement-brands .tw-refinement-brand h2{overflow-wrap:break-word;hyphens:auto}
 .tw-guide-page:has(>.tw-guide-index-intro){display:flex;flex-direction:column}
 .tw-guide-page>.tw-guide-breadcrumb{order:0}
 .tw-guide-page>.tw-guide-index-intro{order:1;margin-bottom:0}
 .tw-guide-page>.tw-lexicon-search{order:2;margin:18px 0;padding:18px}
 .tw-guide-page>.tw-lexicon-facts{order:3;margin:0 0 16px;gap:6px 18px;font-size:12px}
 .tw-guide-page>.tw-lexicon-contents{order:4;margin:0 0 24px;padding:18px}
 .tw-guide-page>#tw-topic-results{order:5}
 .tw-guide-page>.tw-glossary{order:6}
 .tw-guide-page>.tw-guide-index-intro .tw-lexicon-heading-icon{float:left;width:40px;height:40px;margin:0 12px 8px 0}
 .tw-guide-page>.tw-guide-index-intro .tw-pro-eyebrow{margin-bottom:4px;font-size:10px}
 .tw-guide-page>.tw-guide-index-intro h1{font-size:28px;line-height:1.2;margin-bottom:12px}
 .tw-guide-page>.tw-guide-index-intro .tw-guide-lead{clear:both;font-size:14px;line-height:1.55;margin-bottom:0}
 .tw-guide-page>.tw-lexicon-search h2{font-size:20px;margin-bottom:12px}
 .tw-guide-page>.tw-lexicon-search>div{gap:8px}
 .tw-guide-page .tw-lexicon-search button,.tw-guide-page .tw-glossary-search button{min-height:44px}
 .tw-guide-page .tw-lexicon-contents a{display:inline-flex;align-items:center;min-height:44px}
 .tw-guide-page .tw-lexicon-contents ol{gap:2px}
 .tw-guide-page .tw-guide-jumps a,.tw-guide-page .tw-glossary-alphabet a{min-width:44px;min-height:44px;align-content:center}
 .tw-guide-page :is(.tw-guide-jumps,.tw-lexicon-contents,.tw-guide-group-heading) a:focus-visible{outline:3px solid #087b3c;outline-offset:3px}
 .tw-partner-page .tw-partner-hero{padding:20px;gap:16px;border-radius:18px}
 .tw-partner-page .tw-partner-hero__copy>p:not(.tw-pro-eyebrow):not(.tw-partner-hero__subtitle){font-size:14px;line-height:1.55}
 .tw-partner-page .tw-partner-hero .tw-partnership-lockup{--identity-height:64px}
 .tw-partner-page .tw-partner-hero h1{font-size:22px;line-height:1.3}
 .tw-partner-page .tw-partner-facets__search{font-size:16px}
 main :is(input.form-control,select.form-select,textarea.form-control){font-size:16px}
 main :is(input,select,textarea){max-width:100%;min-width:0}
 .tw-guide-page :is(.tw-guide-group,.tw-glossary,.tw-guide-products,.tw-guide-selection,.tw-guide-faq){scroll-margin-top:24px}
}

.tw-mobile-shortcuts{display:none}
@media(max-width:767.98px){
 .navigation-offcanvas .tw-mobile-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px}
 .navigation-offcanvas .tw-mobile-shortcuts a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:1px solid #cadbd0;border-radius:8px;background:#f2f7f4;color:#185434;font-size:14px;font-weight:650;text-align:center;text-decoration:none}
 .navigation-offcanvas .tw-mobile-shortcuts a:focus-visible{outline:3px solid #087b3c;outline-offset:2px}
 body main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:16px}
}

/* Long configurator/cart actions must wrap inside narrow phone panels. */
@media(max-width:767.98px){
 body main :is(button.btn,a.btn){white-space:normal;overflow-wrap:break-word;min-height:44px;height:auto;line-height:1.4}
 body main [data-tw-respirator-submit]{padding:12px 16px}
}

@media(max-width:767.98px){.checkout-main>.row{margin-inline:0}.checkout-main>.row>.cart-add-product-container{padding-inline:0}}

/* Native Shopware listing filters: full-width 44px touch targets. */
@media(max-width:767.98px){
 .offcanvas .form-check:has(>.filter-multi-select-checkbox){display:flex;align-items:center;gap:10px;padding-left:0}
 .offcanvas .filter-multi-select-checkbox{float:none;margin:0;flex:0 0 16px}
 .offcanvas .filter-multi-select-item-label{display:flex;align-items:center;min-height:44px;flex:1;line-height:1.4;cursor:pointer}
 .offcanvas .filter-panel-item-toggle{min-height:44px}
 .offcanvas .filter-panel-offcanvas-close{width:44px;height:44px;background-size:18px;flex-shrink:0}
 .offcanvas .filter-range-min,.offcanvas .filter-range-max{font-size:16px}
}

/* Keep filter label text vertically aligned despite the base theme display rule. */
@media(max-width:767.98px){.offcanvas .filter-multi-select-list .filter-multi-select-item-label{display:flex;align-items:center}}