/* Fan shop. Storefront rules are sportsacademy's fan-app shop
   (resources/css/app.scss, "Fan-app shop"), flattened; the colours come from
   the academy's branding via the variables on <body>. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--app-bg-solid);
    background: var(--app-bg) fixed;
    color: var(--fanapp-text);
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sh-muted: color-mix(in srgb, var(--fanapp-text) 62%, transparent);
    --sh-haze: rgba(255, 255, 255, 0.07);
    --sh-hair: rgba(255, 255, 255, 0.09);
    --sh-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sheet: color-mix(in srgb, var(--app-bg-solid) 90%, #fff);
}
@supports (color: oklch(from red l c h)) { body { --sheet: oklch(from var(--app-bg-solid) calc(l + 0.05) calc(c * 1.3) h); } }
main { max-width: 560px; margin: 0 auto; padding: 12px 16px calc(90px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { main { max-width: 1200px; } }
a { color: inherit; }
button { cursor: pointer; }
.ic { width: 1em; height: 1em; }
[hidden] { display: none !important; }

/* ── Landing ── */
.hub-top { margin-bottom: 0; }
.hub-brand { flex: 1; font-weight: 800; letter-spacing: -0.3px; font-size: 1.05rem; }
.hub-hero { padding: 22px 0 26px; }
.hub-hero h1 { max-width: 16ch; margin: 0; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; }
.hub-hero p { max-width: 38rem; margin: 12px 0 0; color: var(--sh-muted); }
.hub-steps { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .hub-steps { grid-template-columns: repeat(3, 1fr); } }
.hub-steps li { display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: 12px; padding: 14px; border-radius: 18px; background: var(--sh-haze); }
@media (max-width: 767.98px) { .hub-steps { gap: 6px; } .hub-steps li { padding: 10px 12px; } }
.hub-steps b { font-size: 0.95rem; }
.hub-steps small { grid-column: 2; color: var(--sh-muted); font-size: 0.82rem; }
.hub-step-n { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary); color: var(--on-primary); font-weight: 700; font-size: 0.85rem; }
.hub-hero .hub-small { font-size: 0.82rem; }
.hub-h2 { margin: 4px 0 12px; font-size: 1.1rem; font-weight: 700; }
.sh-go { padding: 6px 12px; border-radius: 10px; background: var(--brand-primary); color: var(--on-primary); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hub-card {
    display: grid; gap: 4px; padding: 18px; min-height: 190px;
    border-radius: 22px; text-decoration: none;
    background: var(--app-bg-solid); background: var(--app-bg);
    color: var(--fanapp-text);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
    transition: transform 0.25s var(--sh-ease), box-shadow 0.25s;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
.hub-logo { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 16px; object-fit: contain; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; }
.hub-card-name { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.hub-card small { color: color-mix(in srgb, var(--fanapp-text) 62%, transparent); }
.hub-card em { align-self: end; margin-top: 10px; font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--brand-primary); }

/* ── Storefront ── */
.sh-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.my-back-link { width: 36px; height: 36px; margin-left: -8px; display: grid; place-items: center; font-size: 1.6rem; color: inherit; }
.sh-logo { width: 36px; height: 36px; flex: none; border-radius: 10px; object-fit: contain; display: grid; place-items: center; background: var(--sh-haze); font-weight: 700; }
.my-page-title { flex: 1; min-width: 0; margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-hb { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 13px; background: var(--sh-haze); color: inherit; font-size: 1.3rem; }
.sh-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 700; background: var(--brand-primary); color: var(--on-primary); }
.sh-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--sh-haze); font-size: 0.85rem; }

.sh-bar2 { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.sh-view { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 12px; background: var(--sh-haze); }
.sh-view button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--sh-muted); font-size: 1.05rem; }
.sh-view button.active { background: rgba(255, 255, 255, 0.14); color: var(--fanapp-text); }

.sh-ph, .sh-coll > *, .sh-big { display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); color: rgba(255, 255, 255, 0.45); object-fit: contain; }

.sh-pack { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent); border-radius: 20px; background: none; color: inherit; font: inherit; text-align: left; }
.sh-pack > b { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.sh-coll { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 84px; height: 84px; flex: none; border-radius: 14px; overflow: hidden; }
.sh-coll > * { width: 100%; height: 100%; min-height: 0; font-size: 1rem; }
.sh-pack-what { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.sh-pack-what small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 0.78rem; font-weight: 400; color: var(--sh-muted); }
.sh-pack-what em { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 99px; font-style: normal; font-size: 0.7rem; font-weight: 600; background: var(--brand-primary); color: var(--on-primary); }

.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
@media (min-width: 576px) { .sh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .sh-grid { grid-template-columns: repeat(4, 1fr); } }
.sh-item { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.sh-item .sh-ph { width: 100%; aspect-ratio: 1; border-radius: 18px; padding: 8px; font-size: 2.2rem; transition: transform 0.2s var(--sh-ease); }
.sh-item:active .sh-ph { transform: scale(0.97); }
.sh-item b { display: block; margin-top: 8px; font-size: 0.95rem; font-weight: 700; }
.sh-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; line-height: 1.3; opacity: 0.85; }
.sh-item small { display: block; margin-top: 3px; font-size: 0.7rem; color: var(--brand-primary); }
.sh-grid.eshop-view-list { grid-template-columns: 1fr; gap: 0; }
.eshop-view-list .sh-item { display: grid; grid-template-columns: 64px 1fr auto; column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sh-hair); }
.eshop-view-list .sh-ph { grid-row: span 3; width: 64px; border-radius: 14px; padding: 4px; font-size: 1.4rem; }
.eshop-view-list .sh-item b { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
.eshop-view-list .sh-name, .eshop-view-list .sh-item small { grid-column: 2; }
.sh-empty { padding: 48px 16px; text-align: center; color: var(--sh-muted); }
.sh-empty .ic { font-size: 3rem; opacity: 0.35; }
.sh-empty h2 { margin: 8px 0 4px; font-size: 1rem; font-weight: 600; color: var(--fanapp-text); }

/* Sheets: <dialog>, bottom sheet on phones, centred card from 576px. */
.sh-sheet {
    width: min(100%, 500px); max-height: 90vh; overflow-y: auto;
    margin: auto; padding: 10px 18px 20px;
    border: 0; border-radius: 26px;
    background: var(--sheet); color: var(--fanapp-text);
}
.sh-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
@media (max-width: 575.98px) {
    .sh-sheet { max-width: none; width: 100%; margin: auto 0 0; border-radius: 26px 26px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .sh-sheet[open] { animation: sh-up 0.45s var(--sh-ease); }
}
@keyframes sh-up { from { transform: translateY(40%); } }
.sh-grab { display: block; width: 40px; height: 4px; margin: 0 auto 26px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.sh-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: inherit; font-size: 1rem; }
.sh-sheet .sh-cta { position: sticky; bottom: 8px; z-index: 2; box-shadow: 0 -10px 18px 2px var(--sheet); }
img.is-broken {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m4 18 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"), linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    background-size: 34%, cover; background-position: center; background-repeat: no-repeat;
    color: transparent;
}
.sh-big { display: block; width: min(100%, 34vh); aspect-ratio: 1; margin: 0 auto; object-fit: cover; border-radius: 20px; }
.sh-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.sh-thumbs img { width: 48px; height: 48px; flex: none; object-fit: cover; border: 2px solid transparent; border-radius: 12px; background: var(--sh-haze); cursor: pointer; }
.sh-thumbs img.active { border-color: var(--brand-primary); }
.sh-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.sh-sheet-title { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.sh-sheet-price { flex: none; font-size: 1.1rem; font-weight: 700; }
.sh-desc { margin: 6px 0 0; font-size: 0.85rem; color: var(--sh-muted); }
.sh-desc:empty { display: none; }
.sh-lab { display: flex; justify-content: space-between; margin: 10px 0 6px; font-size: 0.8rem; opacity: 0.7; }
.sh-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-sizes button { min-width: 44px; height: 34px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: none; color: inherit; font: inherit; font-size: 0.85rem; font-weight: 500; }
.sh-sizes button.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--on-primary); }
.sh-qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.sh-qty-row .sh-lab { margin: 0; }
.sh-qty { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 13px; background: var(--sh-haze); }
.sh-qty button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: inherit; font-size: 1.2rem; }
.sh-qty input { width: 36px; border: 0; background: none; color: inherit; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.sh-qty input::-webkit-inner-spin-button, .sh-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sh-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 16px; background: var(--brand-primary); color: var(--on-primary); font: inherit; font-size: 0.95rem; font-weight: 600; }
.sh-cta:disabled { opacity: 0.45; cursor: default; }
.sh-fine { margin: 0 0 4px; font-size: 0.75rem; text-align: center; opacity: 0.65; }
.sh-left { text-align: left; margin-top: 4px; }
.sh-select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: var(--sh-haze); color: inherit; font: inherit; }
.sh-select option, .sh-field select option { color: #111; }
.sh-bundle-items { margin-top: 12px; }
.eshop-bundle-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--sh-hair); }
.eshop-bundle-row > span { flex: 1; min-width: 0; }
.eshop-bundle-row .sh-select { width: auto; }
.eshop-bundle-row-img { width: 48px; height: 48px; flex: none; border-radius: 12px; object-fit: cover; background: var(--sh-haze); }

/* Basket */
.sh-basket-empty { padding: 28px 0; text-align: center; opacity: 0.6; }
.sh-basket-empty .ic { font-size: 2.4rem; }
.sh-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.sh-lines li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--sh-hair); font-size: 0.875rem; }
.sh-line-what { flex: 1; min-width: 0; display: grid; }
.sh-line-what small { color: var(--sh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-step { display: inline-flex; align-items: center; gap: 4px; }
.sh-step span { min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.sh-step button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: inherit; line-height: 1; }
.sh-step button:disabled { opacity: 0.35; }
.sh-tot { display: flex; justify-content: space-between; padding-top: 12px; font-size: 0.875rem; }
.sh-tot.is-save { color: var(--brand-primary); }
.sh-tot.is-all { font-size: 1.05rem; font-weight: 700; }

/* Checkout form */
.sh-field { display: grid; gap: 4px; margin-top: 10px; font-size: 0.8rem; color: var(--sh-muted); }
.sh-field small { opacity: 0.8; }
.sh-field input, .sh-field select, .sh-field textarea { width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: var(--sh-haze); color: var(--fanapp-text); font: inherit; font-size: 0.95rem; }
.sh-field input:focus, .sh-field select:focus, .sh-field textarea:focus { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.sh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-set { margin: 14px 0 0; padding: 0; border: 0; }
.sh-set legend { margin-bottom: 6px; font-size: 0.8rem; color: var(--sh-muted); }
.sh-opt { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; font-size: 0.9rem; cursor: pointer; }
.sh-opt:has(:checked) { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.sh-opt input, .sh-check input { accent-color: var(--brand-primary); }
.sh-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.85rem; }
.sh-error { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(220, 53, 69, 0.18); color: #ffb3ba; font-size: 0.85rem; }

/* Basket bar */
.sh-bbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 10;
    display: flex; align-items: center; gap: 10px; height: 54px; max-width: 536px; margin: 0 auto; padding: 0 8px 0 16px;
    border: 0; border-radius: 17px; background: var(--brand-primary); color: var(--on-primary);
    font: inherit; font-size: 0.875rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(calc(100% + 90px)); transition: transform 0.45s var(--sh-ease);
}
.sh-bbar .ic { font-size: 1.3rem; }
.sh-bbar > span { flex: 1; text-align: left; }
.sh-bbar em { padding: 8px 12px; border-radius: 12px; font-style: normal; font-size: 0.8rem; background: var(--on-primary); color: var(--brand-primary); }
.sh-bbar.is-on { transform: none; }
.sh-bbar.is-bump { animation: sh-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sh-bump { 40% { transform: scale(1.04); } }

/* Order status */
.sh-ord { margin-bottom: 10px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.sh-ord ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 0.85rem; }
.sh-ord li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.sh-ord li span:last-child { white-space: nowrap; color: var(--sh-muted); }
.sh-ord li.is-save { color: var(--brand-primary); }
.sh-ord li.is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--sh-hair); font-weight: 600; }
.sh-ord li.is-save span:last-child, .sh-ord li.is-total span:last-child { color: inherit; }
.sh-ord-t { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; }
.sh-ord-meta { display: block; font-size: 0.78rem; font-weight: 400; letter-spacing: 0; color: var(--sh-muted); }
.sh-chip { flex: none; padding: 2px 9px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; background: var(--sh-haze); }
.sh-chip.is-wait { background: color-mix(in srgb, #f5b942 22%, transparent); color: #f5b942; }
.sh-chip.is-ok { background: color-mix(in srgb, var(--brand-primary) 18%, transparent); color: var(--brand-primary); }

/* Entrance, as the fan app */
@keyframes fh-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes fh-pop { from { opacity: 0; transform: translateY(18px) scale(0.9); } }
.sh-enter .sh-head, .sh-enter .hub-hero { animation: fh-up 0.6s var(--sh-ease) both; }
.sh-enter .sh-bar2 { animation: fh-up 0.6s var(--sh-ease) 0.08s both; }
.sh-enter .sh-pack { animation: fh-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s both; }
.sh-enter .sh-item, .sh-enter .hub-card { animation: fh-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.26s both; }
@media (prefers-reduced-motion: reduce) {
    .sh-enter *, .sh-bbar.is-bump, .sh-sheet[open] { animation: none !important; }
    .sh-bbar { transition: none; }
}

/* ── Admin ── */
.adm { padding-bottom: 40px; }
.adm .sh-head { gap: 8px; }
.adm .sh-head form { margin: 0; }
.adm .hub-h2 { margin-top: 26px; display: flex; align-items: center; gap: 8px; }
.adm-n { min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--sh-haze); font-size: 0.8rem; text-align: center; }
.adm-card { margin-top: 10px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.adm-empty { color: var(--sh-muted); font-size: 0.9rem; }
.adm-req, .adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.adm-row { padding: 12px 0; border-bottom: 1px solid var(--sh-hair); }
.adm-row:last-child { border-bottom: 0; }
.adm-list { padding-top: 2px; padding-bottom: 2px; }
.adm-req-what { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.adm-req-what small { color: var(--sh-muted); font-size: 0.8rem; }
.adm-req-what .sh-chip { margin-left: 6px; vertical-align: 1px; }
.adm-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.adm-acts form { margin: 0; }
.adm-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--sh-haze); color: inherit; font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.adm-btn.is-primary { background: var(--brand-primary); color: var(--on-primary); }
.adm-edit > summary, .adm-add > summary { cursor: pointer; list-style: none; }
.adm-edit > summary { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--sh-haze); font-size: 0.82rem; font-weight: 600; }
.adm-edit[open] { flex-basis: 100%; }
.adm-edit form { margin-top: 6px; }
.adm-add > summary { font-weight: 600; }
.adm-add form .adm-btn { margin-top: 12px; }
.adm-slug { display: flex; align-items: center; gap: 2px; color: var(--fanapp-text); font-size: 0.9rem; }
.adm-slug input { flex: 1; min-width: 0; }
.sh-chip.is-bad { background: rgba(220, 53, 69, 0.2); color: #ffb3ba; }
.adm-log { display: grid; gap: 6px; font-size: 0.8rem; }
.adm-log div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.adm-log span { color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.adm-login { min-height: 80vh; display: grid; place-items: center; }
.adm-login .adm-card { width: min(100%, 380px); padding: 22px; }
.adm-login h1 { margin: 0; font-size: 1.4rem; }

/* ── Marketplace (the owner's Amazon reference): header on every page,
   hero carousel, white cards on a light grey page. ── */
body.mk {
    --mk-bg: #e9edef; --mk-card: #fff; --mk-ink: #0f1111; --mk-muted: #565959; --mk-line: #d5d9d9;
    --mk-top: #131a22; --mk-top2: #222c38; --mk-accent: #ffc928; --mk-accent-ink: #0f1111; --mk-link: #0a6a8f; --mk-deal: #cc0c39;
    background: var(--mk-bg); color: var(--mk-ink);
}
body.mk main { max-width: none; padding: 0 0 48px; }
body.mk a { color: var(--mk-link); }
body.is-shop main { padding-top: 16px; }

.mk-top { position: sticky; top: 0; z-index: 20; color: #fff; font-size: 0.85rem; }
.mk-bar { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #131a22; }
.mk-logo { flex: none; color: #fff !important; text-decoration: none; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.6px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; }
.mk-logo b { color: #ffc928; }
.mk-logo:hover { border-color: #fff; }
.mk-logo.is-dark { color: #0f1111 !important; }
.mk-logo.is-dark b { color: #e09b00; }
.mk-search { flex: 1; display: flex; min-width: 0; height: 40px; border-radius: 8px; overflow: hidden; background: #fff; }
.mk-search:focus-within { outline: 3px solid #ffc928; }
.mk-search select { flex: none; max-width: 150px; padding: 0 8px; border: 0; border-right: 1px solid #cdcdcd; background: #e6e6e6; color: #0f1111; font: inherit; font-size: 0.8rem; }
.mk-search input { flex: 1; min-width: 0; padding: 0 12px; border: 0; color: #0f1111; font: inherit; font-size: 0.95rem; outline: 0; }
.mk-search button { flex: none; width: 48px; border: 0; background: #ffc928; color: #0f1111; font-size: 1.3rem; display: grid; place-items: center; }
.mk-acc, .mk-bag { flex: none; color: #fff !important; text-decoration: none; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; line-height: 1.15; }
.mk-acc:hover, .mk-bag:hover { border-color: #fff; }
.mk-acc { display: grid; }
.mk-acc small { font-size: 0.75rem; opacity: 0.85; }
.mk-acc b { font-size: 0.85rem; }
.mk-bag { position: relative; display: flex; align-items: flex-end; gap: 4px; }
.mk-bag .ic { font-size: 1.9rem; }
.mk-bag span { position: absolute; top: 0; left: 21px; min-width: 18px; text-align: center; color: #ffc928; font-weight: 800; font-size: 0.95rem; }
.mk-bag b { font-size: 0.85rem; }
.mk-sub { display: flex; gap: 2px; padding: 4px 12px; background: #222c38; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.mk-sub a { color: #fff !important; text-decoration: none; padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 0.85rem; }
.mk-sub a:hover { border-color: #fff; }

/* Hero carousel */
.mk-hero { position: relative; max-width: 1500px; margin: 0 auto; }
.mk-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-track::-webkit-scrollbar { display: none; }
.mk-slide {
    flex: 0 0 100%; scroll-snap-align: start; min-height: 420px; display: flex; align-items: flex-start; gap: 24px;
    padding: 40px max(24px, 5vw) 200px; text-decoration: none; color: var(--fanapp-text) !important;
    background: var(--app-bg-solid); background: var(--app-bg);
    -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
}
.mk-slide-intro { background: linear-gradient(120deg, #1d3b57, #2e6a8e 55%, #f2b632); color: #fff !important; }
.mk-slide-text { max-width: 560px; display: grid; gap: 8px; justify-items: start; }
.mk-slide-text small { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; }
.mk-slide-text h1, .mk-slide-text h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; font-weight: 800; letter-spacing: -1.2px; }
.mk-slide-text p { margin: 0; font-size: 1.05rem; opacity: 0.9; }
.mk-slide-logo { width: 72px; height: 72px; border-radius: 18px; object-fit: contain; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; }
.mk-slide-pics { margin-left: auto; display: flex; gap: 12px; }
.mk-slide-pics img { width: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: rgba(255, 255, 255, 0.1); }
.mk-slide-pics img:nth-child(2) { margin-top: 40px; }
@media (max-width: 900px) { .mk-slide-pics { display: none; } .mk-slide { min-height: 330px; padding-bottom: 120px; } }
.mk-arrow { position: absolute; top: 90px; width: 44px; height: 110px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.0); color: #fff; font-size: 2rem; display: grid; place-items: center; }
.mk-arrow:hover, .mk-arrow:focus-visible { background: rgba(255, 255, 255, 0.15); }
.mk-arrow.is-prev { left: 6px; }
.mk-arrow.is-next { right: 6px; }
.mk-arrow.is-next .ic { transform: scaleX(-1); }

.mk-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--mk-accent, #ffc928); color: #0f1111 !important; font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.mk-btn:hover { filter: brightness(0.95); }
.mk-btn.is-wide { width: 100%; }
.mk-btn.is-ghost { background: #fff; border: 1px solid var(--mk-line, #d5d9d9); }

/* Cards */
.mk-wrap { position: relative; max-width: 1500px; margin: 0 auto; padding: 0 16px; }
.mk-hero + .mk-wrap { margin-top: -190px; }
@media (max-width: 900px) { .mk-hero + .mk-wrap { margin-top: -110px; } }
.mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.mk-card { margin-bottom: 18px; padding: 18px 20px; background: var(--mk-card); color: var(--mk-ink); }
.mk-cards .mk-card { margin: 0; display: flex; flex-direction: column; }
.mk-card h2 { margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; line-height: 1.2; display: flex; align-items: baseline; gap: 14px; }
.mk-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.mk-tile { display: grid; gap: 3px; color: var(--mk-ink) !important; text-decoration: none; font-size: 0.8rem; }
.mk-tile > span:not(.mk-ph):not(.mk-deal) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mk-tile small { color: var(--mk-muted); }
.mk-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f2f4f5; color: #a6adb0; font-size: 2rem; }
.mk-tile:hover .mk-ph, .mk-prod:hover .mk-ph { filter: brightness(0.96); }
.mk-more { margin-top: auto; padding-top: 14px; font-size: 0.85rem; font-weight: 400; text-decoration: none; }
.mk-more:hover { text-decoration: underline; color: #c45500 !important; }
.mk-card h2 .mk-more { margin: 0; padding: 0; }
.mk-deal { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--mk-deal); font-weight: 600; }
.mk-deal em { font-style: normal; padding: 3px 6px; border-radius: 2px; background: var(--mk-deal); color: #fff; }
.mk-signin p { margin: 0 0 16px; color: var(--mk-muted); }
.mk-signin .mk-fine { margin-top: 12px; }
.mk-fine { font-size: 0.8rem; color: var(--mk-muted, #565959); }

.mk-row { overflow: hidden; }
.mk-scroller { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.mk-scroller > * { scroll-snap-align: start; }
.mk-prod { flex: 0 0 170px; display: grid; align-content: start; gap: 4px; color: var(--mk-ink) !important; text-decoration: none; font-size: 0.85rem; }
.mk-prod-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.mk-prod:hover .mk-prod-name { color: #c45500; }
.mk-price { font-size: 1.15rem; font-weight: 600; }
.mk-by { color: var(--mk-muted); font-size: 0.75rem; }
.mk-academies a { flex: 0 0 120px; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--mk-ink) !important; text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.mk-round { width: 96px; height: 96px; border-radius: 50%; object-fit: contain; padding: 14px; background: var(--app-bg-solid); background: var(--app-bg); color: var(--fanapp-text); display: grid; place-items: center; font-size: 2rem; font-weight: 800; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-primary); }

/* Search results */
.mk-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 18px 0 10px; }
.mk-results-head h1 { margin: 0; font-size: 1.4rem; }
.mk-results-head span { color: var(--mk-muted); }
.mk-h2 { margin: 10px 0; font-size: 1.15rem; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mk-grid .mk-prod { padding: 12px; background: #fff; }

/* Basket page */
.mk-basket { margin-top: 18px; }
.mk-basket h1 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 500; }
.mk-group { margin-top: 18px; border-top: 1px solid var(--mk-line); padding-top: 14px; }
.mk-group-head { display: flex; align-items: center; gap: 10px; }
.mk-group-head img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.mk-group-head a { margin-left: auto; font-size: 0.85rem; }
.mk-group ul { list-style: none; margin: 8px 0; padding: 0; }
.mk-group li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #eef0f0; }
.mk-group li > span { flex: 1; min-width: 0; display: grid; }
.mk-group li small { color: var(--mk-muted); }
.mk-link { border: 0; background: none; color: var(--mk-link); font: inherit; font-size: 0.8rem; padding: 0; }
.mk-group-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.mk-group-foot small { color: var(--mk-muted); }
.mk-empty { padding: 30px 0; text-align: center; }
.mk-empty .ic { font-size: 3rem; color: #a6adb0; }
.mk-empty h2 { display: block; margin: 6px 0 14px; font-size: 1.2rem; }

/* Account */
.mk-auth { max-width: 380px; margin: 0 auto; padding: 24px 16px; display: grid; justify-items: center; gap: 14px; }
.mk-auth .mk-card { width: 100%; border: 1px solid var(--mk-line); border-radius: 8px; }
.mk-auth h1 { margin: 0 0 10px; font-size: 1.6rem; font-weight: 500; }
.mk-field { display: grid; gap: 4px; margin-bottom: 12px; font-size: 0.85rem; font-weight: 700; }
.mk-field small { font-weight: 400; color: var(--mk-muted); }
.mk-field input, .mk-field select { height: 38px; padding: 0 10px; border: 1px solid #a6a6a6; border-radius: 4px; font: inherit; font-weight: 400; color: var(--mk-ink); background: #fff; }
.mk-field input:focus, .mk-field select:focus { outline: 0; border-color: #e77600; box-shadow: 0 0 0 3px rgba(228, 121, 17, 0.35); }
.mk-field input:disabled { background: #f3f3f3; }
.mk-divider { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; color: var(--mk-muted); font-size: 0.8rem; }
.mk-divider::before, .mk-divider::after { content: ""; flex: 1; border-top: 1px solid var(--mk-line); }
.mk-alert { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #c40000; border-radius: 6px; color: #c40000; font-size: 0.85rem; }
.mk-ok { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #067d62; border-radius: 6px; color: #067d62; font-size: 0.85rem; }
.mk-account h1 { margin: 20px 0 14px; font-size: 1.7rem; font-weight: 500; }
.mk-acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.mk-acc-grid .mk-card { margin: 0; }
.mk-account h3 { margin: 18px 0 10px; font-size: 1rem; }
.mk-account h3 small { font-weight: 400; color: var(--mk-muted); }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-order { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eef0f0; color: var(--mk-ink) !important; text-decoration: none; }
.mk-order > span:first-child { display: grid; }
.mk-order small { color: var(--mk-muted); }
.mk-status { padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; background: #eef0f0; }
.mk-status.is-paid, .mk-status.is-prepared, .mk-status.is-fulfilled { background: #e3f4ee; color: #067d62; }
.mk-status.is-pending { background: #fff4d6; color: #8a5a00; }
.mk-signout { margin-top: 18px; }
.mk-forgot { display: block; margin: -4px 0 14px; font-size: 0.8rem; }

/* Light marketplace defaults for anything shared with the shop styles
   (empty states, the 404 page): dark text, gold accent, dark-on-light haze. */
body.mk {
    --brand-primary: #ffc928; --on-primary: #0f1111; --fanapp-text: #0f1111; --app-bg-solid: #ffffff;
    --sh-muted: #565959; --sh-haze: rgba(0, 0, 0, 0.05); --sh-hair: #e3e6e6;
}
body.mk .sh-empty { color: var(--mk-muted); }
body.mk .sh-empty h2 { color: var(--mk-ink); }

/* ── Phones: slim pinned bar, tab bar at the bottom, thumb-sized targets ── */
.mk-tabs { display: none; }
.mk-dots { display: none; }
.mk-search input { font-size: 16px; } /* under 16px iOS zooms the page on focus */
.mk-forgot { padding: 6px 0; }
.sh-view button { width: 38px; height: 34px; }
@media (max-width: 760px) {
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    .mk-bar { gap: 10px; padding: 8px 12px; }
    .mk-logo { font-size: 1.15rem; padding: 4px 0; }
    .mk-search { height: 42px; }
    .mk-search select, .mk-acc, .mk-bag { display: none; }
    .mk-sub { padding: 2px 8px; }
    .mk-sub a { padding: 10px 8px; }

    .mk-tabs {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        display: grid; grid-template-columns: repeat(4, 1fr);
        padding: 4px 4px env(safe-area-inset-bottom); background: #131a22; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    }
    .mk-tabs a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 0 6px; color: #c9d1d9 !important; text-decoration: none; font-size: 0.7rem; font-weight: 600; }
    .mk-tabs a span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mk-tabs .ic { font-size: 1.45rem; }
    .mk-tabs a.is-on { color: #ffc928 !important; }
    .mk-tabs a.is-on::before { content: ""; position: absolute; top: -4px; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: #ffc928; }
    .mk-tabs em { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ffc928; color: #0f1111; font-style: normal; font-size: 0.68rem; font-weight: 800; display: grid; place-items: center; }
    .mk-tabs em.is-zero { display: none; }
    /* The shop's basket bar rides just above the tabs. */
    .sh-bbar { bottom: calc(68px + env(safe-area-inset-bottom)); }
    body.is-shop main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

    /* Hero: swipe + dots instead of arrows; shorter. */
    .mk-arrow { display: none; }
    .mk-slide { min-height: 300px; padding: 24px 18px 110px; }
    .mk-slide-text h1, .mk-slide-text h2 { font-size: 2rem; letter-spacing: -0.8px; }
    .mk-slide-text p { font-size: 0.95rem; }
    .mk-slide-text small { font-size: 0.72rem; }
    .mk-slide-logo { width: 56px; height: 56px; border-radius: 14px; }
    .mk-dots { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; padding: 6px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.25); }
    .mk-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.5); transition: width 0.2s; }
    .mk-dots button.is-on { width: 20px; background: #fff; }
    .mk-hero + .mk-wrap { margin-top: -96px; }

    /* Cards: full width, tighter; the sign-in card becomes a strip. */
    .mk-wrap { padding: 0 10px; }
    .mk-cards { grid-template-columns: 1fr; gap: 10px; }
    .mk-card { margin-bottom: 10px; padding: 14px; border-radius: 10px; }
    .mk-card h2 { margin-bottom: 10px; font-size: 1.12rem; justify-content: space-between; }
    .mk-card h2 .mk-more { flex: none; font-size: 0.85rem; }
    .mk-quad { gap: 10px; }
    .mk-tile { font-size: 0.85rem; }
    .mk-more { padding: 12px 0 2px; font-size: 0.9rem; }
    .mk-cards .mk-signin { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
    .mk-signin h2 { grid-column: 1 / -1; margin: 0; }
    .mk-signin > p:not(.mk-fine) { display: none; }
    .mk-signin .mk-btn.is-wide { grid-column: 2; grid-row: 2; width: auto; height: 44px; }
    .mk-signin .mk-fine { grid-column: 1; grid-row: 2; margin: 0; }
    .mk-prod { flex-basis: 140px; }
    .mk-academies a { flex-basis: 96px; }
    .mk-round { width: 76px; height: 76px; padding: 10px; }

    /* Search: two columns. */
    .mk-results-head { padding: 14px 4px 8px; }
    .mk-results-head h1 { font-size: 1.2rem; }
    .mk-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mk-grid .mk-prod { padding: 8px; border-radius: 8px; }

    /* Basket and account: full-width actions, 44px+ targets, 16px fields. */
    .mk-basket { margin-top: 10px; }
    .mk-basket h1, .mk-account h1 { font-size: 1.4rem; }
    .mk-group-foot { display: grid; }
    .mk-group-foot .mk-btn { width: 100%; height: 46px; }
    .mk-link { padding: 10px 6px; }
    .mk-btn { height: 46px; }
    .mk-field input, .mk-field select, .sh-field input, .sh-field select, .sh-field textarea, .sh-select { font-size: 16px; min-height: 44px; }
    .mk-two { grid-template-columns: 1fr; gap: 0; }
    .mk-auth { padding-top: 14px; }
    .mk-order { padding: 14px 0; }

    /* Shop sheets: 16px inputs and roomy steppers. */
    .sh-qty button { width: 40px; height: 40px; }
    .sh-qty input { font-size: 16px; }
    .sh-sizes button { min-width: 48px; height: 42px; }
    .sh-step button { width: 34px; height: 34px; }
    .sh-opt { padding: 13px 12px; }
}