/* Court Dark: tokens, page shell and the components every page type shares.
   Page-type CSS lives beside this file as <template>.css and is loaded only on that page type.
   Breakpoints: phone < 768px, tablet 768–1099px, desktop >= 1100px. */

@font-face { font-family: "Anton"; src: url("../fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  --cd-ground: #0E0F11;
  --cd-raised: #15171A;
  --cd-chip: #1A1C20;
  --cd-hair: #23262B;
  --cd-border: #2C3036;
  --cd-border-strong: #3A3E45;
  --cd-text: #F2F2EF;
  /* Zack, 2026-10-07: all text on the dark background is white, never grey. Both secondary tokens are white. */
  --cd-text-2: #F2F2EF;
  --cd-muted: #F2F2EF;
  --cd-accent: #C8F03C;
  --cd-accent-hover: #E2FF7A;
  /* Hover states must be obvious (Zack, 2026-10-16): lime text turns white, hovered card borders turn lime. */
  --cd-border-hover: #C8F03C;
  --cd-on-accent: #0E0F11;
  --cd-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --cd-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cd-gutter: 64px;
  --cd-section: 96px;
  --cd-radius: 20px;
  --cd-radius-s: 14px;
  color-scheme: dark;
}
@media (max-width: 1099px) { :root { --cd-gutter: 32px; --cd-section: 72px; } }
@media (max-width: 767px)  { :root { --cd-gutter: 20px; --cd-section: 48px; --cd-radius: 18px; } }

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body.cd { margin: 0; background: var(--cd-ground); color: var(--cd-text); font-family: var(--cd-body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
.cd img { max-width: 100%; height: auto; display: block; }
.cd a { color: var(--cd-accent); text-decoration: none; }
.cd a:hover { color: var(--cd-text); }
.cd h1, .cd h2, .cd h3, .cd h4, .cd p, .cd ul, .cd ol, .cd figure, .cd blockquote { margin: 0; }
.cd button, .cd input, .cd select, .cd textarea { font: inherit; color: inherit; }
.cd :focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 3px; border-radius: 4px; }
.cd-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cd-accent); color: var(--cd-on-accent) !important; padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.cd-skip:focus { top: 12px; }
.cd-icon { flex-shrink: 0; }

/* ------------------------------------------------------------ layout */
.cd-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--cd-gutter); }
.cd-section { padding-top: var(--cd-section); }
.cd-main { display: block; min-height: 50vh; }
.cd-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

/* ------------------------------------------------------------ type */
.cd-h1 { font-family: var(--cd-display); font-weight: 400; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.5px; overflow-wrap: break-word; }
.cd-h1--xl { font-size: 144px; }
.cd-h1--l { font-size: 112px; }
.cd-h1--m { font-size: 88px; line-height: 0.94; }
.cd-h1--s { font-size: 72px; line-height: 0.96; }
.cd-h1--name1 { font-size: 176px; line-height: 0.88; }
.cd-h1--name2 { font-size: 144px; }
.cd-h1--name3 { font-size: 112px; line-height: 0.92; }
@media (max-width: 1099px) {
  .cd-h1--xl, .cd-h1--name1 { font-size: 112px; }
  .cd-h1--l, .cd-h1--name2 { font-size: 88px; }
  .cd-h1--m, .cd-h1--name3 { font-size: 72px; }
  .cd-h1--s { font-size: 56px; }
}
@media (max-width: 767px) {
  .cd-h1--xl, .cd-h1--name1 { font-size: 76px; }
  .cd-h1--l, .cd-h1--name2 { font-size: 64px; }
  .cd-h1--m, .cd-h1--name3 { font-size: 52px; }
  .cd-h1--s { font-size: 40px; line-height: 1; }
}
@media (max-width: 380px) {
  .cd-h1--xl, .cd-h1--name1 { font-size: 64px; }
  .cd-h1--l, .cd-h1--name2 { font-size: 56px; }
  .cd-h1--m, .cd-h1--name3 { font-size: 46px; }
}
.cd-h2 { font-family: var(--cd-display); font-weight: 400; text-transform: uppercase; font-size: 56px; line-height: 1; letter-spacing: 0; }
.cd-h3 { font-family: var(--cd-display); font-weight: 400; text-transform: uppercase; font-size: 32px; line-height: 1.05; }
@media (max-width: 767px) { .cd-h2 { font-size: 36px; } .cd-h3 { font-size: 26px; } }
.cd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--cd-accent); }
.cd-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cd-muted); }
.cd-lede { font-size: 19px; line-height: 1.55; color: var(--cd-text-2); max-width: 640px; }
@media (max-width: 767px) { .cd-lede { font-size: 17px; } }
.cd-muted { color: var(--cd-muted); }
.cd-num { font-family: var(--cd-display); font-weight: 400; line-height: 1; }

/* ------------------------------------------------------------ header */
.cd-header { position: relative; z-index: 50; border-bottom: 1px solid var(--cd-hair); background: var(--cd-ground); }
.cd-header__bar { max-width: 1440px; margin-inline: auto; padding: 18px var(--cd-gutter); display: flex; align-items: center; gap: 32px; }
.cd .cd-logo { font-family: var(--cd-display); font-size: 26px; letter-spacing: 0.5px; color: var(--cd-text); white-space: nowrap; line-height: 1; }
.cd .cd-logo span { color: var(--cd-accent); }
.cd .cd-logo:hover { color: var(--cd-text); }
.cd-logo--lg { font-size: 30px !important; }
.cd-nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; margin-left: auto; }
.cd .cd-nav a { color: var(--cd-text); padding: 10px 0; }
.cd .cd-nav a:hover { color: var(--cd-accent); }
.cd-search { display: flex; align-items: center; gap: 10px; background: var(--cd-chip); border: 1px solid var(--cd-border); border-radius: 999px; color: var(--cd-muted); }
.cd-search input { background: transparent; border: 0; outline: none; color: var(--cd-text); width: 100%; min-width: 0; }
.cd-search input::placeholder { color: var(--cd-muted); opacity: 1; }
.cd-search:focus-within { border-color: var(--cd-border-strong); }
.cd-search--header { width: 260px; padding: 0 18px; min-height: 44px; font-size: 14px; }
.cd-menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--cd-text); align-items: center; justify-content: center; margin-left: auto; cursor: pointer; border-radius: 999px; }
.cd-menu-btn__close { display: none; }
.cd-menu-btn[aria-expanded="true"] .cd-menu-btn__open { display: none; }
.cd-menu-btn[aria-expanded="true"] .cd-menu-btn__close { display: inline-flex; }
.cd-menu { position: absolute; left: 0; right: 0; top: 100%; min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); overflow-y: auto; background: var(--cd-ground); padding: 8px var(--cd-gutter) 32px; }
.cd-menu > * { max-width: 640px; }
body.cd-menu-open { overflow: hidden; }
.cd-menu[hidden] { display: none; }
.cd-search--menu { padding: 0 18px; min-height: 52px; font-size: 16px; background: var(--cd-raised); margin-bottom: 8px; }
.cd-menu__nav { display: flex; flex-direction: column; margin-bottom: 24px; }
.cd .cd-menu__nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; min-height: 56px; border-bottom: 1px solid var(--cd-hair); color: var(--cd-text); }
.cd-menu__label { font-family: var(--cd-display); font-size: 36px; line-height: 1; text-transform: uppercase; }
.cd-menu__meta { display: inline-flex; align-items: center; gap: 10px; color: var(--cd-muted); font-size: 14px; font-weight: 500; }
.cd-menu__social { display: flex; gap: 24px; margin-top: 16px; }
.cd .cd-menu__social a { color: var(--cd-text-2); padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }
@media (max-width: 1279px) { .cd-nav { gap: 22px; } .cd-search--header { width: 220px; } }
@media (max-width: 1099px) {
  .cd-nav, .cd-search--header { display: none; }
  .cd-menu-btn { display: inline-flex; }
  .cd-header__bar { padding-block: 12px; padding-right: calc(var(--cd-gutter) - 8px); }
}
@media (max-width: 767px) { .cd .cd-logo { font-size: 22px; } }

/* ------------------------------------------------------------ buttons, chips */
.cd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.cd .cd-btn--primary { background: var(--cd-accent); color: var(--cd-on-accent); }
.cd .cd-btn--primary:hover { background: var(--cd-accent-hover); color: var(--cd-on-accent); }
.cd .cd-btn--ghost { border-color: var(--cd-border-strong); color: var(--cd-text); background: transparent; font-weight: 500; }
.cd .cd-btn--ghost:hover { border-color: var(--cd-text-2); color: var(--cd-text); }
.cd-btn--block { display: flex; width: 100%; }
.cd-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.cd-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--cd-chip); border: 1px solid var(--cd-border); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cd-text); white-space: nowrap; }
.cd a.cd-chip { color: var(--cd-text); }
.cd a.cd-chip:hover { border-color: var(--cd-border-hover); color: var(--cd-text); }
.cd-chip.is-active { background: var(--cd-accent); border-color: var(--cd-accent); color: var(--cd-on-accent) !important; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) { .cd-chip { font-size: 12px; padding: 6px 11px; } }

/* ------------------------------------------------------------ store buttons and price note */
.cd-stores { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.cd-store { display: flex; flex-direction: column; gap: 4px; }
.cd .bsd-price { display: block; position: relative; font-size: 13px; line-height: 1.4; color: var(--cd-muted); margin: 2px 0 0 4px; max-width: 260px; }
.cd .bsd-price strong { color: var(--cd-text); }
.cd .bsd-price-tip { background: var(--cd-chip) !important; border: 1px solid var(--cd-border); color: var(--cd-text-2) !important; }
@media (max-width: 767px) {
  .cd-stores { flex-direction: column; align-items: stretch; }
  .cd-store .cd-btn { width: 100%; }
}

/* ------------------------------------------------------------ section heads */
.cd-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.cd-sechead__link { font-size: 15px; font-weight: 700; white-space: nowrap; padding: 10px 0; }
@media (max-width: 767px) { .cd-sechead { margin-bottom: 16px; } .cd-sechead__link { font-size: 14px; } }

/* ------------------------------------------------------------ tiles (product shots) and photos */
.cd-tile { display: flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 16px; aspect-ratio: 16 / 10; overflow: hidden; width: 100%; }
.cd-tile__img { width: 90% !important; height: 100% !important; object-fit: contain; }
.cd-tile--missing { background: var(--cd-raised); border: 1px dashed var(--cd-border-strong); color: var(--cd-muted); flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.cd-photo { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ cards and count-aware grids */
.cd-card { display: flex; flex-direction: column; gap: 12px; color: var(--cd-text) !important; min-width: 0; }
.cd-card:hover .cd-shoecard__name, .cd-card:hover .cd-playercard__name { color: var(--cd-accent); }
.cd-shoecard__name { font-size: 17px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.cd-shoecard__tag { font-size: 13px; color: var(--cd-muted); margin-top: -6px; }
.cd-playercard__img { aspect-ratio: 3 / 4; border-radius: var(--cd-radius-s); background: var(--cd-raised); object-position: top; }
.cd-playercard .cd-tile--missing { aspect-ratio: 3 / 4; }
.cd-playercard__name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.cd-playercard__sub { font-size: 13px; color: var(--cd-muted); margin-top: -8px; }
/* Any linked photo: a lime ring on hover, and product shots zoom a little inside their white tile. */
.cd-playercard__img, .cd a .cd-tile { transition: box-shadow 0.2s ease; }
.cd a .cd-tile__img { transition: transform 0.3s ease; }
.cd-card:hover .cd-playercard__img, .cd a:hover .cd-tile:not(.cd-tile--missing) { box-shadow: 0 0 0 2px var(--cd-border-hover); }
.cd a:hover .cd-tile__img { transform: scale(1.05); }
@media (max-width: 767px) { .cd-shoecard__name { -webkit-line-clamp: 3; min-height: 0; font-size: 15px; } }

/* Grids take a count class from bsd_court_count_class(): cd-n1, cd-n2, cd-n3 or cd-nx (4 and up).
   --cols is the full column count for that grid; 1, 2 and 3 items never leave a lonely quarter-width card. */
.cd-cards { display: grid; gap: 24px 20px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.cd-cards.cd-n1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.cd-cards.cd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-cards.cd-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) { .cd-cards { --cols: 3; } .cd-cards.cd-n1 { max-width: none; } }
@media (max-width: 767px) {
  .cd-cards, .cd-cards.cd-n3, .cd-cards.cd-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .cd-cards.cd-n1 { grid-template-columns: minmax(0, 1fr); }
}
.cd-more[hidden] { display: none !important; }
.cd-showall { margin-top: 28px; }

/* ------------------------------------------------------------ pagination, empty state, breadcrumbs */
.cd-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--cd-hair); }
.cd-pager__nums { display: flex; gap: 6px; align-items: center; }
.cd-pager__num { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; color: var(--cd-text) !important; }
.cd-pager__num:hover { background: var(--cd-chip); }
.cd-pager__num.is-current { background: var(--cd-text); color: var(--cd-ground) !important; }
.cd-pager__gap { color: var(--cd-muted); padding: 0 4px; }
.cd-pager__compact { display: none; color: var(--cd-text-2); font-size: 15px; }
@media (max-width: 767px) { .cd-pager__nums { display: none; } .cd-pager__compact { display: inline; } .cd-pager .cd-btn { padding-inline: 16px; } }
.cd-count-line { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--cd-hair); color: var(--cd-muted); font-size: 15px; }
.cd-empty { background: var(--cd-raised); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); padding: 40px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cd-empty__title { font-family: var(--cd-display); font-size: 32px; text-transform: uppercase; line-height: 1.05; }
.cd-empty__text { color: var(--cd-text-2); max-width: 560px; }
.cd-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 767px) { .cd-empty { padding: 24px; } .cd-empty__title { font-size: 26px; } }
.cd-crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--cd-muted); }
.cd-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--cd-text); }
.cd .cd-crumbs a { color: var(--cd-text-2); }
.cd .cd-crumbs a:hover { color: var(--cd-accent); }

/* ------------------------------------------------------------ page heads (listing pages, indexes) */
.cd-pagehead { padding-top: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--cd-hair); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cd-pagehead__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cd-pagehead__count { text-align: right; flex-shrink: 0; }
.cd-pagehead__count .cd-num { font-size: 96px; color: var(--cd-accent); }
.cd-pagehead__count p { color: var(--cd-muted); font-size: 15px; }
@media (max-width: 767px) {
  .cd-pagehead { padding-top: 28px; padding-bottom: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .cd-pagehead__count { text-align: left; }
  .cd-pagehead__count .cd-num { font-size: 48px; }
}

/* ------------------------------------------------------------ forms */
.cd-field { display: flex; flex-direction: column; gap: 8px; }
.cd-field label, .cd-newsletter__form label { font-size: 14px; font-weight: 700; }
.cd-input, .cd-newsletter input[type="email"] { min-height: 50px; background: var(--cd-ground); border: 1px solid var(--cd-border-strong); border-radius: 999px; padding: 0 20px; color: var(--cd-text); font-size: 16px; outline: none; width: 100%; }
.cd-input:focus, .cd-newsletter input[type="email"]:focus { border-color: var(--cd-text-2); }
.cd select.cd-input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9EA6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }

/* ------------------------------------------------------------ newsletter */
.cd-newsletter { margin-top: var(--cd-section); }
.cd-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cd-newsletter > * { min-width: 0; }
.cd-newsletter__copy { display: flex; flex-direction: column; gap: 14px; }
.cd-newsletter__copy p:not(.cd-eyebrow) { color: var(--cd-text-2); max-width: 520px; }
.cd-newsletter__form { background: var(--cd-raised); border: 1px solid var(--cd-border); border-radius: var(--cd-radius); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.cd-newsletter__row { display: flex; gap: 10px; }
.cd-newsletter__note { font-size: 13px; color: var(--cd-muted); }
/* After signing up the form gives way to this; a failed signup shows the alert above the field (parts/newsletter.php). */
.cd-newsletter__done { display: flex; gap: 20px; align-items: flex-start; background: var(--cd-raised); border: 2px solid var(--cd-accent); border-radius: var(--cd-radius); padding: 32px; outline: none; }
.cd-newsletter__check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cd-accent); color: var(--cd-on-accent); }
.cd-newsletter__check svg { width: 28px; height: 28px; }
.cd-newsletter__done-title { font-family: var(--cd-display); font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--cd-text); margin-bottom: 8px !important; }
.cd-newsletter__done p:not(.cd-newsletter__done-title) { font-size: 16px; line-height: 1.55; color: var(--cd-text); }
.cd-newsletter__done strong { color: var(--cd-accent); font-weight: 700; white-space: nowrap; }
.cd-newsletter__alert { font-size: 15px; font-weight: 500; color: #FF8A73; background: rgba(255, 138, 115, 0.1); border: 1px solid rgba(255, 138, 115, 0.45); border-radius: var(--cd-radius-s); padding: 12px 16px; }
.cd-newsletter__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* bots fill it; people never see it */
@media (max-width: 1099px) { .cd-newsletter { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 767px) { .cd-newsletter__form { padding: 22px; } .cd-newsletter__row { flex-direction: column; }
  .cd-newsletter__done { padding: 22px; gap: 16px; } .cd-newsletter__check { width: 44px; height: 44px; } .cd-newsletter__check svg { width: 22px; height: 22px; } .cd-newsletter__done-title { font-size: 28px; } }

/* ------------------------------------------------------------ footer */
.cd-footer { margin-top: var(--cd-section); border-top: 1px solid var(--cd-hair); padding: 56px 0 48px; }
.cd-footer__grid { display: grid; grid-template-columns: 5fr 2fr 2fr 3fr; gap: 24px; }
.cd-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.cd-footer__brand p { color: var(--cd-muted); font-size: 15px; max-width: 420px; }
.cd-footer nav { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.cd .cd-footer nav a { color: var(--cd-text); padding: 6px 0; }
.cd .cd-footer nav a:hover { color: var(--cd-accent); }
.cd-footer__head { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cd-muted); margin-bottom: 6px !important; }
.cd-footer__legal { margin-top: 40px !important; padding-top: 24px; border-top: 1px solid var(--cd-hair); font-size: 13px; color: var(--cd-muted); }
@media (max-width: 1099px) { .cd-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cd-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .cd-footer { padding: 32px 0 40px; }
  .cd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cd .cd-footer nav a { padding: 10px 0; }
}

/* ------------------------------------------------------------ prose (articles, content pages) */
.cd-prose { font-size: 19px; line-height: 1.7; color: var(--cd-text-2); max-width: 720px; }
.cd .cd-prose > * + * { margin-top: 1.1em; }
.cd-prose h2 { font-family: var(--cd-display); font-weight: 400; text-transform: uppercase; color: var(--cd-text); font-size: 44px; line-height: 1; margin-top: 1.6em; }
.cd-prose h3 { color: var(--cd-text); font-size: 24px; line-height: 1.25; font-weight: 700; margin-top: 1.4em; }
.cd-prose h4 { color: var(--cd-text); font-size: 19px; font-weight: 700; }
.cd-prose strong { color: var(--cd-text); }
.cd-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cd-prose ul, .cd-prose ol { padding-left: 1.3em; }
.cd-prose li + li { margin-top: 0.4em; }
.cd-prose blockquote { border-left: 0; padding: 0; font-family: var(--cd-display); text-transform: uppercase; font-size: 36px; line-height: 1.1; color: var(--cd-text); }
.cd-prose img { border-radius: var(--cd-radius-s); }
.cd-prose figcaption, .cd-prose .wp-caption-text { font-size: 14px; color: var(--cd-muted); margin-top: 8px; }
.cd-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cd-prose th, .cd-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cd-hair); vertical-align: top; }
.cd-prose th { color: var(--cd-text); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.cd-prose .cd-table-scroll { overflow-x: auto; }
.cd-prose iframe { max-width: 100%; }
@media (max-width: 767px) { .cd-prose { font-size: 17px; } .cd-prose h2 { font-size: 32px; } .cd-prose blockquote { font-size: 26px; } }

/* ------------------------------------------------------------ clamp with "Read the full story" */
[data-cd-clamp] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp, 5); overflow: hidden; }
.cd-readmore { background: none; border: 0; padding: 10px 0; color: var(--cd-accent); font-weight: 700; cursor: pointer; font-size: 15px; }
.cd-h1, .cd-h2, .cd-h3 { color: var(--cd-text); }
.cd-prose h2, .cd-prose h3, .cd-prose h4 { font-family: var(--cd-body); }
.cd-prose h2 { font-family: var(--cd-display); }

.cd-search { cursor: text; }
.cd-search input { align-self: stretch; }
/* Editor text inside story/description blocks keeps its paragraph breaks. */
.cd [data-cd-clamp-wrap] p + p, .cd [data-cd-clamp] p + p { margin-top: 1em; }
/* Placeholder text is the one grey on the dark background, so it never reads as typed text (Zack, 2026-10-07).
   Disabled controls are faded with opacity; both are the agreed exceptions to all-white text. */
.cd input::placeholder, .cd textarea::placeholder { color: #9A9EA6; opacity: 1; }

/* ------------------------------------------------------------ rating stars (WP-PostRatings)
   Zack, 2026-10-08: until the visitor has rated a shoe, its five stars are empty with a thin white outline (they no
   longer show the fan average, which sits beside them as a number). Hovering, focusing or choosing fills the stars up
   to the pointer in the accent, as before. The vote widget is .wp-postratings-vote; after voting the plugin shows its
   read-only strip instead, untouched here. The outline is an SVG background because the plugin draws stars as a CSS
   mask, which cannot carry a stroke; the mask comes back for the filled states. */
.cd .wp-postratings-vote label .wp-postratings-item,
.cd .wp-postratings-scale:hover label .wp-postratings-item,
.cd .wp-postratings-scale:focus-within label .wp-postratings-item {
  -webkit-mask-image: none !important; mask-image: none !important; background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.46l-5.9 3.1 1.12-6.57L2.45 9.34l6.6-.96z' fill='none' stroke='%23F2F2EF' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
}
.cd .wp-postratings-vote.wp-postratings-scale label:hover .wp-postratings-item,
.cd .wp-postratings-vote.wp-postratings-scale label:hover ~ label .wp-postratings-item,
.cd .wp-postratings-vote.wp-postratings-scale input:focus-visible + label .wp-postratings-item,
.cd .wp-postratings-vote.wp-postratings-scale input:focus-visible + label ~ label .wp-postratings-item,
.cd .wp-postratings-vote.wp-postratings-scale input:checked + label .wp-postratings-item,
.cd .wp-postratings-vote.wp-postratings-scale input:checked + label ~ label .wp-postratings-item {
  background-image: none !important; background-color: var(--cd-accent) !important;
  -webkit-mask-image: var(--wp-postratings-shape) !important; mask-image: var(--wp-postratings-shape) !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}


/* After voting: the visitor's own stars in the accent, the rest outlined; a cast vote can't be changed by hovering. */
.cd .wp-postratings-vote.cd-voted { pointer-events: none; }
.cd .wp-postratings-strip .wp-postratings-track .wp-postratings-item {
  -webkit-mask-image: none !important; mask-image: none !important; background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.46l-5.9 3.1 1.12-6.57L2.45 9.34l6.6-.96z' fill='none' stroke='%23F2F2EF' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
}
.cd .wp-postratings-strip .wp-postratings-fill .wp-postratings-item { color: var(--cd-accent); background-color: var(--cd-accent); }
/* Swipe rows: fade the edge that hides more content; a grab cursor for mouse dragging (js/court.js). */
.cd-swipe { cursor: grab; }
.cd-swipe--dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
.cd-swipe--more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.cd-swipe--more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.cd-swipe--more-left.cd-swipe--more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
/* Ad spots (court.php bsd_court_ad_spot, filled by Raptive): no space at all until an ad lands, then centred with room
   around it. Never display: none, or Raptive skips the spot. */
.cd-ad:empty { display: block; height: 0; margin: 0; padding: 0; } /* no overflow or border: margins must collapse through it */
.cd-ad:not(:empty) { display: block; margin: 40px auto; text-align: center; max-width: 100%; overflow: hidden; }
.cd-ad--header:not(:empty) { margin: 16px auto; }
.cd .cd-prose > .cd-ad:empty { margin-top: 0; }
.cd .cd-prose > .cd-ad:not(:empty) { margin: 40px auto; } /* beats the prose's * + * spacing */
.cd-bo-picks > .cd-ad:not(:empty) { margin: 20px auto; } /* plus the 20px flex gap = 40px */
.cd-bo-picks > .cd-ad:empty { margin-top: -20px; } /* cancels the picks' flex gap (css/best-of.css) */
@media (max-width: 767px) { .cd-ad:not(:empty) { margin: 24px auto; } .cd-ad--header:not(:empty) { margin: 12px auto; } .cd-bo-picks > .cd-ad:empty { margin-top: -16px; }
  .cd .cd-prose > .cd-ad:not(:empty) { margin: 24px auto; } .cd-bo-picks > .cd-ad:not(:empty) { margin: 8px auto; } }