.slide-navigation{display:none}
@media(max-width:600px){
#browseScreen #results.card-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;padding:12px 24px 20px;margin:0 -24px;align-items:flex-start;scrollbar-width:none;overscroll-behavior-x:contain}
#results::-webkit-scrollbar{display:none}
#browseScreen #results>.card{flex:0 0 calc(100% - 20px);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .2s;box-shadow:3px 5px 12px #cbc5df80}
#results>.card:not(.slide-current){opacity:.72}
#results>.card.slide-current{opacity:1}
.slide-navigation{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 12px}
.slide-navigation button{min-width:48px;min-height:44px;padding:8px;font-size:21px;border-radius:50%}
.slide-navigation output{min-width:64px;text-align:center;font-size:14px;font-weight:700;color:#251a3b}
#browseScreen .card-visual img{width:min(100%,216px)}
#browseScreen .card{padding:20px 18px 16px}
}
@media(prefers-reduced-motion:reduce){#results>.card{transition:none}}

body.mobile-slider #browseScreen #results.card-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;padding:12px 24px 20px;margin:0 -24px;align-items:flex-start;scrollbar-width:none;overscroll-behavior-x:contain}
body.mobile-slider #results::-webkit-scrollbar{display:none}
body.mobile-slider #browseScreen #results>.card{flex:0 0 calc(100% - 20px);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .2s;box-shadow:3px 5px 12px #cbc5df80}
body.mobile-slider #results>.card:not(.slide-current){opacity:.72}
body.mobile-slider #results>.card.slide-current{opacity:1}
body.mobile-slider .slide-navigation{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 12px}
body.mobile-slider .slide-navigation button{min-width:48px;min-height:44px;padding:8px;font-size:21px;border-radius:50%}
body.mobile-slider .slide-navigation output{min-width:64px;text-align:center;font-size:14px;font-weight:700;color:#251a3b}
body.mobile-slider #browseScreen .card-visual img{width:min(100%,216px)}
body.mobile-slider #browseScreen .card{padding:20px 18px 16px}

body.mobile-slider #results{perspective:1200px}body.mobile-slider #results>.card{transform:scale(.92) rotateY(4deg);transition:transform .35s,opacity .35s,box-shadow .35s}body.mobile-slider #results>.card.slide-current{transform:scale(1);box-shadow:0 16px 30px #4e287425}@media(prefers-reduced-motion:reduce){body.mobile-slider #results>.card{transform:none;transition:none}}

body.mobile-slider #browseScreen #results.card-grid{padding-top:28px;padding-bottom:65px;gap:10px}body.mobile-slider #results>.card{transition:transform .15s ease-out,opacity .25s,box-shadow .25s;position:relative}body.mobile-slider #results>.card.slide-current{box-shadow:0 18px 36px #4e28742e}@media(prefers-reduced-motion:reduce){body.mobile-slider #results>.card{transform:none!important;transition:none!important}}

/* Fan carousel, mobile only */
body.mobile-slider #browseScreen #results.card-grid{position:relative;gap:0;padding:45px 9% 90px;scroll-padding-inline:9%;perspective:none;isolation:isolate}
body.mobile-slider #browseScreen #results>.card{flex-basis:100%;margin-right:-24px;transition:opacity .25s,box-shadow .25s;will-change:transform;backface-visibility:hidden}
body.mobile-slider #browseScreen #results>.card:last-child{margin-right:0}
body.mobile-slider #results>.card:not(.slide-current){opacity:.68}
body.mobile-slider #results>.card.slide-current{opacity:1;box-shadow:0 22px 38px #44276830}
@media(prefers-reduced-motion:reduce){body.mobile-slider #results>.card{transform:none!important;will-change:auto}}

/* Compact mobile controls, preserving category carousel motion */
body.mobile-slider #browseScreen .list-heading{margin-bottom:8px}body.mobile-slider #browseScreen .learning-entry{margin-bottom:10px}body.mobile-slider .slide-navigation{margin:0 0 4px;gap:18px}body.mobile-slider .slide-navigation button{min-width:46px;min-height:42px;font-size:20px;padding:7px}body.mobile-slider #browseScreen #results.card-grid{padding-top:24px}


/* Balanced mobile section rhythm */
body.mobile-slider #browseScreen .browse-heading{margin-bottom:14px}body.mobile-slider #browseScreen .toolbar{margin-bottom:14px}body.mobile-slider #browseScreen .tags{margin:14px 0 18px;gap:8px}body.mobile-slider #browseScreen .list-heading{margin-bottom:14px}body.mobile-slider #browseScreen .learning-entry{padding:16px 20px;margin-bottom:14px}body.mobile-slider #browseScreen .learning-entry h2{font-size:21px;margin-bottom:14px}


/* Smaller bathroom mobile recommendation panel and tighter heading */
body.mobile-slider .focused-nav{margin-top:8px;min-height:30px}body.mobile-slider main{padding-top:6px}body.mobile-slider #browseScreen .browse-heading{padding:6px 0;margin-bottom:8px}body.mobile-slider #browseScreen .learning-entry{padding:12px 14px;margin-bottom:12px;border-radius:20px}body.mobile-slider #browseScreen .learning-entry h2{font-size:18px;line-height:1.4;margin-bottom:10px}body.mobile-slider #browseScreen .learning-entry a{padding:10px 12px;min-height:44px;font-size:15px;border-radius:16px;line-height:1.4}


/* Compact bathroom entry across desktop and mobile */
.focused-nav{margin-top:8px;min-height:30px}main{padding-top:6px}#browseScreen .browse-heading{padding:5px 0;margin-bottom:10px}#browseScreen .list-heading{margin-bottom:10px}#browseScreen .learning-entry{width:100%;max-width:560px;padding:12px 14px;margin:0 auto 14px;border-radius:20px}#browseScreen .learning-entry h2{font-size:18px;line-height:1.4;margin-bottom:9px}#browseScreen .learning-entry a{padding:9px 12px;min-height:42px;font-size:15px;line-height:1.4;border-radius:16px}body.mobile-slider #browseScreen .browse-heading{padding:4px 0;margin-bottom:8px}body.mobile-slider #browseScreen .list-heading{margin-bottom:10px}body.mobile-slider #browseScreen .learning-entry{width:calc(100% - 12px);padding:10px 12px;margin:0 auto 12px}body.mobile-slider #browseScreen .learning-entry h2{font-size:17px;margin-bottom:8px}body.mobile-slider #browseScreen .learning-entry a{padding:8px 10px;min-height:40px;font-size:14px}


/* Category-specific effects with an explicit user motion preference. */
body.mobile-slider.slider-effects-on #browseScreen #results>.card{transform:var(--category-transform,none)!important;will-change:transform;transition:opacity .2s,box-shadow .2s}body.mobile-slider.slider-effects-off #browseScreen #results>.card{transform:none!important;transition:none!important;will-change:auto}.slide-navigation .slider-effect-toggle{min-width:70px;min-height:36px;padding:5px 8px;font-size:11px;border-radius:16px}.slide-navigation{flex-wrap:wrap;gap:12px}

/* Rotation belongs to horizontal card changes; vertical gestures scroll the page. */
body.mobile-slider #browseScreen #results.card-grid{overflow-y:hidden;touch-action:pan-x pan-y;overscroll-behavior-y:auto;padding-top:8px;padding-bottom:20px;overflow-anchor:none}
body.mobile-slider #browseScreen #results>.card{transform-origin:50% 65%}
body.mobile-slider .slide-navigation{margin-bottom:4px}

/* Use untransformed card centers instead of Safari snapping rotated boxes. */
body.mobile-slider #browseScreen #results.card-grid{scroll-snap-type:none}

/* One card per swipe; vertical gestures retain native page scrolling. */
body.mobile-slider #browseScreen #results.card-grid{touch-action:pan-y;scroll-behavior:auto}