/* Responsive sizing comes after saved theme settings so desktop customisation
   cannot force phone or tablet content outside the viewport. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0}
.shell{width:min(var(--content-width,1280px),calc(100% - 64px));max-width:100%}
:is(.shell,.new-hero-inner,.company-grid,.story-layout,.mission-grid,.policy-grid,.brand-grid,.range-layout,.range-grid,.product-detail-layout,.quote-layout,.field-row,.footer-grid,.custom-block-grid,.document-grid)>*{min-width:0}
:is(h1,h2,h3,p,.button,.brand-bottom,.spec-pills span,.family-sidebar a){overflow-wrap:anywhere}
.new-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.product-detail-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.quote-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.brand-filter{flex-wrap:wrap}
.brand-filter label{min-width:0;max-width:100%;flex:1 1 150px}
.brand-filter .catalog-search{flex:2 1 200px}
.brand-filter input,.brand-filter select,.field select{max-width:100%;min-width:0;text-overflow:ellipsis}
.range-topline{flex-wrap:wrap}
.brand-art,.brand-bottom{min-width:0;max-width:100%}
.opal-logo{min-width:0;max-width:100%;flex:0 1 280px}
.hero-products{padding:12px;min-width:0}
.hero-products img{width:31%;min-width:0;flex:0 1 31%}
.hero-products img:nth-child(2){width:38%;flex-basis:38%;margin-inline:0}
.detail-photo{min-width:0;max-width:100%}
.contact-honeypot{left:auto!important;inset-inline-start:0;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(max-width:1180px){
 .desktop-nav{display:none}.menu-toggle{display:block;flex-shrink:0}
 .header-inner{min-height:78px;gap:16px}.brand-copy{display:none}
 .header-actions{margin-inline-start:auto;gap:10px;min-width:0}.header-actions .button-small{display:none}
 .mobile-nav.open{display:block;max-height:calc(100vh - 115px);max-height:calc(100dvh - 115px);overflow-y:auto;overscroll-behavior:contain;padding:12px 24px 24px;border-top:1px solid var(--line)}
 .mobile-nav>a,.mobile-nav summary{display:block;padding:12px 0;font-size:16px;font-weight:700}
 .mobile-nav .company-menu>div{position:static;min-width:0;box-shadow:none;border-top:0;border-inline-start:2px solid var(--red);margin:0 0 15px}
 .mobile-nav .company-menu a{white-space:normal}
 .header-inner .brand-logo{width:clamp(64px,9vw,96px);height:60px}
}
@media(max-width:1024px){
 .shell{width:calc(100% - 40px)}
 .range-layout{grid-template-columns:minmax(0,1fr);gap:28px}
 .family-sidebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-bottom:0}
 .family-sidebar h2{grid-column:1/-1}.family-help{display:none}
 .range-grid,.featured-range .range-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quote-layout{grid-template-columns:minmax(0,1fr);gap:30px}
 .section{padding-block:clamp(40px,6vw,70px)}
 .company-grid,.story-layout{gap:30px}
 .field input,.field select,.field textarea,.brand-filter input,.brand-filter select{font-size:16px}
 .pack-links a{min-height:44px}.language-toggle,.theme-toggle{min-height:44px}
}
@media(max-width:900px){
 .new-hero-inner{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding-block:36px}
 .new-hero-copy{padding:0}.new-hero h1,.rtl .new-hero h1{font-size:clamp(34px,6vw,54px);max-width:760px}
 .hero-lead{max-width:650px}.hero-visual{width:100%;max-width:620px;justify-self:center}
 .hero-products{min-height:0}.hero-products img{height:clamp(170px,31vw,290px)}.hero-products img:nth-child(2){height:clamp(210px,37vw,350px)}
 .company-grid,.story-layout{grid-template-columns:minmax(0,1fr)}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media(max-width:760px){
 .product-detail-layout{grid-template-columns:minmax(0,1fr);gap:28px}
 .detail-photo{min-height:0;padding:24px}.detail-photo img{height:clamp(260px,60vw,420px)}
 .document-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mission-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 .detail-summary h1{font-size:clamp(28px,5vw,38px)}
 .detail-tabs{flex-wrap:wrap;gap:8px 24px;overflow:visible}.detail-tabs a{white-space:normal;padding-block:12px}
}
@media(max-width:560px){
 .shell{width:calc(100% - 32px)}
 html{scroll-padding-top:84px}
 .header-inner{min-height:72px;gap:8px}.header-inner .brand-logo{width:68px;height:54px}
 .header-actions{gap:7px}.language-toggle{min-width:52px}.theme-toggle{font-size:12px;padding-inline:9px}.menu-toggle{width:44px}
 .mobile-nav.open{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);padding-inline:16px}
 .new-hero h1,.rtl .new-hero h1{font-size:clamp(32px,9vw,46px);max-width:100%}
 .hero-buttons{gap:16px}.hero-caption{overflow-wrap:anywhere;line-height:1.6}
 .hero-bottom>.shell{grid-template-columns:minmax(0,1fr);padding-block:14px;gap:8px}.hero-bottom>.shell>span+span{border:0}
 .brand-grid>a{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .brand-art{padding-inline:12px}.brand-bottom{padding:16px;gap:8px}.opal-logo{height:auto;aspect-ratio:2172/500}
 .family-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
 .family-sidebar a{gap:8px}.family-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .brand-filter{padding:16px;gap:12px}.brand-filter label,.brand-filter .catalog-search{flex-basis:100%;width:100%}
 .brand-filter .button{width:100%}.range-topline>span{white-space:normal}
 .quote-form{padding:20px}.field-row{grid-template-columns:minmax(0,1fr);gap:0}
 .document-grid{grid-template-columns:minmax(0,1fr)}
 .page-banner h1{font-size:clamp(28px,8vw,36px)}
 .product-spec-table th,.product-spec-table td{padding:10px 8px}
 .whatsapp-float{bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:16px}
 .policy-copy p{font-size:17px}
}
@media(max-width:480px){
 .range-grid,.featured-range .range-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .range-photo{height:clamp(230px,68vw,310px);margin:12px 12px 0;padding:16px}
 .range-card-copy{padding:20px}.range-card h2{font-size:18px}.range-type,.range-details{font-size:14px}
 .section-heading{gap:20px}.section h2{font-size:clamp(26px,7vw,32px)}
 .company-facts{grid-template-columns:minmax(0,1fr);gap:18px}
 .footer-grid{grid-template-columns:minmax(0,1fr);gap:18px}.footer-brand{grid-column:auto}
}