/* Compact top area and catalogue controls. */
body:has(#home) .header{margin:0 auto!important;padding:14px 24px;box-shadow:none}
body:has(#home) .nav{margin:0 auto 6px!important;padding:3px 24px;min-height:40px;gap:8px;border-radius:0}
body:has(#home) .nav button,body:has(#home) .nav a{min-height:34px;padding:7px 12px;white-space:nowrap}
.topbar .topbar-store-map{color:inherit;text-decoration:none;line-height:1.3}
.topbar .topbar-store-map:hover{text-decoration:underline;text-underline-offset:3px}
body:has(#home) .privacy-notice{padding:6px 10px;margin:4px 0 10px;font-size:10px;line-height:1.35;gap:12px;border-radius:3px;min-height:0}
body:has(#home) .privacy-notice strong{font-size:10px;font-weight:400;display:inline}
body:has(#home) .privacy-notice p{font-size:10px;margin:0;line-height:1.35}
body:has(#home) .privacy-notice>div>p{display:inline}
body:has(#home) .privacy-notice>div>p::before{content:' '}
body:has(#home) .privacy-notice details{font-size:10px;margin:2px 0 0}
body:has(#home) .privacy-notice>a{font-size:10px;flex-shrink:0}
.catalog-title{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:14px}
.catalog-title>div:first-child{flex:1;min-width:0}
.catalog-title h1{margin:5px 0;font-size:clamp(24px,2.7vw,40px)}
.catalog-title #result-count{margin:4px 0;font-size:12px}
.catalog-heading-tools{margin-left:auto}
.catalog-title .stock-only-main{margin:0;padding:7px 10px;min-height:32px;width:auto;gap:7px;border-radius:4px}
.catalog-title .stock-only-main strong{font-size:12px;white-space:nowrap}
.catalog-title .stock-only-main input{width:16px;height:16px}
.catalog-title .catalog-finish-panel{flex:1 0 100%;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:9px 12px;border-radius:5px;font-size:12px}
.catalog-title .catalog-finish-panel>label{display:flex;align-items:center;gap:8px;flex:none}
.catalog-title .catalog-finish-panel select{height:32px;min-width:170px;width:auto;font-size:12px;padding:0 8px}
.catalog-title .catalog-finish-panel fieldset{flex:none;min-width:0}
.catalog-title .catalog-finish-panel legend{float:left;line-height:32px;margin:0 9px 0 0;font-size:12px}
.catalog-title .catalog-finish-panel .finish-options{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:32px}
.catalog-title .catalog-finish-panel .finish-options label{min-height:32px;white-space:nowrap;font-size:12px}
.catalog-title .catalog-finish-panel .finish-options input{width:15px;height:15px}
.catalog-title .catalog-finish-panel button{padding:6px 10px;min-height:32px;white-space:nowrap;margin-left:auto;font-size:12px}
body .catalog-shortcuts .brand-strip{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px 24px;align-items:center;padding:18px 24px;background:linear-gradient(90deg,#fffffff7 0%,#ffffffde 55%,#ffffff80 100%),linear-gradient(to bottom,#111 0 33.333%,#d00 33.333% 66.666%,#ffce00 66.666% 100%)!important;border:1px solid #dce4ec;overflow:hidden}
body .catalog-shortcuts .brand-strip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(to bottom,#111 0 33.333%,#d00 33.333% 66.666%,#ffce00 66.666% 100%)}



body .catalog-shortcuts .brand-strip .brand-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;margin:0}
body .catalog-shortcuts .brand-strip .brand-actions button{padding:8px 13px;min-height:34px;font-size:13px;min-width:0;flex:0 1 auto;background:#ffffffed}
body .catalog-shortcuts .brand-strip .brand-actions button[aria-pressed=true]{background:#123c60;color:#fff}
@media(max-width:760px){body:has(#home) .header{padding:12px;margin:0!important}body:has(#home) .nav{padding:3px 10px;flex-wrap:nowrap;overflow-x:auto;gap:2px;margin:0 0 5px!important}body:has(#home) .nav button,body:has(#home) .nav a{font-size:12px;padding:7px 9px}.catalog-title .catalog-finish-panel{gap:6px 14px;padding:8px}.catalog-title .catalog-finish-panel select{min-width:150px;max-width:100%}.catalog-title .catalog-finish-panel>label{flex-wrap:wrap}.catalog-title .catalog-finish-panel .finish-options{gap:10px}.catalog-title .catalog-finish-panel button{margin-left:0}.catalog-title .catalog-finish-panel legend{font-size:11px}.catalog-heading-tools{margin-left:0}body .catalog-shortcuts .brand-strip{grid-template-columns:minmax(0,1fr);padding:14px 15px;gap:10px}body .catalog-shortcuts .brand-strip strong{font-size:clamp(18px,4vw,26px)}body .catalog-shortcuts .brand-strip p{font-size:12px}body .catalog-shortcuts .brand-strip .brand-actions button{font-size:12px;padding:7px 10px}}
/* One fluid storefront width and matching left/right gutters at every size. */
body:has(#home){--site-gutter:clamp(12px,2vw,32px);min-width:0;width:100%}
body:has(#home)>main{width:100%;max-width:none;margin:0;padding-inline:var(--site-gutter)!important}
body:has(#home)>.header{width:calc(100% - var(--site-gutter) - var(--site-gutter));max-width:none;margin:0 auto!important;min-width:0}
body:has(#home)>.nav{width:calc(100% - var(--site-gutter) - var(--site-gutter));max-width:none;margin:0 auto 6px!important;padding-inline:0}
body:has(#home)>.topbar{padding-inline:var(--site-gutter);flex-wrap:wrap;gap:8px 16px}
body:has(#home)>.topbar>span{min-width:0;max-width:100%}
body:has(#home)>.topbar>span:last-child{flex-wrap:wrap;gap:8px 16px}
body:has(#home)>.topbar .topbar-store-map{margin:0}
body:has(#home)>main>.home,body:has(#home)>main>.catalog-shortcuts,body:has(#home)>main>.catalog,body:has(#home)>main>.brands{width:100%;max-width:none;min-width:0}
body:has(#home) .grohe-spa-intro,body:has(#home) .hero-carousel,body:has(#home) .brand-strip,body:has(#home) .shower-shortcuts{width:100%;max-width:100%;min-width:0}
body:has(#home) .hero-media img{width:100%;height:100%;object-fit:cover}
body:has(#home)>footer{padding-inline:var(--site-gutter)}