/* Fluid page shell: shared gutters, no desktop max-width. */
:root{--page-gutter:clamp(17px,2.5vw,36px)}
header .header-inner,nav#category-navigation,body>main{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.layout{grid-template-columns:minmax(0,1fr) clamp(230px,18vw,280px);gap:24px}
.layout>.content{min-width:0}
#site-menu{right:var(--page-gutter)}
#search-panel{max-width:calc(100vw - 2 * var(--page-gutter))}
@media(min-width:1600px){.layout{gap:32px}}
@media(max-width:800px){.layout{grid-template-columns:minmax(0,1fr)}}
/* Desktop lanes reach the left viewport edge while preserving the first-card gutter. */
@media(min-width:651px){
 .collection-section:not(.expanded) .collection-carousel{width:calc(100% + var(--collection-bleed) + var(--page-gutter));margin-left:calc(-1 * var(--page-gutter))}
 .collection-section:not(.expanded) .collection-track{padding-left:calc(var(--page-gutter) + 1px);scroll-padding-left:calc(var(--page-gutter) + 1px)}
 .collection-section:not(.expanded) .collection-arrow.back{left:calc(var(--page-gutter) + 8px)}
}
@media(max-width:560px){#track-sports{grid-auto-columns:min(300px,calc(100vw - 60px))}}
/* Keep compact screens readable without wrapping prices or header actions. */
.featured .slide-choices b{white-space:nowrap;flex-shrink:0}
@media(max-width:380px){header .header-inner{gap:8px}header .brand{font-size:22px}header .brand i{font-size:28px;margin-right:3px}header .header-actions{gap:4px}header .header-actions .login,header .header-actions .primary{font-size:12px;padding:8px;min-height:36px}header .header-actions .primary img{display:none}header #menu{width:32px;height:36px}}
/* Both header rows stay fixed; categories never collapse on scroll. */
body>header{position:fixed;inset:0 0 auto;width:100%}
.header-placeholder{height:calc(var(--header-height,127px) - 14px);pointer-events:none;overflow-anchor:none}
nav#category-navigation{position:relative;top:auto;z-index:1}
header #compact-search{display:none}
@media(max-width:650px){
 header .header-inner{flex-wrap:nowrap;gap:8px}
 header .search-shell{display:none}
 header .brand{font-size:24px}
 header .header-actions{margin-left:auto;gap:6px}
 header .header-actions .primary img{display:none}
 header .header-actions .primary,header #compact-search.login{font-size:12px;padding:8px 10px;min-height:36px}
 header #menu{width:36px;height:36px;min-width:36px}
 header #compact-search.login{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;width:auto;height:auto;border:1px solid #ffffff4d;background:transparent;color:white}
 #compact-search svg{width:16px;height:16px;display:block}
 /* The mobile hero retains its quote buttons, favorite and live activity only. */
 .featured .slide{position:relative;grid-template-columns:minmax(0,1fr);gap:10px;min-height:0}
 .featured .slide-copy{grid-template-rows:auto auto;gap:10px}
 .featured .banner-meta{margin:0;padding-right:30px}
 .featured .banner-copy-bottom,#banner-plot,.banner-chart .chart-ranges{display:none}
 .banner-chart{position:static;container-type:normal;padding:0}
 .banner-chart .chart-heading,.banner-chart .chart-legend{display:contents}
 .banner-chart .chart-legend>span{display:none}
 .banner-chart .banner-save{position:absolute;right:16px;top:16px;margin:0;width:32px;height:32px;padding:7px}
 .banner-chart .chart-bottom{grid-template-columns:minmax(0,1fr) auto;margin:0}
 .featured-carousel .slide-tabs{margin-top:8px}
 .featured-carousel .tab-label{display:none}
 /* Full-bleed touch lanes, with each card snapping to the original page gutter. */
 .collection-carousel{width:calc(100% + 2 * var(--page-gutter));margin-inline:calc(-1 * var(--page-gutter))}
 .collection-carousel .collection-track{--mobile-card-width:min(320px,calc(100vw - 60px));grid-auto-columns:var(--mobile-card-width);padding-left:var(--page-gutter);padding-right:max(var(--page-gutter),calc(100% - var(--mobile-card-width) - var(--page-gutter)));scroll-padding-left:var(--page-gutter);scroll-padding-right:0;scroll-snap-type:x mandatory;-webkit-mask-image:none!important;mask-image:none!important}
 .collection-carousel #track-sports{--mobile-card-width:min(300px,calc(100vw - 60px));grid-auto-columns:var(--mobile-card-width)}
 .collection-track .compact-market{scroll-snap-align:start;scroll-snap-stop:always}
 .collection-carousel .collection-arrow{display:none!important}
 .collection-section.expanded .collection-carousel{width:100%;margin-inline:0}
 .collection-section.expanded .collection-track{padding-inline:1px;scroll-padding:0;scroll-snap-type:none}
}
@media(max-width:380px){
 header .header-inner{gap:8px}
 header .brand{font-size:20px}
 header .brand i{font-size:24px;margin-right:2px}
 header .header-actions{gap:4px}
 header .header-actions .primary,header #compact-search.login{padding:7px;min-height:34px}
 header #menu{width:34px;height:34px;min-width:34px;padding:5px}
}
/* Mobile search is a native modal: focus stays inside and the page stays put. */
body.search-open{overflow:hidden}
#mobile-search{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;padding:env(safe-area-inset-top,0px) var(--page-gutter) env(safe-area-inset-bottom,0px);color:#fff;background-image:var(--page-gradient);background-color:var(--bg);background-size:100vw 100vh;overflow:hidden}
#mobile-search::backdrop{background:var(--bg)}
#mobile-search[open]{animation:search-screen-in .22s ease-out}
#mobile-search .search-shell{display:grid;grid-template-columns:minmax(0,1fr) 36px;grid-template-rows:auto minmax(0,1fr);column-gap:10px;align-items:center;width:100%;height:100%;margin:0;min-height:0}
#mobile-search .search{grid-column:1;grid-row:1;max-width:none;width:100%;margin:16px 0;padding:10px 12px;min-height:44px;gap:8px;background:#ffffff14;border:1px solid #ffffff4d;border-radius:100px;color:#fff}
#mobile-search .search input{font-size:16px;line-height:22px}
#mobile-search .search svg{width:20px;height:20px}
#mobile-search #search-close{display:grid;place-items:center;grid-column:2;grid-row:1;width:36px;height:36px;padding:8px;border:1px solid #ffffff4d}
#mobile-search #search-close svg{width:20px;height:20px}
#mobile-search #search-panel{position:static;grid-column:1/-1;grid-row:2;align-self:stretch;min-height:0;max-height:none;max-width:none;width:100%;padding:18px 0 24px;border:0;border-top:1px solid #ffffff40;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto;overscroll-behavior:contain}
#mobile-search .search-chips button{font-size:14px;padding:7px 12px}
@keyframes search-screen-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#mobile-search[open]{animation:none}}
