/* ===================================================================
   Music Stick Market — Elevated "Vinyl Crate" storefront
   All tokens are --msm-* and all rules are scoped under .msm-shop
   (or the cart drawer's [data-msm-cart-drawer]) so nothing collides
   with the active WordPress theme that now wraps these pages.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Libre+Caslon+Display&family=Space+Mono:wght@400;700&display=swap');

:root {
  --msm-cream:        #F4EFE6;
  --msm-paper:        #FBF8F2;
  --msm-ink:          #2A2A2A;
  --msm-vinyl:        #1A1A1A;
  --msm-brass:        #C9A063;
  --msm-brass-soft:   #E0BE83;
  --msm-line:         #D8D1C2;
  --msm-line-strong:  #C4BBA8;
  --msm-muted:        #6E665A;
  --msm-danger:       #B0413E;
  --msm-ok:           #4F7A52;
  --msm-spice:        #C2562F;

  --msm-font-display: "Libre Caslon Display", Georgia, serif;
  --msm-font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --msm-font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --msm-radius:    6px;
  --msm-radius-lg: 12px;
  --msm-shadow-sm: 0 1px 2px rgba(26,26,26,.06);
  --msm-shadow:    0 14px 34px -18px rgba(26,26,26,.45);
  --msm-maxw:      1180px;

  /* Album artwork scale — used across cards, rails, detail, cart */
  --msm-art-card:     150px;
  --msm-art-detail:   220px;
  --msm-art-lineitem: 72px;
  --msm-art-thumb:    56px;
}

/* ---- base (scoped) ---- */
.msm-shop, .msm-shop *, .msm-shop *::before, .msm-shop *::after { box-sizing: border-box; }
.msm-shop {
  background: var(--msm-cream);
  color: var(--msm-ink);
  font-family: var(--msm-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.msm-shop img { max-width: 100%; height: auto; display: block; }
/* Grid/flex items default min-width:auto; LiteSpeed lazyload stamps width=1024 on art
   which otherwise prevents cards from shrinking on mobile. */
.msm-shop .card,
.msm-shop .card__art,
.msm-shop .album__media,
.msm-shop .album__cover,
.msm-shop .lineitem__art,
.msm-shop .rail > * { min-width: 0; }
.msm-shop a { color: inherit; }
.msm-shop-main { display: block; }

/* ---- layout helpers ---- */
.msm-shop .wrap { max-width: var(--msm-maxw); margin: 0 auto; padding: 0 24px; }
/* padding-block, never a shorthand: these are routinely combined with .wrap
   (`class="section--tight wrap"`), which has identical specificity and comes
   first — a `padding: N 0` shorthand here silently wipes .wrap's 24px gutter
   and the section renders 24px wider on each side than its siblings. */
.msm-shop .section { padding-block: 72px; }
.msm-shop .section--tight { padding-block: 28px; }
.msm-shop .row { display: flex; align-items: center; gap: 12px; }

/* ---- typography ---- */
.msm-shop .display { font-family: var(--msm-font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
.msm-shop h1.display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.msm-shop h2.display { font-size: clamp(2rem, 4vw, 3rem); }
.msm-shop h3.display { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.msm-shop .eyebrow { font-family: var(--msm-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--msm-brass); margin: 0; }
.msm-shop .lede { font-size: 1.2rem; color: var(--msm-muted); max-width: 56ch; }
.msm-shop .mono { font-family: var(--msm-font-mono); }
.msm-shop .muted { color: var(--msm-muted); }

/* ---- crate-divider section header ---- */
.msm-shop .crate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--msm-ink); }
.msm-shop .crate-head__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.msm-shop .crate-head__count { font-family: var(--msm-font-mono); font-size: 0.82rem; color: var(--msm-muted); letter-spacing: 0.08em; }
.msm-shop .crate-head__link { font-family: var(--msm-font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--msm-brass); padding-bottom: 2px; white-space: nowrap; }
.msm-shop .crate-head__link:hover { color: var(--msm-brass); }

/* ---- buttons ---- */
.msm-shop .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font-family: var(--msm-font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; border: 2px solid var(--msm-ink); border-radius: var(--msm-radius); background: var(--msm-ink); color: var(--msm-cream); cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.msm-shop .btn:hover { transform: translateY(-2px); box-shadow: var(--msm-shadow); }
.msm-shop .btn--brass { background: var(--msm-brass); border-color: var(--msm-brass); color: var(--msm-vinyl); }
.msm-shop .btn--ghost { background: transparent; color: var(--msm-ink); }
.msm-shop .btn--ghost:hover { background: var(--msm-ink); color: var(--msm-cream); }
.msm-shop .btn--block { width: 100%; }
.msm-shop .btn--lg { min-height: 56px; font-size: 1.05rem; padding: 0 30px; }
.msm-shop .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- chip ---- */
.msm-shop .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; font-family: var(--msm-font-mono); font-size: 0.78rem; letter-spacing: 0.06em; border: 1.5px solid var(--msm-line-strong); border-radius: 999px; background: var(--msm-paper); color: var(--msm-ink); cursor: pointer; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.msm-shop .chip:hover { border-color: var(--msm-ink); }
.msm-shop .chip[aria-pressed="true"], .msm-shop .chip--active { background: var(--msm-ink); color: var(--msm-cream); border-color: var(--msm-ink); }
.msm-shop .chip .x { font-weight: 700; opacity: .7; }

/* ---- badge ---- */
.msm-shop .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--msm-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--msm-brass); color: var(--msm-vinyl); border-radius: 4px; }
.msm-shop .badge--ink { background: var(--msm-ink); color: var(--msm-cream); }
.msm-shop .badge--soft { background: transparent; color: var(--msm-muted); border: 1px solid var(--msm-line-strong); }
.msm-shop .badge--spice { background: var(--msm-spice); color: var(--msm-cream); }

/* ---- price ---- */
.msm-shop .price { font-family: var(--msm-font-mono); font-weight: 700; letter-spacing: -0.01em; }
.msm-shop .price--lg { font-size: 1.9rem; }
.msm-shop .price__was { color: var(--msm-muted); text-decoration: line-through; font-weight: 400; margin-left: 8px; }

/* ===== album card grid ===== */
/* Fixed card width (not 1fr) so sparse rails/grids stay card-sized. */
.msm-shop .grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(0, var(--msm-art-card))); justify-content: start; }
.msm-shop .card { text-decoration: none; color: inherit; display: block; width: var(--msm-art-card); max-width: 100%; box-sizing: border-box; }
.msm-shop .card__art { position: relative; aspect-ratio: 1 / 1; border: 1.5px solid var(--msm-line-strong); border-radius: var(--msm-radius); overflow: hidden; background: var(--msm-paper); transition: transform .18s ease, box-shadow .18s ease; }
.msm-shop .card__art img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.msm-shop .card:hover .card__art { transform: translateY(-3px); box-shadow: var(--msm-shadow); }
.msm-shop .card__badge { position: absolute; top: 8px; left: 8px; z-index: 2; }
.msm-shop .card__meta { padding-top: 10px; min-width: 0; overflow: hidden; }
.msm-shop .card__title { font-family: var(--msm-font-display); font-size: 0.98rem; line-height: 1.15; margin: 0 0 2px; overflow-wrap: anywhere; }
.msm-shop .card__artist { color: var(--msm-muted); font-size: 0.82rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.msm-shop .card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.msm-shop .card__tag { font-family: var(--msm-font-mono); font-size: 0.62rem; color: var(--msm-muted); letter-spacing: 0.06em; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* artwork placeholder (when an album has no artwork yet) */
.msm-shop .art-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; color: var(--msm-cream); background: linear-gradient(150deg, #3A5A78, #1A1A1A); }
.msm-shop .art-ph__name { font-family: var(--msm-font-display); font-size: 1.1rem; line-height: 1.05; }
.msm-shop .art-ph__note { font-family: var(--msm-font-mono); font-size: 0.6rem; letter-spacing: 0.2em; opacity: 0.7; text-transform: uppercase; margin-top: 4px; }
.msm-shop .art-ph--lg .art-ph__name { font-size: 1.35rem; }

/* ---- horizontal rail ---- */
.msm-shop .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--msm-art-card)); gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 0 24px 10px; margin: 0 -24px; scrollbar-width: thin; justify-content: start; }
.msm-shop .rail > * { scroll-snap-align: start; }

/* ---- search field ---- */
.msm-shop .search { display: flex; align-items: center; background: var(--msm-paper); border: 2px solid var(--msm-ink); border-radius: var(--msm-radius); overflow: hidden; max-width: 540px; }
.msm-shop .search input { flex: 1; border: 0; background: transparent; padding: 16px 18px; font-family: var(--msm-font-body); font-size: 1.02rem; color: var(--msm-ink); min-width: 0; }
.msm-shop .search input:focus { outline: none; }
.msm-shop .search button { border: 0; border-radius: 0; min-height: 0; align-self: stretch; padding: 0 24px; }

/* ---- filter bar + selects ---- */
.msm-shop .filterbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 22px 0 28px; border-bottom: 1px solid var(--msm-line); margin-bottom: 32px; }
.msm-shop .filterbar .search { max-width: 320px; flex: 1 1 260px; }

/* ---- quick-sort chip row (shop home "Browse All Albums") ---- */
.msm-shop .quick-sorts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- result bar: count + active filter chips ---- */
.msm-shop .resultbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: -14px 0 26px; }
.msm-shop .resultbar__count { margin: 0; font-family: var(--msm-font-mono); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--msm-muted); }
.msm-shop .resultbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.msm-shop .resultbar__label { font-family: var(--msm-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--msm-muted); }
.msm-shop .chip--removable { gap: 10px; }
.msm-shop .chip--removable span[aria-hidden] { font-size: 1.05rem; line-height: 1; color: var(--msm-muted); }
.msm-shop .chip--removable:hover { border-color: var(--msm-ink); }
.msm-shop .chip--removable:hover span[aria-hidden] { color: var(--msm-ink); }
.msm-shop .resultbar__clear { font-family: var(--msm-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--msm-brass); padding-bottom: 2px; text-decoration: none; }
/* Chip labels carry the filter name; the × is decorative, so screen readers get
   the real action from this instead. */
.msm-shop .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.msm-shop .select { position: relative; display: inline-flex; }
.msm-shop .select select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 38px 0 16px; border: 1.5px solid var(--msm-line-strong); border-radius: 999px; background: var(--msm-paper); font-family: var(--msm-font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--msm-ink); cursor: pointer; }
.msm-shop .select::after { content: "\25be"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--msm-muted); }
.msm-shop .applied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }

/* ---- color swatches ---- */
.msm-shop .swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.msm-shop .swatch { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.msm-shop .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.msm-shop .swatch__dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--msm-line-strong); display: block; transition: transform .12s ease; }
.msm-shop .swatch:hover .swatch__dot { transform: scale(1.08); }
.msm-shop .swatch input:checked + .swatch__dot { border-color: var(--msm-ink); box-shadow: 0 0 0 2px var(--msm-cream), 0 0 0 4px var(--msm-ink); }
.msm-shop .swatch input:focus-visible + .swatch__dot { outline: 2px solid var(--msm-brass); outline-offset: 3px; }

/* ---- quantity stepper ---- */
.msm-shop .qty { display: inline-flex; align-items: stretch; border: 2px solid var(--msm-ink); border-radius: var(--msm-radius); overflow: hidden; }
.msm-shop .qty button { border: 0; background: var(--msm-paper); width: 44px; font-size: 1.3rem; cursor: pointer; color: var(--msm-ink); }
.msm-shop .qty button:hover { background: var(--msm-ink); color: var(--msm-cream); }
.msm-shop .qty input, .msm-shop .qty span { width: 52px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-left: 2px solid var(--msm-ink); border-right: 2px solid var(--msm-ink); text-align: center; font-family: var(--msm-font-mono); font-size: 1rem; background: var(--msm-cream); }

/* ---- tracklist ---- */
.msm-shop .tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--msm-line); }
.msm-shop .tracklist li { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--msm-line); }
.msm-shop .tracklist .tk-no { font-family: var(--msm-font-mono); font-size: 0.8rem; color: var(--msm-brass); }
.msm-shop .tracklist .tk-name { font-size: 1rem; }
.msm-shop .tracklist .tk-dur { font-family: var(--msm-font-mono); font-size: 0.82rem; color: var(--msm-muted); }
.msm-shop .tracklist-note { font-size: 0.9rem; color: var(--msm-muted); margin-top: 16px; }

/* ---- panel ---- */
.msm-shop .panel { background: var(--msm-paper); border: 1.5px solid var(--msm-line-strong); border-radius: var(--msm-radius-lg); padding: 28px; }

/* ===== hero (home) ===== */
.msm-shop .hero { padding: 48px 0 36px; text-align: center; }
.msm-shop .hero h1 { margin: 14px auto 18px; max-width: none; white-space: nowrap; }
.msm-shop .hero .lede { margin: 0 auto 32px; text-align: center; }
.msm-shop .hero .search { margin: 0 auto; }
.msm-shop .ticker { font-family: var(--msm-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--msm-muted); margin-top: 26px; }
.msm-shop .ticker b { color: var(--msm-brass); }

/* ===== browse-experience banner (home) ===== */
/* The outer element keeps .wrap's 24px gutter; all card styling lives on __inner.
   Putting padding on the .wrap element itself would override the gutter (same
   specificity, later rule) and run the border to the viewport edge under 1180px. */
.msm-shop .browse-experience-banner { margin: 28px auto; }
.msm-shop .browse-experience-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--msm-paper);
  border: 2px solid var(--msm-line-strong);
  border-radius: var(--msm-radius-lg);
  padding: 36px 40px;
}
.msm-shop .browse-experience-banner__copy { flex: 1; }
.msm-shop .browse-experience-banner__copy h2 { margin: 10px 0 12px; }
.msm-shop .browse-experience-banner__copy .muted { max-width: 52ch; }
/* CTA must not compress at intermediate widths where copy widens but button has no room. */
.msm-shop .browse-experience-banner .btn { flex-shrink: 0; white-space: nowrap; }
/* :focus-visible on the CTA, not :focus-within on the container — the latter also
   fires on mouse click and outlines the whole banner. Matches .swatch input above. */
.msm-shop .browse-experience-banner .btn:focus-visible {
  outline: 2px solid var(--msm-brass);
  outline-offset: 3px;
}

/* ===== album detail ===== */
/* Detail cover sits just above card scale — never half-page. */
.msm-shop .album { display: grid; grid-template-columns: var(--msm-art-detail) minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px 0 16px; }
.msm-shop .album__media { display: flex; justify-content: flex-start; align-items: flex-start; width: var(--msm-art-detail); max-width: 100%; }
.msm-shop .album__cover { width: var(--msm-art-detail); max-width: 100%; aspect-ratio: 1 / 1; border: 1.5px solid var(--msm-line-strong); border-radius: var(--msm-radius); overflow: hidden; position: relative; background: var(--msm-paper); box-shadow: var(--msm-shadow-sm); }
.msm-shop .album__cover img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; background: var(--msm-paper); }
.msm-shop .album__artist-link { font-family: var(--msm-font-body); font-size: 1rem; color: var(--msm-muted); text-decoration: none; border-bottom: 1.5px solid var(--msm-brass); }
.msm-shop .album__artist-link:hover { color: var(--msm-ink); }
.msm-shop .album__meta-line { font-family: var(--msm-font-mono); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--msm-muted); margin: 14px 0 18px; }
.msm-shop .field-label { font-family: var(--msm-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--msm-muted); margin: 0 0 12px; }
.msm-shop .buy-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 24px 0; }
.msm-shop .assurance { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--msm-muted); border-top: 1px solid var(--msm-line); padding-top: 20px; margin-top: 22px; }
.msm-shop .spec-list { list-style: none; padding: 0; margin: 18px 0 0; }
.msm-shop .spec-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 0.92rem; border-bottom: 1px dotted var(--msm-line); padding: 9px 0; }
.msm-shop .spec-list .k { font-family: var(--msm-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--msm-muted); }

/* ===== cart ===== */
.msm-shop .cart { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; padding-top: 30px; }
.msm-shop .lineitem { display: grid; grid-template-columns: var(--msm-art-lineitem) 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--msm-line); }
.msm-shop .lineitem__art { width: var(--msm-art-lineitem); height: var(--msm-art-lineitem); border-radius: var(--msm-radius); overflow: hidden; border: 1.5px solid var(--msm-line-strong); position: relative; background: var(--msm-paper); flex-shrink: 0; }
.msm-shop .lineitem__art img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.msm-shop .lineitem__title { font-family: var(--msm-font-display); font-size: 1.18rem; margin: 0; }
.msm-shop .lineitem__sub { color: var(--msm-muted); font-size: 0.9rem; margin: 2px 0 12px; }
.msm-shop .lineitem__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.msm-shop .lineitem__price { text-align: right; white-space: nowrap; }
.msm-shop .remove { background: none; border: 0; color: var(--msm-muted); font-family: var(--msm-font-mono); font-size: 0.76rem; cursor: pointer; text-decoration: underline; padding: 0; }
.msm-shop .remove:hover { color: var(--msm-danger); }
.msm-shop .summary { position: sticky; top: 24px; }
.msm-shop .summary__row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 0.95rem; }
.msm-shop .summary__row .muted { font-size: 0.85rem; }
.msm-shop .summary__row--total { border-top: 2px solid var(--msm-ink); margin-top: 8px; padding-top: 16px; font-size: 1.3rem; font-family: var(--msm-font-display); align-items: baseline; }
.msm-shop .ship-select { width: 100%; }
.msm-shop .ship-select select { width: 100%; border-radius: var(--msm-radius); padding: 12px 38px 12px 14px; }
.msm-shop .cart-warnings { color: var(--msm-danger); font-size: 0.9rem; margin-top: 12px; }
.msm-shop .cart-warnings ul { margin: 6px 0; padding-left: 1.2rem; }

/* ===== confirmation / centered states ===== */
.msm-shop .center-state { max-width: 720px; margin: 0 auto; text-align: center; padding-top: 20px; }
.msm-shop .confirm-tags { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 28px; }
.msm-shop .timeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 8px 0; text-align: left; padding: 0; }
.msm-shop .timeline li { list-style: none; padding: 18px 20px; border-top: 3px solid var(--msm-line-strong); }
.msm-shop .timeline li.is-done { border-top-color: var(--msm-brass); }
.msm-shop .timeline .step { font-family: var(--msm-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--msm-brass); }
.msm-shop .timeline h4 { margin: 6px 0 4px; font-family: var(--msm-font-display); font-size: 1.2rem; font-weight: 400; }
.msm-shop .receipt { text-align: left; margin: 32px auto 0; max-width: 640px; }
.msm-shop .receipt .lineitem { grid-template-columns: var(--msm-art-thumb) 1fr auto; }
.msm-shop .receipt .lineitem__art { width: var(--msm-art-thumb); height: var(--msm-art-thumb); }

/* ===== collection / account / artist (built later — styles staged) ===== */
.msm-shop .coll-hero { padding: 54px 0 14px; border-bottom: 2px solid var(--msm-ink); margin-bottom: 34px; }
.msm-shop .coll-hero h1 { margin: 14px 0 14px; max-width: 18ch; }
.msm-shop .account { display: grid; grid-template-columns: 220px 1fr; gap: 44px; padding-top: 30px; }
.msm-shop .account__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
.msm-shop .account__nav a { text-decoration: none; padding: 12px 14px; border-radius: var(--msm-radius); font-size: 0.95rem; color: var(--msm-ink); border-left: 3px solid transparent; }
.msm-shop .account__nav a:hover { background: var(--msm-paper); }
.msm-shop .account__nav a.is-active { background: var(--msm-paper); border-left-color: var(--msm-brass); font-weight: 600; }
.msm-shop .order-card { border: 1.5px solid var(--msm-line-strong); border-radius: var(--msm-radius-lg); background: var(--msm-paper); padding: 22px 24px; margin-bottom: 20px; }
.msm-shop .order-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; border-bottom: 1px solid var(--msm-line); padding-bottom: 16px; margin-bottom: 16px; }
.msm-shop .status { font-family: var(--msm-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; }
.msm-shop .status--paid { background: rgba(79,122,82,.16); color: var(--msm-ok); }
.msm-shop .status--refunded { background: rgba(176,65,62,.13); color: var(--msm-danger); }
.msm-shop .status--made { background: rgba(201,160,99,.2); color: #8a6a2f; }
.msm-shop .artist-hero { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; padding: 42px 0; border-bottom: 2px solid var(--msm-ink); }
.msm-shop .artist-hero__photo { width: 220px; height: 220px; border-radius: var(--msm-radius-lg); overflow: hidden; position: relative; border: 1.5px solid var(--msm-line-strong); }
.msm-shop .artist-hero__name { font-family: var(--msm-font-display); font-size: clamp(2.2rem,4vw,3.2rem); margin: 10px 0 6px; line-height: 1.04; }
.msm-shop .socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.msm-shop .socials a { font-family: var(--msm-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--msm-line-strong); border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.msm-shop .socials a:hover { border-color: var(--msm-ink); }

/* ---- breadcrumbs ---- */
.msm-shop .crumbs { font-family: var(--msm-font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--msm-muted); padding: 22px 0 0; }
.msm-shop .crumbs a { text-decoration: none; }
.msm-shop .crumbs a:hover { color: var(--msm-brass); }
.msm-shop .crumbs span { margin: 0 8px; opacity: 0.5; }

/* ---- cart icon (shop content) ---- */
.msm-shop .msm-cart-icon { display: inline-flex; align-items: center; gap: 8px; float: right; font-family: var(--msm-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--msm-line-strong); border-radius: 999px; padding: 8px 14px; margin-top: 18px; }
.msm-shop .msm-cart-icon:hover { border-color: var(--msm-ink); }
.msm-shop .msm-cart-icon [data-msm-cart-count] { background: var(--msm-brass); color: var(--msm-vinyl); border-radius: 999px; padding: 1px 8px; font-weight: 700; }

/* ---- pagination ---- */
.msm-shop .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; font-family: var(--msm-font-mono); flex-wrap: wrap; }
.msm-shop .pagination a, .msm-shop .pagination span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1.5px solid var(--msm-line-strong); border-radius: var(--msm-radius); text-decoration: none; font-size: 0.85rem; background: var(--msm-paper); }
.msm-shop .pagination a:hover { border-color: var(--msm-ink); }
.msm-shop .pagination .is-current { background: var(--msm-ink); color: var(--msm-cream); border-color: var(--msm-ink); }
.msm-shop .pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ===== cart drawer (injected into wp_footer, OUTSIDE .msm-shop) ===== */
[data-msm-cart-drawer] { position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw; background: var(--msm-paper); border-left: 1.5px solid var(--msm-ink); box-shadow: var(--msm-shadow); transform: translateX(105%); transition: transform .28s ease; z-index: 100000; display: flex; flex-direction: column; font-family: var(--msm-font-body); color: var(--msm-ink); }
[data-msm-cart-drawer].is-open { transform: translateX(0); }
[data-msm-cart-drawer] .msm-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--msm-line); }
[data-msm-cart-drawer] .msm-drawer__head strong { font-family: var(--msm-font-display); font-size: 1.4rem; font-weight: 400; }
[data-msm-cart-drawer] [data-msm-cart-close] { background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--msm-muted); }
[data-msm-cart-drawer] .msm-drawer__body { flex: 1; overflow: auto; padding: 4px 20px; }
[data-msm-cart-drawer] .msm-drawer__foot { padding: 18px 20px; border-top: 1px solid var(--msm-line); }
[data-msm-cart-drawer] .msm-drawer__list { list-style: none; margin: 0; padding: 0; }
[data-msm-cart-drawer] .msm-drawer__item { display: grid; grid-template-columns: var(--msm-art-thumb) 1fr auto auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--msm-line); }
[data-msm-cart-drawer] .msm-drawer__item img { width: var(--msm-art-thumb); height: var(--msm-art-thumb); max-width: var(--msm-art-thumb); max-height: var(--msm-art-thumb); object-fit: cover; border-radius: 4px; border: 1px solid var(--msm-line-strong); background: var(--msm-cream); }
[data-msm-cart-drawer] .msm-drawer__meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; min-width: 0; }
[data-msm-cart-drawer] .msm-drawer__meta strong { font-family: var(--msm-font-display); font-size: 1.02rem; font-weight: 400; }
[data-msm-cart-drawer] .msm-drawer__meta span { color: var(--msm-muted); }
[data-msm-cart-drawer] .msm-drawer__qty { display: inline-flex; align-items: center; gap: 6px; font-family: var(--msm-font-mono); font-size: 0.85rem; }
[data-msm-cart-drawer] .msm-drawer__qty button { border: 1px solid var(--msm-line-strong); background: var(--msm-cream); cursor: pointer; width: 26px; height: 26px; border-radius: 4px; font-size: 1rem; line-height: 1; color: var(--msm-ink); }
[data-msm-cart-drawer] .msm-drawer__remove { border: 0; background: none; cursor: pointer; color: var(--msm-muted); font-size: 1.2rem; line-height: 1; }
[data-msm-cart-drawer] .msm-drawer__remove:hover { color: var(--msm-danger); }
[data-msm-cart-drawer] .msm-drawer__foot .msm-drawer__sub { display: flex; justify-content: space-between; font-family: var(--msm-font-mono); margin-bottom: 12px; }
[data-msm-cart-drawer] .msm-drawer__checkout { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; border: 2px solid var(--msm-brass); border-radius: var(--msm-radius); background: var(--msm-brass); color: var(--msm-vinyl); font-family: var(--msm-font-body); font-weight: 700; text-decoration: none; }
[data-msm-cart-drawer] .msm-drawer__checkout:hover { box-shadow: var(--msm-shadow); }



@media (min-width: 900px) {
  :root {
    --msm-art-card:   160px;
    --msm-art-detail: 240px;
  }
  .msm-shop .grid { gap: 20px 16px; }
  .msm-shop .rail { gap: 16px; }
}
/* ===== responsive ===== */
@media (max-width: 860px) {
  .msm-shop .browse-experience-banner__inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 20px; }
  .msm-shop .album { grid-template-columns: 1fr; gap: 20px; justify-items: stretch; }
  .msm-shop .album__media { width: 100%; justify-content: center; }
  .msm-shop .album__cover { width: var(--msm-art-detail); max-width: min(var(--msm-art-detail), 70vw); margin-inline: auto; }
  .msm-shop .cart { grid-template-columns: 1fr; }
  .msm-shop .account { grid-template-columns: 1fr; }
  .msm-shop .account__nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .msm-shop .artist-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .msm-shop .timeline { grid-template-columns: 1fr; }
  .msm-shop .timeline li { border-top: none; border-left: 3px solid var(--msm-line-strong); }
  .msm-shop .timeline li.is-done { border-left-color: var(--msm-brass); }
}
@media (max-width: 600px) {
  :root {
    --msm-art-card:     140px;
    --msm-art-detail:   148px;
    --msm-art-lineitem: 56px;
    --msm-art-thumb:    48px;
  }
  .msm-shop { font-size: 16px; }
  .msm-shop .section { padding-block: 48px; }
  .msm-shop .art-ph--lg .art-ph__name { font-size: 1.05rem; }
  /* Two-up catalog on phones; rails show ~2 cards in view */
  .msm-shop .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  .msm-shop .card { width: 100%; max-width: none; }
  .msm-shop .rail {
    grid-auto-columns: 42vw;
    gap: 10px;
  }
  .msm-shop .rail .card { width: 100%; }
  .msm-shop .card__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .msm-shop .section--tight { padding-block: 22px; }
  .msm-shop .lineitem { grid-template-columns: var(--msm-art-lineitem) 1fr; }
  .msm-shop .lineitem__price { grid-column: 2; text-align: left; }
  .msm-shop .album__cover { width: min(148px, 42vw); }
  [data-msm-cart-drawer] { width: 100%; max-width: 100%; }
}