/* The store's header and footer on /help/, /terms/, /privacy/ and the 404. Those pages load base.css, which has most of
   the rules, and this in place of the store bundle: the rest, from store.css, polish/tidal-form.css and account.css. Change them together. */
html{scrollbar-gutter:stable;touch-action:manipulation}
.sl-page{--muted:#54687f;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--page);font-family:var(--font)}
.site-header,.footer{line-height:normal}
.site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
.nav-inner>a:first-child{display:flex;align-items:center;min-height:44px;flex-shrink:0}
.desktop-nav{font-size:13px}
.nav-actions .nav-access{font-size:12px;min-height:44px}
.aca-nav-icon{display:inline-flex;position:relative;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 16%,transparent);border-radius:50%;color:inherit;text-decoration:none;flex-shrink:0}
.aca-nav-icon svg{width:20px;height:20px}
.cart-count{top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;font-size:12px;font-weight:600;line-height:1;box-shadow:0 0 0 2px #f8fcfd}
.cart-count:empty{display:none}
.search-box input{min-height:44px;border-color:#7a8fa3}
.search-box .icon{top:50%;transform:translateY(-50%)}
.menu-search{padding:10px 0 12px}
.menu-search .search-box{width:100%}
.menu-search input{width:100%}
/* Categories as an even grid of three across; a short last row splits its width, so no chip sits alone on a line. */
.menu-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:2px 0 14px}
.menu-cats a{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 6px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;font-weight:500;line-height:1.15;text-align:center;color:var(--ink)}
.menu-cats a:nth-child(3n+1):nth-last-child(2),.menu-cats a:nth-child(3n+2):last-child{grid-column:span 3}
.menu-cats a:nth-child(3n+1):last-child{grid-column:1/-1}
/* Small phones: two across, and an odd last chip takes the full row. */
@media (max-width:359px){.menu-cats{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-cats a,.menu-cats a:is(:nth-child(3n+1):nth-last-child(2),:nth-child(3n+2):last-child,:nth-child(3n+1):last-child){grid-column:auto}.menu-cats a:nth-child(odd):last-child{grid-column:1/-1}}
.footer .footer-title{margin:0 0 20px;font-size:13px;font-weight:500;color:#fff}
.footer p{font-size:13px;line-height:1.8}
.footer ul{font-size:13px}
.footer .button.small{min-height:44px;font-size:14px}
.footer-bottom{font-size:12px;line-height:1.7}
.footer-bottom a{min-height:44px}
/* The same left edge as the logo, at every width. */
.sl-shell.wrap{flex:1 0 auto;width:100%}
@media(min-width:1101px){.wrap{max-width:1500px}}
@media(min-width:1500px) and (max-width:1599px){.wrap,.nav-inner{max-width:none}}
@media(max-width:760px){
 .mobile-links:not([hidden]){max-height:calc(100vh - 67px);max-height:calc(100dvh - 67px);overflow-y:auto;overscroll-behavior:contain}
 .mobile-links .button{min-height:50px;font-size:14px}
 .footer .footer-title{margin-bottom:10px}
}
@media(min-width:761px){.mobile-links{display:none}}
/* With JavaScript off the menu button can't open anything, so a phone gets these links in its place. They only exist then, so the button stays otherwise. */
.noscript-links{display:none}
@media(max-width:760px){
 .site-header:has(.noscript-links){position:static}
 .site-header:has(.noscript-links) .mobile-menu{display:none}
 .noscript-links{display:flex;flex-wrap:wrap;gap:0 20px;padding:0 6% 6px;font-size:13px}
 .noscript-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
}
@media(max-width:330px){.site-header .brand{width:122px}.site-header .nav-inner{gap:10px}}
@media(max-height:500px){.site-header{position:static}html{scroll-padding-top:12px}}
@media(pointer:coarse){.footer-legal a{padding-inline:8px;margin-inline:-8px}}
/* The page itself speaks the store's type: the same eyebrow and buttons. base.css takes underlines off links, so these put them back. */
.sl-eyebrow,.sl-card .sl-eyebrow{font-size:11px;letter-spacing:.22em;color:var(--muted)}
.sl-page .sl-button{gap:12px;padding-inline:27px;font-weight:500}
.sl-button .icon{width:18px;height:18px}
.sl-main a:not(.sl-button),.sl-dialog a:not(.sl-button){text-decoration:underline}