/* Shared theme, base elements, accessibility utilities, and content width. */
:root{--ink:#17191a;--muted:#717479;--orange:#f5a812;--orange-deep:#e88715;--cream:#f7f5f1;--line:#e5e5e2;--pink:#e7b5b8;--display:"Space Grotesk",Arial,sans-serif;--body:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:white;font-family:var(--body)}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.wordmark{font-family:var(--display);font-size:29px;font-weight:700;letter-spacing:-.09em;white-space:nowrap}
/* Store header and hero; image paths stay relative to this css/ folder. */
.announcement{height:31px;background:#191b1e;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1180px)/2));font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.announcement span:last-child{font-weight:500;letter-spacing:.04em}
.market-hero{position:relative;min-height:560px;background:white url("../assets/images/banners/market-hero-white.webp") center center/cover no-repeat}
.site-header{height:78px;width:min(1180px,calc(100% - 64px));margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.header-actions{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:700}
.header-actions>a:hover,.chat-shop-link:hover{text-decoration:underline}
.cart-trigger{border:0;background:transparent;padding:7px 0}
.cart-trigger span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#181a1c;color:white;font-size:10px;margin-left:3px}
.header-help{border:1px solid #161a1d;border-radius:22px;padding:9px 16px;background:transparent;font-size:11px;font-weight:800}
.header-help:hover{background:#191b1e;color:white}
.hero-main{position:relative;z-index:1;text-align:center;padding:75px 0 76px}
.hero-kicker{font-size:10px;font-weight:800;letter-spacing:.2em;margin:0 0 16px}
.hero-main h1{font-family:var(--display);font-size:clamp(45px,5.7vw,77px);font-weight:700;letter-spacing:-.07em;line-height:1.03;margin:0}
.hero-main h1 mark{background:#17191a;color:white;display:inline-block;padding:2px 16px 8px;margin-top:6px}
.hero-copy{max-width:480px;margin:18px auto 22px;font-size:13px;line-height:1.6;font-weight:600}
.hero-search{height:49px;background:white;border-radius:3px;box-shadow:0 6px 24px #30291f21;display:flex;align-items:center;max-width:540px;margin:auto;padding:5px}
.search-glass{font-size:27px;line-height:1;color:#2a2d30;width:42px}
.hero-search input{flex:1;min-width:0;outline:0;border:0;font-size:12px;background:transparent}
.hero-search button{height:39px;border:0;border-radius:2px;background:#181a1c;color:white;font-size:11px;font-weight:800;padding:0 18px}
.hero-search button:hover{background:#35383b}
.hero-caption{font-size:10px;font-weight:700;letter-spacing:.04em;margin:14px 0 0}
.hero-index{position:absolute;bottom:18px;right:max(32px,calc((100vw - 1180px)/2));font-size:9px;font-weight:800;letter-spacing:.15em}
/* Sport shortcuts sit beside Browse and Labels; narrow layouts place them on a second header row. */
.category-rail{height:42px;display:flex;align-items:center;gap:16px;white-space:nowrap}
.category-rail a,.category-rail button{align-self:stretch;display:flex;align-items:center;border:0;border-bottom:2px solid transparent;background:none;padding:2px 0 0;font-size:11px;font-weight:800}
.category-rail a:hover,.category-rail button:hover,.category-rail button.active{border-bottom-color:#111;color:#111}
/* Label cards and shared product-photo quadrants. */
.brand-section{padding-top:74px;padding-bottom:82px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.section-eyebrow{font-size:10px;font-weight:800;letter-spacing:.19em;margin:0 0 9px;color:#9b5b0d}
.section-head h2,.seller-promo h2{font-family:var(--display);font-size:39px;line-height:1.08;letter-spacing:-.06em;margin:0}
.section-head>p{font-size:12px;line-height:1.6;color:var(--muted);max-width:270px;margin:0 0 3px}
.brand-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.brand-card{position:relative;border:1px solid var(--line);background:white;transition:transform .2s,box-shadow .2s}
.brand-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px #21252c16}
.brand-photo,.product-photo{background-image:url("../assets/images/products/shoe-grid-white.webp");background-size:200% 200%;background-repeat:no-repeat}
.brand-photo{display:block;height:190px}
.photo-one{background-position:0 0}.photo-two{background-position:100% 0}.photo-three{background-position:0 100%}.photo-four{background-position:100% 100%}
.brand-name{display:block;padding:14px 14px 16px;font-family:var(--display);font-size:20px;line-height:1;font-weight:700;letter-spacing:-.05em}
.brand-name small{display:block;margin-top:6px;font-family:var(--body);font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.brand-arrow{position:absolute;right:13px;bottom:15px;font-size:16px}
/* Catalog controls, product cards, empty state, and seller promotion. */
.catalog{padding-top:20px;padding-bottom:95px}
.catalog + .brand-section{padding-top:0}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px;border-top:1px solid var(--line);padding-top:19px}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{background:white;border:1px solid var(--line);padding:8px 11px;font-size:10px;font-weight:800}
.filters button:hover{border-color:#16191b}
.filters button.active{background:#191b1e;border-color:#191b1e;color:white}
.product-count{font-size:10px;color:var(--muted);white-space:nowrap}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-card{border:1px solid var(--line);background:white;transition:box-shadow .2s,transform .2s}
.product-card:hover{transform:translateY(-2px);box-shadow:0 8px 23px #22252b12}
.product-art{height:215px;position:relative;display:grid;place-items:center;overflow:hidden}
.product-art.silver,.product-art.cream,.product-art.lilac,.product-art.sky{background:white}
.product-photo{position:absolute;inset:0}
.product-image{display:block;width:100%;height:100%;object-fit:contain}
.product-art .sport-icon{font-size:92px;line-height:1;filter:drop-shadow(8px 12px 0 #16191b12)}
.category-tag{position:absolute;z-index:1;top:10px;left:10px;padding:6px 8px;background:white;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.product-info{padding:14px}
.product-brand{font-size:9px;font-weight:800;letter-spacing:.14em;color:#9b5b0d}
.product-info h3{font-family:var(--display);font-size:17px;line-height:1.14;letter-spacing:-.04em;margin:6px 0}
.product-info p{font-size:10px;line-height:1.5;color:var(--muted);margin:0;min-height:30px}
.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:16px}
.product-bottom strong{font-size:13px}
.product-bottom button{border:1px solid #191b1e;background:#191b1e;color:white;padding:7px 9px;font-size:9px;font-weight:800;white-space:nowrap}
.product-bottom button:hover{background:white;color:#191b1e}
.empty-state{text-align:center;padding:70px 15px;background:var(--cream)}
.empty-state h3{font-family:var(--display);font-size:30px;margin:0}
.empty-state p{color:var(--muted);font-size:13px}
.outline-button{background:white;border:1px solid #16191b;padding:9px 13px;font-weight:800}
.seller-promo{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#181b1d;color:white;padding:38px 42px;margin-bottom:70px}
.seller-promo .section-eyebrow{color:#f8b344}
.seller-promo h2{font-size:34px}
.seller-promo p:last-child{font-size:12px;color:#b8bdc2;max-width:500px;line-height:1.6}
.seller-promo-link{display:inline-flex;align-items:center;gap:15px;background:#f7a918;color:#17191a;padding:12px 15px;white-space:nowrap;font-size:10px;font-weight:800}
.site-footer{border-top:1px solid var(--line);padding:30px 0 45px;display:flex;align-items:center;gap:26px}
.site-footer .wordmark{font-size:24px}
.site-footer p{color:var(--muted);font-size:11px}
.site-footer>a:last-child{margin-left:auto;font-size:11px;font-weight:800}
/* Bag overlay and quantity controls; app.js manages open state and focus. */
.drawer-scrim{position:fixed;z-index:39;inset:0;background:#1013159c}
.cart-drawer{position:fixed;z-index:40;right:0;top:0;bottom:0;width:min(420px,100vw);background:white;box-shadow:-10px 0 40px #12171932;transform:translateX(105%);transition:transform .25s;display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--display);font-size:31px;margin:0}
.icon-button{width:32px;height:32px;border:0;background:#f0f0ef;font-size:24px}
.cart-items{padding:15px 24px;overflow:auto;flex:1}
.cart-empty{font-size:13px;color:var(--muted)}
.cart-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-thumb{width:58px;height:58px;position:relative;overflow:hidden;display:grid;place-items:center;background:white;font-size:29px;flex:none}
.cart-row-info{flex:1}
.cart-row-info strong{display:block;font-size:12px}
.cart-row-info small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.cart-row-controls{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px}
.cart-row-controls button{width:22px;height:22px;border:1px solid var(--line);background:white}
.drawer-bottom{border-top:1px solid var(--line);padding:20px 24px}
.cart-total{display:flex;justify-content:space-between;font-size:15px}
.drawer-bottom p{color:var(--muted);font-size:10px}
.checkout-button{width:100%;border:0;background:#191b1e;color:white;padding:12px;font-size:11px;font-weight:800}
.checkout-button:disabled{opacity:.4}